BlockNote: Build Block-Based Rich Text Editors for React

Overview

BlockNote is a React rich text editor organized around blocks, such as paragraphs and other editable content units. It provides an editor UI and interaction patterns for apps that need a modern, Notion-style editing experience without building those components from scratch.

It is intended for developers embedding an editor in a React application. Its ProseMirror and Tiptap foundations make it extensible, while the included React UI provides a ready-to-use starting point.

Key Features

• Block-based editing with support for nesting and indentation.
• Drag-and-drop block rearrangement.
• Slash menu for inserting content and a format menu for editing selections.
• Helpful placeholders and editing animations.
• Real-time collaboration support.
• React integration with a styled editor component.
• Built on ProseMirror and Tiptap.

Use Cases

• Product teams adding document editing to a React application.
• Developers building note-taking or knowledge-management tools with nested content.
• Teams creating collaborative editors where multiple people need to work in real time.
• Applications that need a rich editing UI but do not want to implement menus and block interactions themselves.

Getting Started

Install the relevant BlockNote packages and create an editor with useCreateBlockNote, then render it with BlockNoteView. See the README and getting started documentation for setup details.

Considerations

• BlockNote is a React-focused library, so it is not a drop-in editor for applications using other UI frameworks.
• The repository README describes different licensing terms for the main packages and the XL packages. The repository metadata reports NOASSERTION, so review the applicable license files and package terms before adopting it, especially for XL packages.
• The project is built on ProseMirror and Tiptap, so extending or integrating it may involve understanding those foundations.