Edit on GitHub


Quill allows several ways to customize it to suit your needs. This section is dedicated to tweaking existing functionality. See the Modules section for adding new functionality and the Themes section for styling.


Quill requires a container where the editor will be appended. You can pass in either a CSS selector or a DOM object.

const editor = new Quill('#editor'); // First matching element will be used
const container = document.getElementById('editor');
const editor = new Quill(container);


To configure Quill, pass in an options object:

const options = {
debug: 'info',
modules: {
toolbar: '#toolbar'
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
const editor = new Quill('#editor', options);

The following keys are recognized:


Default: document.body

DOM Element or a CSS selector for a DOM Element, within which the editor's ui elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries.


Default: warn

Shortcut for debug. Note debug is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default.


Default: All formats

Whitelist of formats to allow in the editor. See Formats for a complete list.


Collection of modules to include and respective options. See Modules for more information.


Default: None

Placeholder text to show when editor is empty.


Default: false

Whether to instantiate the editor to read-only mode.


Name of theme to use. The builtin options are "bubble" or "snow". An invalid or falsy value will load a default minimal theme. Note the theme's specific stylesheet still needs to be included manually. See Themes for more information.

An Open Source Project

Quill is developed and maintained by Slab. It is permissively licensed under BSD. Use it freely in personal or commercial projects!