---
layout: default
title: Interactive Playground
permalink: /playground/
redirect_from:
  - /examples/
pens:
  - title: Autosave
    slug: RRYBEP
  - title: Class vs Inline Style
    slug: jAvpQL
  - title: Form Submit
    slug: kXRjQJ
  - title: Snow Toolbar Tooltips
    slug: ozYEro
  - title: Autogrow Height
    slug: dOqrVm
  - title: Custom Fonts
    slug: gLBYam
  - title: Quill Playground
    slug: KzZqZx
---

<div class="container">
  <div id="playground-container">
   <h1>Interactive Playground</h1>
    <iframe src="//codepen.io/anon/embed/{{page.pens.last.slug}}/?height=500&amp;editable=true&amp;embed-version=2&amp;theme-id=23269&amp;default-tab=js%2Cresult&amp;user=anon" height="500" allowfullscreen></iframe>
  </div>
  <div id="gallery-container">
  {% for pen in page.pens %}
    <div class="four columns{% if forloop.last %} selected-pen{% endif %}">
      <a href="/playground/#{{ pen.title | slugify }}" title="{{ pen.title }}" data-id="{{pen.slug}}">
        <img alt="{{pen.title}} Screenshot" src="https://codepen.io/quill/pen/{{pen.slug}}/image/small.png">
        <span class="pen-label">{{pen.title}}</span>
      </a>
    </div>
  {% endfor %}
  </div>

  {% include open-source.html %}
</div>
<!-- script -->
<script>
$(document).ready(function() {
  $('#gallery-container a').click(function(e) {
    switchSelected(this);
  });
  if (window.location.hash) {
    var anchor = $('#gallery-container a[href="/playground/' + window.location.hash + '"]');
    if (anchor.length > 0) {
      switchSelected(anchor);
    }
  }

  function switchSelected(a) {
    $('#gallery-container .selected-pen').removeClass('selected-pen');
    $(a).parent().addClass('selected-pen');
    var slug = $(a).attr('data-id');
    var src = $('#playground-container iframe').attr('src').split('/');
    src.splice(-2, 1, slug);
    $('#playground-container iframe').attr('src', src.join('/'));
  }
});
</script>
<!-- script -->