Installation

Quill comes ready to use in several convenient forms.

CDN

A globally distributed and available CDN is provided, backed by jsDelivr. This is the most convenient way to get started with Quill, and requires no build steps or package managers.

Full Build

For most users, the full build is the easiest way to get started with Quill. It include the core Quill library, as well as common themes, formats, and modules.

To import the full build, you will need to include the "quill.js" script and the stylesheet for the theme you wish to use.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">

<div id="editor">
  <h2>Demo Content</h2>
  <p>Preset build with <code>snow</code> theme, and some common formats.</p>
</div>

<script>
  const quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Core Build

To fully customize your Quill build, you can import the core library and add only the formats and modules you need.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.core.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.core.js"></script>

<div id="editor">
  <p>Core build with no theme, formatting, non-essential modules</p>
</div>

<script>
  const quill = new Quill('#editor');
</script>

CDN builds expose Quill to the global window object. Quill provides an import() method for accessing components of the Quill library, including its formats, modules, or themes.

npm

If your project uses bundlers such as Webpack or Vite, it's recommended to install Quill via npm.

npm install [email protected]

Similar to the CDN approach, you can import the full build from "quill" or the core build from "quill/core".

import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';

const quill = new Quill('#editor');

Quill.import() is also available for the npm build to access Quill's library. However, a more natural approach in npm enviroment is to import the formats and modules directly.

import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';

import { Delta } from 'quill';
// Or if you only need the core build
// import { Delta } from 'quill/core';
// Or const Delta = Quill.import('delta');

import Link from 'quill/formats/link';
// Or const Link = Quill.import('formats/link');

Styles

Quill's npm package also comes with the stylesheets for the core and themes, just like the CDN build. Those stylesheets live in the dist directory.

You can import them in your JavaScript files if you have a proper bundler setup.

import "quill/dist/quill.core.css";

Refer to webpack-example for a sample project that uses Quill in a webpack project.