DEV Community

It's Just Nifty
It's Just Nifty

Posted on • Originally published at niftylittleme.com on

How To Use The Quill Rich Text Editor in Your Next.Js App Router Project

So, in one of my many projects, the Quill Rich Text Editor is used, so in this short article, we will be learning how to use it in our next.js project. Let’s dive in.

Unsplash Image by Pankaj Patel

Getting Started

You probably did this already, but just for the sake of helping the newcomers, you need to run npx create-next-app@latest and also, for quill, run npm i react-quill.

Note: The “i” in the “npm i react-quill” command stands for “install”.

Quill Editor In Use

Let’s now use the Quill Rich Text Editor in our next.js project.

We can start by importing the react-quill editor. Add these lines to your code:

'use client';
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
Enter fullscreen mode Exit fullscreen mode

Now, create and export a component for this page. Inside the component let’s declare a variable named value that uses useState:

const HomePage = () => {
  const [value, setValue] = useState('');
};

export default HomePage;
Enter fullscreen mode Exit fullscreen mode

With us still working inside the component, we should add a modules object, which is used with the Quill Editor to customize it. Customize it with:

  • Formats

  • Headers

  • Font

  • Font Size

  • Text Color

  • Background Color

  • Alignment

  • Lists

  • Code Blocks

  • Indents

  • Direction

  • Image

  • Video

  • Links

And this is how you do that:

  const modules = {
    toolbar: [
     [{ header: [1, 2, 3, 4, 5, 6, false] }],
     ["bold", "italic", "underline", "strike", "blockquote", "script", "code"],
     [{ font: [] }, { size: [] }],
     [{ color: [] }, { background: [] }],
     [{ align: ["right", "center", "justify"] }],
     [{ list: "ordered" }, { list: "bullet" }],
     ["code-block", { indent: "-1" }, { indent: "+1" }, { direction: "rtl" }, { direction: "ltr" }],
     ["link", "image", "video"],
    ],
  };
Enter fullscreen mode Exit fullscreen mode

To actually display the Text editor, we add:

  return (
    <main className="p-4">
        <ReactQuill value={value} onChange={setValue} modules={modules} placeholder="Start Typing Here..." />
    </main>
  );
Enter fullscreen mode Exit fullscreen mode

See, I told you this article will be short. We learned how to use the Quill Rich Text Editor in our next.js app router projects. If you liked this article, follow me on Medium and subscribe to my newsletter.

Happy Coding!

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay