If you’ve ever used editors like Markdown, you probably know how frustrating it can become — editing in one format, then previewing something that looks completely different.

A rich text editor is an interface that allows advanced styling options like bold, italic, bullet points, font typefaces, and text sizing — plus the ability to embed images, hyperlinks, and other media — giving you a What You See Is What You Get (WYSIWYG) experience.

Why rich text editors

  1. WYSIWYG: What you see is exactly what you get in the final output.
  2. Media Embedding: Insert images, videos, and links easily.
  3. User-Friendly: Intuitive for both technical and non-technical users.
  4. Versatile: Ideal for blogs, emails, and documentation.

Rich text editors are widely used in content management systems for creating and formatting blog posts, articles, and other web content (e.g., WordPress, Drupal).

In this guide, we’ll use React Quill to create our rich text editor. The original react-quill package is no longer actively maintained — but luckily, there’s a forked and actively maintained version called react-quill-new, and is up to date.

Creating the editor

We’ll build the editor in a few simple steps.

  • Setting up a nextjs project
    On your favorite code editor run npx create-next-app to bootstrap a nextjs project.

  • Install the required dependency
    npm install react-quill-new

On our root layout of our next.js project, we import the css file for the react-quill-new editor in order to be accessed globally. Here we are going to use snow theme.

📁 layout.js

import 'react-quill-new/dist/quill.snow.css'; // snow theme

export const metadata = {
    title: 'React text editor',
    description: 'What you see is what you get text editor with react quill',
}

const RootLayout = ({children}) => {
  return (
    <html>
        <body>
            {children}
        </body>
    </html>
  )
}

export default RootLayout
  • The next thing is to create a component that will hold the editor, let's call it ReactEditor. Here, we are going to include only the common features of a rich text editor, but there is much more and you can find them on react quill documentation.

📁 components/ReactEditor.jsx

"use client";

import ReactQuill from "react-quill-new";

// This modules object configures editor features like toolbar
const modules = {
  // toolbar what tools appear in the UI
  toolbar: [
    [{ header: [1, 2, 3, 4, 5, false] }],
    ["bold", "italic", "underline"],
    [{ color: [] }, { background: [] }],
    ["blockquote", "code-block"],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ align: [] }],
    [{ size: ["small", false, "large", "huge"] }],
    ["link", "image"],
  ],
};

// Defines what is preserved in the content when editing
// (The functionality of the toolbar tools)
const formats = [
  "header",
  "bold",
  "color",
  "background",
  "italic",
  "underline",
  "blockquote",
  "code-block",
  "list",
  "bullet",
  "align",
  "size",
  "link",
  "image",
];

const ReactEditor = () => {
  return (
    <div className="max-w-[1000px] mx-auto mt-10">
      <ReactQuill
        theme="snow"
        modules={modules}
        formats={formats}
        placeholder="Write something awesome..."
      />
    </div>
  );
};

export default ReactEditor;
  • Add the ReactEditor component into your desired page.

📁 page.js

import ReactEditor from "@/components/ReactEditor"

const Homepage = () => {
  return (
    <div>
        <h1 className="text-2xl text-center">Our awesome editor</h1>
        <ReactEditor/>
    </div>
  )
}

export default Homepage

With that, our awesome editor is ready — simple and effective.

If you're saving the editor’s content to a database or using it in a different page (like a preview page), consider using a state management library (such as Redux Toolkit, Zustand, or any other) to persist the content.

Also, if the editor or its content needs to be used in a server component, be sure to import react-quill-new dynamically and render it only on the client side — since react-quill-new relies on browser-specific features so as to escape that notorious SSR error. In that case, your import in the ReactEditor component would look like this:

import dynamic from "next/dynamic";
import "react-quill-new/dist/quill.snow.css"; // Import the snow theme styles
const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false }); // Only load this component on the client side, not on the server.

Conclusion
That’s it — a basic yet smooth and functional WYSIWYG editor using react-quill-new in Next.js. Feel free to expand the features as needed and integrate it into your content workflows.

Happy coding.