Installation

Quill Next comes ready to use in several convenient forms.

npm

React

The react integration is the recommended way to use Quill Next. You can still use the vanilla API if you prefer.

npm install quill-next quill-next-react

import { Delta } from 'quill-next'
import QuillEditor from 'quill-next-react';

export default function App() {
  return (
    <QuillEditor
      defaultValue={new Delta().insert("Hello world")}
      config={{ theme: "next"}}
    />
  )
}

Vanilla

If you don't use React, you can still use Quill Next with the vanilla API.

npm install quill-next@2.0.3

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

import Quill from 'quill-next';
// 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-next';

import { Delta } from 'quill-next';

If you init the Quill with vanilla API, you need to import the CSS manually.

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

CDN

A globally distributed and available CDN is provided, backed by esm.sh. 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.

<link href="https://esm.sh/quill-next/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 type="module">
  import Quill from 'https://esm.sh/quill-next';

  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://esm.sh/quill-next/dist/quill.core.css" rel="stylesheet" />

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

<script type="module">
  import Quill from 'https://esm.sh/quill-next/dist/core.js';

  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.

Styles

If you use the React component from quill-next-react, you don't need to import the stylesheets manually.

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-next/dist/quill.core.css";

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