An Alternative To Editor.js: BlockNote For React

So, previously I was searching for a great WYSIWYG text editor I can add to a few projects of mine. And some time ago, I discovered BlockNote, and instantly I fell in love.

But what is BlockNote and how does it compare to other options like Editor.js or even Quill? In this article, we will talk all about it. So, have a seat and read this article that can potentially answer your questions and/or introduce you to something that will change your project for the better. Let’s dive in!

What The Heck Is BlockNote???

BlockNote is an open-source block-based rich text editor built on top of ProseMirror and TipTap. Like Editor.js, BlockNote separates elements into blocks (headers, paragraphs, images, etc…).

BlockNote was made for React, which is convenient for me, given the fact that I am currently working with the Next.js framework. People who work with Notion will recognize the style.

How Do I Add BlockNote To My Code?

This article would be a throwaway if I did not go over how to actually add BlockNote to your project. So, to make this article actually useful, let’s go over how you start using BlockNote in your next.js project even though the documentation is super clear.

Create a next.js project if you haven’t done so already by running this command in your terminal:

npx create-next-app@latest

Run the command npm install @blocknote/core @blocknote/react @blocknote/mantine to install the necessities for BlockNote.

Now we need to create a components folder inside our projects, but keep it outside the app folder. Inside the folder, create a file called Editor.tsx. Copy and paste this code:

"use client";
import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";

export default function Editor() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}

Now, inside your page.tsx file, copy and paste this code:

import dynamic from "next/dynamic";

const Editor = dynamic(() => import("../components/Editor"), { ssr: false });

function App() {
  return (
    <div>
      <Editor />
    </div>
  );
}

---

Well, this was a short article; however, there’s plenty more to cover when it comes to BlockNote and this was just an introduction. If you liked this article, subscribe to my newsletter. Also, follow me on Medium.

Happy Coding!