quill/docs/index.html

---
layout: default
title: Quill - Your powerful rich text editor
bodyClass: 'home'
redirect_from: /latest/
---
<!-- head -->
<link href="{{site.katex}}/katex.min.css" rel="stylesheet">
<link href="{{site.highlightjs}}/styles/monokai-sublime.min.css" rel="stylesheet">
<link href="{{ site.cdn }}{{ site.version }}/quill.bubble.css" rel="stylesheet">
<link href="{{ site.cdn }}{{ site.version }}/quill.snow.css" rel="stylesheet">
<!-- head -->

<div id="above-container">
  <div class="container">
    <div id="users-container">
      <h2>
        <button class="prev">
          <span class="arrow">
            <span class="tip"></span>
            <span class="shaft"></span>
          </span>
        </button>
        Switch Examples
        <button class="next">
          <span class="arrow">
            <span class="tip"></span>
            <span class="shaft"></span>
          </span>
        </button>
      </h2>
      <h1>Your powerful rich text editor.</h1>
      <ul>
        <li>Trusted by:</li>
        <li>
          <a class="user-linkedin" href="https://www.linkedin.com/" title="LinkedIn" target="_blank"></a>
        </li>
        <li>
          <a class="user-slack" href="https://slack.com/" target="_blank" title="Slack"></a>
        </li>
        <li>
          <a class="user-slab" href="https://www.slab.com/" target="_blank" title="Slab"></a>
        </li>
      </ul>
    </div>

    <div id="laptop-container">
      <div id="camera-container">
        <span class="camera"></span>
        <span class="camera active"></span>
        <span class="camera"></span>
      </div>
      <div id="demo-container">
        <div id="carousel-container">
          <div id="bubble-wrapper">
            <div id="bubble-container">
              <div class="editor"></div>
            </div>
          </div>
          <div id="snow-wrapper">
            <div id="snow-container">
              <div class="toolbar">
                <span class="ql-formats">
                  <select class="ql-header">
                    <option value="1">Heading</option>
                    <option value="2">Subheading</option>
                    <option selected>Normal</option>
                  </select>
                  <select class="ql-font">
                    <option selected>Sailec Light</option>
                    <option value="sofia">Sofia Pro</option>
                    <option value="slabo">Slabo 27px</option>
                    <option value="roboto">Roboto Slab</option>
                    <option value="inconsolata">Inconsolata</option>
                    <option value="ubuntu">Ubuntu Mono</option>
                  </select>
                </span>
                <span class="ql-formats">
                  <button class="ql-bold"></button>
                  <button class="ql-italic"></button>
                  <button class="ql-underline"></button>
                </span>
                <span class="ql-formats">
                  <button class="ql-list" value="ordered"></button>
                  <button class="ql-list" value="bullet"></button>
                  <select class="ql-align">
                    <option label="left" selected></option>
                    <option label="center" value="center"></option>
                    <option label="right" value="right"></option>
                    <option label="justify" value="justify"></option>
                  </select>
                </span>
                <span class="ql-formats">
                  <button class="ql-link"></button>
                  <button class="ql-image"></button>
                  <button class="ql-video"></button>
                </span>
                <span class="ql-formats">
                  <button class="ql-formula"></button>
                  <button class="ql-code-block"></button>
                </span>
                <span class="ql-formats">
                  <button class="ql-clean"></button>
                </span>
              </div>
              <div class="editor">
                <h1 class="ql-align-center">Quill Rich Text Editor</h1>
                <p><br></p>
                <p>Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor built for the modern web. With its <a href="https://quilljs.com/docs/modules/">modular architecture</a> and expressive <a href="https://quilljs.com/docs/api/">API</a>, it is completely customizable to fit any need.</p>
                <p><br></p>
                <iframe class="ql-video ql-align-center" src="https://player.vimeo.com/video/253905163" width="500" height="280" allowfullscreen></iframe>
                <p><br></p>
                <h2 class="ql-align-center">Getting Started is Easy</h2>
                <p><br></p>
                <pre class="ql-syntax" spellcheck="false"><span class="hljs-comment">// &lt;link href="https://cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet"&gt;</span>
<span class="hljs-comment">// &lt;script src="https://cdn.quilljs.com/1.2.6/quill.min.js"&gt;&lt;/script&gt;</span>

<span class="hljs-keyword">var</span> quill = <span class="hljs-keyword">new</span> Quill(<span class="hljs-string">'#editor'</span>, {
  modules: {
    toolbar: <span class="hljs-string">'#toolbar'</span>
  },
  theme: <span class="hljs-string">'snow'</span>
});

<span class="hljs-comment">// Open your browser's developer console to try out the API!</span>
</pre>
                <p><br></p>
                <p><br></p>
                <p class="ql-align-center"><strong>Built with</strong></p>
                <p class="ql-align-center"><span class="ql-formula" data-value="x^2 + (y - \sqrt[3]{x^2})^2 = 1"></span></p>
                <p><br></p>
              </div>
            </div>
          </div>
          <div id="full-wrapper">
            <div id="full-container">
              <div class="editor"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="detail-container">
  <div class="container">
    <a class="action" href="/docs/download/">Download Now</a>
    <h1>An API Driven Rich Text Editor</h1>
  </div>
</div>

