BlockNote — Block-Based Rich Text Editor for React

Introduction

BlockNote is a block-based rich text editor designed for React applications. It gives users a Notion-style editing experience where content is organized into discrete blocks that can be dragged, nested, and converted between types. Under the hood it uses ProseMirror and TipTap for reliable cross-browser editing.

What BlockNote Does

• Provides a block-based editing experience with drag-and-drop reordering
• Renders paragraphs, headings, lists, images, tables, and code blocks as individual blocks
• Supports slash menu commands for quick block insertion
• Outputs content as a typed JSON block tree or as HTML and Markdown
• Offers a React component API with hooks for editor state management

Architecture Overview

BlockNote wraps TipTap (which wraps ProseMirror) and adds a block-level abstraction on top. Each block has a type, props, and optional nested children. The editor maintains a block tree that maps to ProseMirror's document model. UI components for the toolbar, slash menu, and drag handles are rendered as React portals. A schema system lets developers define custom block types with their own rendering and serialization logic.

Self-Hosting & Configuration

• Install the core, React, and UI theme packages from npm
• Choose between Mantine and Ariakit UI themes or build your own
• Pass initial content as a JSON block array to useCreateBlockNote
• Register custom block types via the schema builder before creating the editor
• No backend required; content serialization is handled client-side

Key Features

• Notion-style drag handle for reordering and nesting blocks
• Slash menu with fuzzy search for fast block insertion
• Built-in formatting toolbar with inline styles, links, and text color
• Custom block and inline content types through a typed schema API
• Light and dark theme support out of the box

Comparison with Similar Tools

• TipTap — Lower-level ProseMirror wrapper; BlockNote adds the block abstraction, drag handles, and slash menu on top
• Lexical — Meta's editor framework focused on extensibility; BlockNote provides a more opinionated, ready-to-use block editing experience
• Editor.js — Block editor with a plugin system; BlockNote is React-native and uses ProseMirror for reliable cursor and selection handling
• Plate — Headless editor framework on Slate; BlockNote targets developers who want a working Notion-style editor quickly

FAQ

Q: Does BlockNote work with Next.js? A: Yes. Import BlockNote components in a client component with the "use client" directive.

Q: Can I create custom block types? A: Yes. Use the schema builder to define a block type with custom props, a React render function, and serialization rules.

Q: What format is the editor output? A: BlockNote uses a typed JSON block tree. Helper functions convert this to HTML or Markdown for storage or display.

Q: Is collaborative editing supported? A: Yes. BlockNote supports Yjs-based real-time collaboration through TipTap's collaboration extension.

Sources

• https://github.com/TypeCellOS/BlockNote
• https://www.blocknotejs.org