Quill Rich Text Editor

Documentation • Development • Contributing • Interactive Playground

---

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.

To get started, check out https://quilljs.com/ for documentation, guides, and live demos!

Quickstart

Instantiate a new Quill object with a css selector for the div that should become the editor.

1<!-- Include Quill stylesheet -->
2<link
3  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
4  rel="stylesheet"
5/>
6
7<!-- Create the toolbar container -->
8<div id="toolbar">
9  <button class="ql-bold">Bold</button>
10  <button class="ql-italic">Italic</button>
11</div>
12
13<!-- Create the editor container -->
14<div id="editor">
15  <p>Hello World!</p>
16  <p>Some initial <strong>bold</strong> text</p>
17  <p><br /></p>
18</div>
19
20<!-- Include the Quill library -->
21<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
22
23<!-- Initialize Quill editor -->
24<script>
25  const quill = new Quill("#editor", {
26    theme: "snow",
27  });
28</script>

Take a look at the Quill website for more documentation, guides and live playground!

Download

1npm install quill

CDN

1<!-- Main Quill library -->
2<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
3
4<!-- Theme included stylesheets -->
5<link
6  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
7  rel="stylesheet"
8/>
9<link
10  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css"
11  rel="stylesheet"
12/>
13
14<!-- Core build with no theme, formatting, non-essential modules -->
15<link
16  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css"
17  rel="stylesheet"
18/>
19<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.js"></script>

Community

Get help or stay up to date.

• Contribute on Issues
• Ask questions on Discussions

License

BSD 3-clause