<div id="features-container">
  <div class="container">
    <div class="row">
      <div class="feature columns">
        {% include svg/features/developers.svg %}
        <div class="details">
          <h2>Built for Developers</h2>
          <span>Granular access to the editor's content, changes and events through a simple API. Works consistently and deterministically with JSON as both input and output.</span>
          <a class="action-link" href="/docs/">View documentation</a>
        </div>
      </div>
      <div class="feature columns">
        {% include svg/features/cross-platform.svg %}
        <div class="details">
          <h2>Cross Platform</h2>
          <span>Supports all modern browsers on desktops, tablets and phones. Experience the same consistent behavior and produced HTML across platforms.</span>
          <a class="action-link" href="//github.com/quilljs/quill/#readme">See the Chart</a>
        </div>
      </div>
    </div>

    <div id="github-wrapper">
      <div id="github-container">
        {% include github.html %}
      </div>
    </div>

    <hr>

    <div class="feature row">
      <div class="columns details">
        <h2>Fits Like a Glove</h2>
        <span>Used in small projects and giant Fortune 500s alike. Start simple with the Quill core then easily customize or add your own extensions later if your product needs grow.</span>
        <a class="action-link" href="/docs/">Learn More</a>
      </div>
      <div class="columns">
        {% include svg/features/scale.svg %}
      </div>
    </div>
  </div>
</div>

<!-- script -->
<script src="{{site.katex}}/katex.min.js"></script>
<script src="{{site.highlightjs}}/highlight.min.js"></script>
<script src="{{ site.cdn }}{{ site.version }}/{{ site.quill }}"></script>
<script>
(function() {
  $(document).ready(function() {
    var fonts = ['sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'];
    var Font = Quill.import('formats/font');
    Font.whitelist = fonts;
    Quill.register(Font, true);

    var bubbleEditor = new Quill('#bubble-container .editor', {
      bounds: '#bubble-container .editor',
      modules: {
        'syntax': true
      },
      theme: 'bubble'
    });

    var snowEditor = new Quill('#snow-container .editor', {
      bounds: '#snow-container .editor',
      modules: {
        'syntax': true,
        'toolbar': '#snow-container .toolbar'
      },
      theme: 'snow'
    });

    var fullEditor = new Quill('#full-container .editor', {
      bounds: '#full-container .editor',
      modules: {
        'syntax': true,
        'toolbar': [
          [{ 'font': fonts }, { 'size': [] }],
          [ 'bold', 'italic', 'underline', 'strike' ],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'script': 'super' }, { 'script': 'sub' }],
          [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
          [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
          [ {'direction': 'rtl'}, { 'align': [] }],
          [ 'link', 'image', 'video', 'formula' ],
          [ 'clean' ]
        ],
      },
      theme: 'snow'
    });

    var editors = [bubbleEditor, snowEditor, fullEditor];
    switchEditor(1, snowEditor, true);
    var initialContent = snowEditor.getContents();
    bubbleEditor.setContents(initialContent);
    fullEditor.setContents(initialContent);

    $('.camera').click(function() {
      var index = $(this).index();
      $('#above-container').addClass('demo-active');
      switchEditor(index, editors[index]);
    });

    $('#above-container .prev').click(function() {
      var index = editors.indexOf(window.quill) - 1;
      switchEditor(index, editors[index]);
    });
    $('#above-container .next').click(function() {
      var index = editors.indexOf(window.quill) + 1;
      switchEditor(index, editors[index]);
    });

    var users = [{
      'Intuit': 'https://www.intuit.com/',
      'LinkedIn': 'https://www.linkedin.com/',
      'Microsoft': 'https://www.microsoft.com/',
      'Salesforce': 'https://www.salesforce.com/',
      'Slack': 'https://slack.com/',
    }, {
      'Asana': 'https://asana.com/',
      'Airtable': 'https://airtable.com/',
      'Grammarly': 'https://www.grammarly.com/',
      'Gusto': 'https://www.gusto.com/',
      'Vox Media': 'https://www.voxmedia.com/',
    }, {
      'Buffer': 'https://buffer.com/',
      'Front': 'https://frontapp.com/',
      'Lever': 'https://www.lever.co/',
      'Reedsy': 'https://reedsy.com/',
      'Slab': 'https://slab.com/',
    }];
    // Show users randomly
    $('#users-container a').each(function(i, link) {
      var bucket = users[i];
      var keys = Object.keys(bucket);
      var name = keys[Math.floor(Math.random() * keys.length)];
      $(link).attr({
        href: bucket[name],
        title: name,
        class: 'user-' + (name.toLowerCase().replace(/\s/g, ''))
      });
    });

    $('#demo-container .ql-editor').one('touchstart', function(event) {
      $('#above-container').addClass('demo-active');
      event.preventDefault();
    });

    $('#demo-container .ql-editor').one('focus', function(event) {
      if (!$('#above-container').hasClass('demo-active')) {
        $('#above-container').addClass('demo-active');
      }
    });

    loadFonts();
    $('#carousel-container').animate({ opacity: 1 }, 500);

    console.log("Welcome to Quill!\n\nThe editor on this page is available via `quill`. Give the API a try:\n\n\tquill.formatText(11, 4, 'bold', true);\n\nVisit the API documenation page to learn more: https://quilljs.com/docs/api/\n");
  });

  function loadFonts() {
    window.WebFontConfig = {
      google: { families: [ 'Inconsolata::latin', 'Ubuntu+Mono::latin', 'Slabo+27px::latin', 'Roboto+Slab::latin' ] }
    };
    (function() {
      var wf = document.createElement('script');
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
    })();
  }

  function switchEditor(i, editor, skip) {
    // Expose as global so people can easily try out the API
    window.quill = editor;
    if (!skip) console.info('window.quill is now bound to', editor);

    $('.camera').removeClass('active');
    $('.camera:eq(' + i + ')').addClass('active');

    $('.prev, .next').css('visibility', 'visible');
    if (i === 0) $('.prev').css('visibility', 'hidden');
    if (i === 2) $('.next').css('visibility', 'hidden');

    $('#carousel-container').css('margin-left', (i*-100) + '%');
  }
})();
</script>
<!-- script -->