---
layout: v1.0
title: Interactive Playground
permalink: /1.0/playground/
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>

  <div class="feature row">
    <div class="six columns details">
      <h2>An Open Source Project</h2>
      <span class="about">Quill is developed and maintained by <a href="https://slab.com" target="_blank">Slab</a>. It is permissively licensed under BSD. Use it freely in personal or commercial projects!</span>
      <div>
      <span class="github-button">
        <a class="github-action" target="_blank" title="Star Quill on Github" href="https://github.com/quilljs/quill/">
          <svg viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.3 6.53 5.47 7.6.4.06.55-.18.55-.4 0-.18 0-.8 0-1.48-2.02.37-2.54-.5-2.7-.94-.1-.23-.48-.94-.82-1.13-.28-.15-.68-.52 0-.53.62 0 1.07.58 1.22.82.72 1.2 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.77-.2-3.63-.9-3.63-3.95 0-.87.3-1.6.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.2 2.2.83.64-.18 1.32-.27 2-.27.68 0 1.36.1 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.93.08 2.13.5.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.3.25.54.73.54 1.48 0 1.08 0 1.94 0 2.2 0 .22.15.47.55.4C13.7 14.52 16 11.52 16 8c0-4.42-3.58-8-8-8z"/></svg>
          <span>Star</span>
        </a>
        <a class="github-count" target="_blank" title="Quill Stargazers" href="https://github.com/quilljs/quill/stargazers">18,000</a>
      </span>
      </div>
    </div>
    <div class="six columns">
      <svg viewBox="0 0 460 225" xmlns="http://www.w3.org/2000/svg">
