Introduction to BlockNote

BlockNote is a block-based rich-text editor for React (opens in a new tab), focused on providing a great out-of-the-box experience with minimal setup.

With BlockNote, we want to make it easy for developers to add a next-generation text editing experience to their app, with a UX that's on-par with industry leaders like Notion, Google Docs or Coda.

Unlike other rich-text editor libraries, BlockNote organizes documents into blocks. This makes it easy for the user to organize their document, and for developers to interact with the document from code.

BlockNote has been created with extensibility in mind. You can customize the document, create custom block types and customize UX elements like menu items. Advanced users can even create their own UI from scratch and use BlockNote with vanilla JavaScript instead of React.

• Jump right into the quickstart to get started
• Learn about blocks and the editor basics and how to interact with the editor using the editor API
• See UI Components to customize built-in menus and toolbars and Styling & Theming to customize the look and feel of the editor
• Further extend the editor with your own Blocks using Custom Schemas or add Real-Time Collaboration

Why BlockNote?

There are plenty of libraries out there for creating rich-text editors. In fact, BlockNote is built on top of the widely used ProseMirror (opens in a new tab) and TipTap (opens in a new tab).

As powerful as they are, these libraries often have quite a steep learning-curve and require you to customize every single detail of your editor. This can require months of specialized work.

BlockNote instead, offers a great experience with minimal setup, including a ready-made and animated UI.

On top of that, it comes with a modern block-based design. This gives documents more structure, allow for a richer user experience while simultaneously making it easier to customize the editor's functionality.

Community

We'd love your feedback! If you have questions, need help, or want to contribute reach out to the community on Discord (opens in a new tab) and GitHub (opens in a new tab).

Next: Set up BlockNote

See how to set up your own editor in the Quickstart. Here's a quick sneak peek in case you can't wait!

import { useCreateBlockNote } from "@blocknote/react";
import "@blocknote/core/fonts/inter.css";
import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 
// import { BlockNoteView } from "@blocknote/mantine";
// import "@blocknote/mantine/style.css";
import { BlockNoteView } from "@blocknote/ariakit";
import "@blocknote/ariakit/style.css";
// import { BlockNoteView } from "@blocknote/shadcn";
// import "@blocknote/shadcn/style.css";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
    initialContent: [
      {
        type: "image",
      },
      {
        type: "table",
        content: {
          type: "tableContent",
          rows: [
            {
              cells: ["", "", ""],
            },
            {
              cells: ["", "", ""],
            },
            {
              cells: ["", "", ""],
            },
          ],
        },
      },
      {
        type: "paragraph",
        content: "Hello, world!",
      },
    ],
  });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}