Nextjs Quill

Pro Component

The Nextjs Quill is a powerful rich text editor built for compatibility and extensibility.
Keep reading our Nextjs Quill examples and learn how to use this plugin.



In order to use this plugin on your page you will need to import the following styles inside your pages/_app.js:

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


function Example() {
  React.useEffect(async () => {
    // we make a dynamic import for the QuillJS, as this component is not made to work on SSR
    const Quill = (await import("quill")).default;
    new Quill(document.querySelector('[data-toggle="quill"]'), {
      modules: {
        toolbar: [
          ["bold", "italic"],
          ["link", "blockquote", "code", "image"],
              list: "ordered",
              list: "bullet",
      placeholder: "Quill WYSIWYG",
      theme: "snow",
  }, []);
  return (
        data-quill-placeholder="Quill WYSIWYG"

export default Example;


Please check the official QuillJS Documentation and its Official Github Repository.