Coda
Docs, tables, and apps combined into one collaborative workspace
BlockNote
Block-based React editor delivering modern rich-text experience.
A block-based React rich-text editor built on ProseMirror and Tiptap, offering drag-and-drop, slash commands, real-time collaboration, and ready-made UI components for instant integration.
Overview
Overview
BlockNote is a block‑based rich‑text editor for React, built on top of ProseMirror and Tiptap. It targets developers who need a Notion‑style editing experience for knowledge bases, wikis, or collaborative note‑taking applications.
Integration
The library ships with a fully styled Mantine UI component, drag‑and‑drop block reordering, slash‑menu insertion, nesting via tab/shift‑tab, and real‑time collaboration powered by Yjs. Because it is extensible, you can add custom block types or replace the UI while keeping the core editing engine intact.
Deployment
Installation is a single npm command and the editor can be instantiated with useCreateBlockNote. It runs in any modern React build pipeline (Vite, Next.js, etc.) and is covered by an extensive test suite using Vitest and Playwright.
Highlights
Drag-and-drop block reordering with nesting support
Slash (/) menu for quick block insertion and formatting
Real-time collaboration powered by Yjs
Fully styled Mantine UI component ready for production
Pros
- Extensible architecture built on ProseMirror/Tiptap
- Comprehensive UI out-of-the-box reduces development time
- Strong community support and active testing pipeline
- MPL-2.0 license permits commercial use without source disclosure
Considerations
- XL extensions require GPL-3.0 or commercial license
- Learning curve for ProseMirror concepts
- Limited built-in themes beyond Mantine styling
- Documentation may assume familiarity with React ecosystem
Managed products teams compare with
When teams consider BlockNote, these hosted platforms usually appear on the same shortlist.
Looking for a hosted option? These are the services engineering teams benchmark against before choosing open source.
Fit guide
Great for
- Teams building collaborative note-taking or wiki applications
- SaaS products needing a Notion-style editor
- Developers who prefer TypeScript and React
- Projects that require real-time editing with Yjs
Not ideal when
- Pure JavaScript projects without React
- Applications that cannot accommodate GPL-3.0 licensed extensions
- Simple plain-text editors where block features are unnecessary
- Environments lacking modern build tooling (e.g., pnpm, Vite)
How teams use it
Internal Knowledge Base
Employees create, organize, and edit documentation with live collaboration and block nesting.
Customer Support Portal
Support agents draft rich articles using slash commands and drag-and-drop, publishing instantly to the help center.
Educational Content Creator
Instructors build interactive lesson plans with embedded media blocks and real-time student co-authoring.
Project Management Dashboard
Teams embed the editor to capture meeting notes, task lists, and roadmaps within a single collaborative view.
Tech snapshot
TypeScript89%
HTML5%
CSS4%
JavaScript2%
Frequently asked questions
Is BlockNote free for commercial use?
Yes, the core packages are under MPL-2.0, which allows commercial and closed-source applications.
How does real-time collaboration work?
Collaboration is enabled through Yjs integration, synchronizing document changes across clients.
Can I customize the editor UI?
The editor is built with Mantine components and can be styled or replaced with custom React components.
What licensing applies to the XL extensions?
XL packages are released under GPL-3.0; a commercial license is required if you cannot comply with that license.
What are the main dependencies?
BlockNote relies on ProseMirror, Tiptap, React, and optional Yjs for collaboration.
Project at a glance
Active- Stars
- 8,977
- Watchers
- 8,977
- Forks
- 674
Repo age3 years old
Last commit10 hours ago
Primary languageTypeScript
Last synced 10 hours ago