# BlockNote — Block-Based Rich Text Editor for React

> An open-source block-based editor built on ProseMirror and TipTap that provides a Notion-like editing experience with a React-first API.

## Install

Save in your project root:

# BlockNote — Block-Based Rich Text Editor for React

## Quick Use
```bash
npm install @blocknote/core @blocknote/react @blocknote/mantine
```
```tsx
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";

function Editor() {
  const editor = useCreateBlockNote();
  return <BlockNoteView editor={editor} />;
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-8946b7a4
Author: AI Open Source