Rich text editor with React Quill in Next.js.

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 WYSIWYG: What you see is exactly what you get in the final output. Media Embedding: Insert images, videos, and links easily. User-Friendly: Intuitive for both technical and non-technical users. 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.

Apr 5, 2025 - 18:39

Rich text editor with React Quill in Next.js.

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

WYSIWYG: What you see is exactly what you get in the final output.
Media Embedding: Insert images, videos, and links easily.
User-Friendly: Intuitive for both technical and non-technical users.
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.