<path class="feat-1" d="M149.6 177.3c-.22-5.3.27-9.76-4.52-12.87-6.4-4.16-20.7-2.3-28.13-2.9l-40.32-3.2c-3.58-.3-5.32 2.4-5.24 5.2-2.13 2.5-1.77 7.15-2.07 10-1 9.43-1.64 18.88-2.23 28.33a4.65 4.65 0 0 0 1.1 3.38c-1.2 2.86-.24 6.62 3.4 7.42 9.7 2.12 19.7 1.35 29.6.9 10.07-.44 25 .66 34.6-2.83a13 13 0 0 0 1.37-.6 6.2 6.2 0 0 0 2.1.48l3.5.9c2.52 1 6.35-1.1 6.73-3.82 1.44-10 .5-20.3.1-30.37zM332.54 89.9c-4.8-1.7-16.18.94-21.63 1a50.85 50.85 0 0 0-8.2.58c0-1.66-.42-3-.48-7.94a2.82 2.82 0 0 0-.43-1.52c0-.33-.06-.64-.1-1 .13-1.2.23-2.4.3-3.6a2.73 2.73 0 0 0 .2-1c.06-4 .15-7-.73-10.68a9.84 9.84 0 0 0 2.78-.9 7.1 7.1 0 0 0 2.8-2.95c6.8-3.43 19.44-8.53 16.3-17.24a2.72 2.72 0 0 0-1.92-1.9 13.56 13.56 0 0 0-3.77-.07l-1-.5a2.83 2.83 0 0 0-3.3.42l-.88.82a2.45 2.45 0 0 0-.83 2c-.58.47-1.17 1-1.77 1.54-2.48 2.36-3.26 6.28-5.52 8.63-.25.57-.5 1-.72 1.5l-.6.5c2.5-9.62 4.9-23.95-6.83-23.55-8.1.28-7.47 8.94-5.74 16.93l-.07-.1c-3.26-4.05-12.23-16-17.3-5.54-4.6 9.58 13.46 16.22 19.42 19.37a2.62 2.62 0 0 0 .2 1.06l.6 1.52a3 3 0 0 0 .32.6 2.63 2.63 0 0 0-.05.58l.42 13.58a2.6 2.6 0 0 0-.45 1.53c0 1.94 0 3.9.07 5.86q-.35.46-.72.9a2.76 2.76 0 0 0-.93-.18c-10.43 0-20.8.2-31.2.7a2.77 2.77 0 0 0-2.74 2.74l.17 4.4a2.9 2.9 0 0 0 .23 1c-.44 1.67.37 3.75 2.47 3.56 1.44-.13 3.6-.15 6.15-.2 7.38.06 15.17.5 21.46-1.37l5.33.47c.05 5 0 9.9-.27 14.8a2.64 2.64 0 0 0-.8 1.88l-.4 9.75a2.77 2.77 0 0 0 3.47 2.63l6.35-1.24a2.74 2.74 0 0 0 2-2.64l-1.63-24.15c7.56.95 19.72-.25 25.77-1.25 3.64-.6 8.7-1.6 8.55-6.34-.08-3.18-1.66-4.04-4.38-5zM364.32 39.85a3.5 3.5 0 0 1-1.1-.83 2.76 2.76 0 0 0-4.3.55.46.46 0 0 1-.27.33c-3.45.2-3.5 5.52-.12 5.46 0 .06 0 .13.06.2 1 2.53 5.1 2.58 5.34-.33a3 3 0 0 0 2.3-2 2.8 2.8 0 0 0-1.92-3.38zM296.14 16.4c3.5 0 3.52-5.47 0-5.47s-3.52 5.46 0 5.46zM262.7 18.53a2.13 2.13 0 0 0-.46-1.27h-.06c-.68-2.66-4.93-2.45-5.34 0a4 4 0 0 0-1.43.83c-1.88 1.58-.53 4 1.37 4.44v.05c-1.8 3 2.9 5.76 4.72 2.75a2.38 2.38 0 0 1 1.1-1.1 2.86 2.86 0 0 0 2-2.62v-.53a2.76 2.76 0 0 0-1.9-2.57z"/>
<path class="feat-2" d="M261.23 18.42a9.4 9.4 0 0 0-2.68 1.95c-2.46 2.52 1.4 6.38 3.86 3.86a5.08 5.08 0 0 1 1.6-1.1c3.17-1.5.4-6.22-2.76-4.7z"/>
<path class="feat-1" d="m223.77 23.2c3.5 0 3.52-5.45 0-5.45s-3.52 5.46 0 5.46zm3.03 53.72c3.52 0 3.53-5.46 0-5.46s-3.5 5.46 0 5.46z"/>
<path class="feat-2" d="m227.56 77.53c3.5 0 3.52-5.46 0-5.46s-3.52 5.46 0 5.46z"/>
<path class="feat-1" d="M200.73 60.7a8.8 8.8 0 0 0-1.94 9.07c1.22 3.26 6.5 1.85 5.26-1.45a3.42 3.42 0 0 1 .54-3.76c2.37-2.6-1.48-6.46-3.86-3.86z"/>
<path class="feat-2" d="M197.44 67.8a12.07 12.07 0 0 0 1.65 4c1.88 3 6.6.2 4.7-2.77a7.7 7.7 0 0 1-1.1-2.7c-.73-3.42-6-2-5.26 1.46zM147.58 167.57c-.68-6.93-11.6-7-10.92 0a320.7 320.7 0 0 1 1.5 37.1c-.12 7 10.8 7 10.92 0a320.68 320.68 0 0 0-1.5-37.1z"/>
<path class="feat-3" d="M227.28 76.93a2.9 2.9 0 1 1 2.9-2.9 2.9 2.9 0 0 1-2.9 2.9zm0-4a1.08 1.08 0 1 0 1.08 1.07 1.08 1.08 0 0 0-1.08-1zM363.66 125.4a2.9 2.9 0 1 1 2.9-2.9 2.9 2.9 0 0 1-2.9 2.9zm0-4a1.08 1.08 0 1 0 1.08 1.1 1.08 1.08 0 0 0-1.08-1.07zM297.27 17.14a2.9 2.9 0 1 1 2.9-2.9 2.9 2.9 0 0 1-2.9 2.9zm0-4a1.08 1.08 0 1 0 1.08 1.08 1.08 1.08 0 0 0-1.08-1.06zM223.3 23.88a2.9 2.9 0 1 1 2.9-2.9 2.9 2.9 0 0 1-2.9 2.9zm0-4a1.08 1.08 0 1 0 1.08 1.12 1.08 1.08 0 0 0-1.08-1.1zM361.26 49.92a1.58 1.58 0 0 1-1.45-1 8 8 0 0 0-4.5-4.5 1.55 1.55 0 0 1 0-2.9 7.93 7.93 0 0 0 4.5-4.52 1.54 1.54 0 0 1 1.45-1 1.54 1.54 0 0 1 1.44 1 8 8 0 0 0 4.5 4.52 1.55 1.55 0 0 1 0 2.9 7.94 7.94 0 0 0-4.5 4.5 1.55 1.55 0 0 1-1.44 1zm-4.7-7a9.78 9.78 0 0 1 4.7 4.7A9.8 9.8 0 0 1 366 43a9.76 9.76 0 0 1-4.7-4.7 9.77 9.77 0 0 1-4.75 4.7zm5-5.3zm-.86-.33zM259.88 27.23a1.54 1.54 0 0 1-1.44-1 8 8 0 0 0-4.52-4.5 1.55 1.55 0 0 1 0-2.9 7.94 7.94 0 0 0 4.5-4.5 1.55 1.55 0 0 1 1.46-1 1.54 1.54 0 0 1 1.44 1 7.94 7.94 0 0 0 4.5 4.5 1.55 1.55 0 0 1 0 2.9 7.94 7.94 0 0 0-4.5 4.5 1.55 1.55 0 0 1-1.44 1zm-4.7-7a9.77 9.77 0 0 1 4.7 4.77 9.77 9.77 0 0 1 4.7-4.7 9.8 9.8 0 0 1-4.7-4.72 9.8 9.8 0 0 1-4.72 4.7zm10 .25zm0 0zM225.3 116.7a1.54 1.54 0 0 1-1.46-1 7.94 7.94 0 0 0-4.5-4.5 1.55 1.55 0 0 1 0-2.9 8 8 0 0 0 4.5-4.5 1.6 1.6 0 0 1 2.9 0 8 8 0 0 0 4.5 4.5 1.55 1.55 0 0 1 0 2.9 7.94 7.94 0 0 0-4.5 4.5 1.54 1.54 0 0 1-1.45 1zm-4.72-7a9.77 9.77 0 0 1 4.7 4.72 9.8 9.8 0 0 1 4.72-4.7 9.77 9.77 0 0 1-4.7-4.72 9.76 9.76 0 0 1-4.73 4.76zm5-5.3zM350.43 180.94c-.3-2.85-4.36-3.62-7.4-4-8.53-.94-23.63-1.3-35.22-1.45 14.1-1.92 29.4-4.54 29.55-4.57.65-.08 6.45-.9 8.1-3.63a3.15 3.15 0 0 0 .2-2.84c-.9-2.3-3.32-2.52-10.86-2.85-20.35-.88-64.42 1.8-64.87 1.83a20.16 20.16 0 0 1-5.76-.22.65.65 0 0 1 .1-.34c.6-1.13 3.47-2 4.62-2.3 6.7-2 13.1-3.43 18.72-4.7 2.3-.5 4.5-1 6.54-1.48a29.38 29.38 0 0 0 6.1-2 3.32 3.32 0 0 0-.54-6.13 31.1 31.1 0 0 0-7-1.12 85.84 85.84 0 0 0-29.16 3.87 75.52 75.52 0 0 0-30 17.53c-.62.56-1.15 1-1.6 1.42a6.2 6.2 0 0 1-4.35 1.52c-16.56-.5-48.78-.7-78.44-.8l-.07-.75a5.12 5.12 0 0 0-4.6-4.6c-11.57-1.1-41.26-3.65-67.1-3.65a.9.9 0 1 0 0 1.82c21.1 0 44.74 1.7 59 2.9.65 4.17 3.8 26.37 1.15 44.33-15.13 1-41.12 2.18-62.17.2a.9.9 0 0 0-1 .83.9.9 0 0 0 .82 1c8.4.8 17.57 1.08 26.54 1.08 17.8 0 34.75-1.14 43.12-1.8a6.48 6.48 0 0 0 6-6.14c0-.13 0-.27 0-.4 15.86-.3 31.7-.6 45-.88 15-.3 26.64-.53 31.14-.58a11 11 0 0 1 4.25.9 25 25 0 0 1 2.7 1.53 52.2 52.2 0 0 0 26.48 8.35c9.07.5 17.73.7 25.65.7 25 0 42.66-1.93 42.9-2 1.38-.16 6-.88 6.54-3.2a2.12 2.12 0 0 0-.24-1.7c-.63-1-2.2-1.75-5.1-2.35a132 132 0 0 0-14.55-2c11.4-.73 19.2-1.82 23.28-3.27 4.78-1.7 5-4 4.93-4.64a2.27 2.27 0 0 0-.6-1.63c-1.35-1.54-4.8-1.73-5.2-1.75L309 189.72l34.06-3.38c.48 0 4.75-.53 6.56-2.76a3.48 3.48 0 0 0 .8-2.64zm-201.48 22.92a4.66 4.66 0 0 1-4.28 4.4l-5.3.4c2.5-17.57-.37-38.9-1.14-44l6.1.55a3.3 3.3 0 0 1 3 3c.67 6.97 2.14 24.53 1.62 35.66zm199.28-21.43c-1.14 1.4-4.23 2-5.33 2.1l-43.62 4.33a.92.92 0 0 0-.82.86v.42a.9.9 0 0 0 .87 1l38.56 1.78c1 0 3.24.37 3.9 1.13a.7.7 0 0 1 .15.56s0 1.47-3.72 2.8c-5.33 1.9-17.44 3.17-36 3.8h-.82a1.12 1.12 0 0 0-1.16.76 1.1 1.1 0 0 0 .5 1.22.88.88 0 0 0 .5.17c.16 0 17.1.4 28.5 2.8 3.1.65 3.77 1.28 3.92 1.52a.3.3 0 0 1 0 .3c-.2.75-2.8 1.58-5 1.85a458.34 458.34 0 0 1-68.24 1.18c-13.7-.77-21.16-5.34-25.62-8.08a25.62 25.62 0 0 0-2.95-1.66 12.1 12.1 0 0 0-5-1c-4.5 0-16.15.28-31.15.58-13.23.26-29 .58-44.87.87.23-10-.82-23.58-1.5-31.15 29.58.08 61.7.3 78.22.78a8.1 8.1 0 0 0 5.6-2c.45-.4 1-.88 1.63-1.46a73.84 73.84 0 0 1 29.3-17.14 84.07 84.07 0 0 1 28.5-3.85 29.92 29.92 0 0 1 6.6 1 1.44 1.44 0 0 1 1 1.28 1.47 1.47 0 0 1-.78 1.47 27.4 27.4 0 0 1-5.7 1.9c-2 .5-4.2 1-6.5 1.5-5.66 1.27-12.08 2.7-19.06 4.78-2.25.67-4.68 1.56-5.52 3.15a2.46 2.46 0 0 0-.18 1.93c.15.5.54 1.77 7.58 1.32.44 0 44.37-2.72 64.67-1.82 7.25.32 8.8.6 9.22 1.7a1.34 1.34 0 0 1-.07 1.24c-.9 1.5-4.62 2.5-6.8 2.77-.2 0-21.84 3.73-37.32 5.54a1.3 1.3 0 0 0 .15 2.56c11.5.06 32.34.34 42.93 1.5 3.62.4 5.67 1.23 5.8 2.34a1.66 1.66 0 0 1-.37 1.4zM382.58 74.95a.9.9 0 0 1-.64-.27l-3.35-3.35a.9.9 0 0 1 0-1.26L386.8 61a.9.9 0 0 1 .65-.3.94.94 0 0 1 .66.27l4.15 4.15a.9.9 0 0 1 0 1.32l-9.06 8.25a.9.9 0 0 1-.64.25zm-2.1-4.28l2.13 2.12 7.73-7-2.8-2.8zM242 58.56a.9.9 0 0 1-.6-.24l-9.07-8.26a.9.9 0 0 1 0-1.32l4.15-4.15a.84.84 0 0 1 .66-.28.92.92 0 0 1 .65.3l8.2 9.07a.9.9 0 0 1 0 1.25l-3.34 3.34a.9.9 0 0 1-.66.26zm-7.74-9.2l7.7 7 2.13-2.12-7-7.72zM329 25.83a.92.92 0 0 1-.6-.23 13.14 13.14 0 0 0-11.3-3 .9.9 0 0 1-.84-.27.9.9 0 0 1-.22-.86 7.16 7.16 0 0 1 8.78-5.06 7.17 7.17 0 0 1 5.07 8.8.9.9 0 0 1-.9.63zm-9.3-5.34a15 15 0 0 1 8.6 2.7 5.35 5.35 0 0 0-4-5.06 5.35 5.35 0 0 0-6 2.4c.5-.03.95-.05 1.4-.05zM202.52 73.74a.9.9 0 0 1-.3-.05A7.16 7.16 0 1 1 207 60.2a.9.9 0 0 1 .32 1.5 13.13 13.13 0 0 0-3.93 11 .9.9 0 0 1-.88 1.04zm2.1-12.15a5.36 5.36 0 0 0-5 3.54 5.35 5.35 0 0 0 1.92 6.15 15 15 0 0 1 3.46-9.7h-.35zm-5.9 3.23z"/>
<path class="feat-2" d="M287.9 92.55l-.34 6.5c-.18 3.52 5.28 3.5 5.46 0l.33-6.5c.18-3.55-5.28-3.55-5.46 0zM308 96.87c0-.1 0-.2-.1-.35q-.08-.7-.14-1.42c-.08-.95-.12-1.9-.15-2.85-.08-3.5-5.54-3.52-5.45 0 .06 2.55-.3 7.6 2.48 8.93s5.5-2.52 3.37-4.3zM288.62 50.55c-1.47-2.52-3-5.28-5.9-6.3a2.75 2.75 0 0 0-2.66.7c-4.1 3.6 2.6 11.65 4.66 14.8a2.66 2.66 0 0 0 3.14 1.12c.4.85.8 1.7 1.2 2.57 1.4 3.2 6.12.43 4.7-2.76a102.74 102.74 0 0 0-5.14-10.13zM319.48 50c-1.56-3.17-5.44-3-8-1.16a32.93 32.93 0 0 0-7.73 8.57 14.83 14.83 0 0 0-1.35.65c-3.1 1.68-.34 6.4 2.76 4.72 1.7-.92 3.6-1.38 5.32-2.23s2.92-2.4 4.58-3.4 3.2-1.25 4.2-3a4.35 4.35 0 0 0 .22-4.14z"/>
<path class="feat-1" d="m389.9 32.32c3.5 0 3.52-5.46 0-5.46s-3.52 5.46 0 5.46z"/>
<path class="feat-2" d="m389.6 31.86c3.5 0 3.52-5.46 0-5.46s-3.52 5.46 0 5.46z"/>
<path class="feat-1" d="M370.78 91c-.63.08-1.26.15-1.9.2q-.54 0-1.08 0 .18.06 0 0c-1-.5-1.5-1.34-2.7-1.68-3.38-1-4.83 4.3-1.45 5.27a1.84 1.84 0 1 1 .23.2 7.06 7.06 0 0 0 .88.72 4.9 4.9 0 0 0 1.6.8 11.7 11.7 0 0 0 4.4 0 2.82 2.82 0 0 0 2.72-2.73c0-1.35-1.26-2.92-2.73-2.74z"/>
<path class="feat-2" d="M368.65 97.32a10.33 10.33 0 0 0 2 .07c3.5-.2 3.52-5.68 0-5.47a10.33 10.33 0 0 1-2-.07c-1.47-.2-2.73 1.4-2.73 2.73a2.8 2.8 0 0 0 2.73 2.72z"/>
<path class="feat-3" d="M390 32.26a2.9 2.9 0 1 1 2.9-2.9 2.9 2.9 0 0 1-2.9 2.9zm0-4a1.08 1.08 0 1 0 1.08 1.08 1.08 1.08 0 0 0-1.08-1.06zM367.87 97.78a7.1 7.1 0 0 1-1.7-.2 7.18 7.18 0 0 1-5.26-8.68.9.9 0 0 1 1.5-.48 13.13 13.13 0 0 0 11.35 2.78.9.9 0 0 1 1.1 1.1 7.2 7.2 0 0 1-6.98 5.48zm-1.27-2a5.35 5.35 0 0 0 5.9-2.54 15 15 0 0 1-10-2.45 5.35 5.35 0 0 0 4.08 5zM258.9 91.4h34.35l.06-1.83h-34.4a.9.9 0 0 0 0 1.82zM336.5 89.57h-33.95v1.82h33v8l-32.83 1.14v1.82l33.73-1.2a.9.9 0 0 0 .88-.9v-9.78a.9.9 0 0 0-.83-.9zM293 100.9l-34.1 1.2a.9.9 0 0 0 0 1.8l34-1.2zM336.5 62.86h-28.92c4.9-1.94 12.16-5.24 15-8.8a8.26 8.26 0 0 0-.37-11.3 8 8 0 0 0-11.35.32c-2.8 3-5.15 8.1-6.78 12.47L306.2 41a6.85 6.85 0 0 0-3.15-6.76 10.07 10.07 0 0 0-10.82 0 6.77 6.77 0 0 0-3 6.88l2.3 13.3c-1.6-4.1-3.77-8.6-6.35-11.35a8 8 0 0 0-11.35-.33 8.26 8.26 0 0 0-.38 11.3c2.9 3.57 10.13 6.87 15 8.8h-29.57a.9.9 0 0 0-.9.92v66.62a.9.9 0 0 0 .9.9h77.62a.9.9 0 0 0 .9-.9v-66.6a.9.9 0 0 0-.9-.92zm-24.3-18.53a6.22 6.22 0 0 1 8.8-.26c2.4 2.28 2.5 6 .2 8.83-3.3 4.07-13.44 8-17.43 9.42 1.15-3.88 4.32-13.6 8.44-18zm-19-8.56a8.3 8.3 0 0 1 9 .06 5 5 0 0 1 2.25 4.9l-3.2 22.1h-6.4l-3.82-22a5 5 0 0 1 2.18-5.05zM274.84 52.9c-2.3-2.83-2.2-6.54.2-8.82a6.22 6.22 0 0 1 8.8.25c4.1 4.37 7.28 14.1 8.43 18-3.98-1.42-14.13-5.33-17.43-9.42zm-15 11.77h33.36l-2 64.8h-31.4v-64.8zm33.17 64.8l2-64.8h6.18l1.25 64.8H293zm42.6 0h-31.37L303 64.68h32.6v64.8z"/>
</svg>
    </div>
  </div>
</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 -->