Quill Next

Documentation • Development • Contributing • Interactive Playground

---

Quill Next is a modern rich text editor built on the foundation of Quill. This fork is currently a personal project, aiming to keep Quill thriving and evolving.

Project Goals

1. Continued Maintenance: We will actively maintain Quill Next, ensuring compatibility with modern web standards and regularly updating dependencies.

2. Better Integrations: We aim to provide deeper integration with popular UI frameworks (especially React), allowing seamless embedding of React-based components within the editor.

3. Bug Fixes: We're dedicated to addressing known issues and community-reported bugs to make Quill Next as reliable and stable as possible.

4. Compatibility: Quill Next will remain fully compatible with the original Quill's API and Delta data structures.

Key differences with Quill

• Delta ES: Quill Next uses Delta ES as the Delta data structure, which is a fork of Delta with ES module. You should not aware of this, unless you are a core developer of Quill.
  • Use lodash-es instead of lodash internally.
  • This helps to reduce the bundle size. And be friendly to tree shaking.
• Destory method: Quill Next adds a destroy method to the Quill object, which is used to destroy the editor and destroy all the modules. This helps to avoid memory leaks.

const quill = new Quill('#editor');
quill.destroy();  // the modules are also destroyed

• Exports built-in modules as ES modules.
  • Keyboard: quill/modules/keyboard
• React integration package: quill-next-react
  • Plugins and hooks for React.
• Support Soft Break
  • Press Shift + Enter to insert a soft break.

Quickstart

React Quill

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 Quill

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

<!-- Include stylesheet -->
<link href="https://esm.sh/quill-next/dist/quill.snow.css" rel="stylesheet" />

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br /></p>
</div>

<!-- Initialize Quill editor -->
<script type="module">
  import Quill from 'https://esm.sh/quill-next';

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

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

Download

npm install quill-next

Packages

• Quill: The original Quill editor with bug fixes and improvements.
• Quill Next React: The React wrapper for Quill Next.
• Website: The website of Quill Next, including demo and documentation.

License

BSD 3-clause