BlockNote is an open source Block-Based Editor for React that provides a modern Notion-style rich text experience as a drop-in component for web applications.
It focuses on giving developers a polished editing UI and sensible defaults out of the box, while still allowing deep customization of blocks, schemas and editor behavior.
BlockNote is developed by TypeCell and maintained in the open on GitHub, with funding support from the NGI0 Entrust programme of NLnet.
- blocknotejs.org 
- github.com/TypeCellOS/BlockNote
- nlnet.nl/project/BlockNote
# Block-Based Architecture BlockNote structures every document as a list of blocks, rather than as a monolithic stream of text. Each block can represent content such as paragraphs, headings, lists, images, code blocks or custom components, and can be reordered, nested and transformed independently. Internally a block has an id, type, props, content and children, which makes it easy to manipulate documents programmatically and to serialize them as data rather than opaque HTML. This block model is designed to support UX features like drag and drop, indentation, slash commands and inline formatting while keeping the underlying data model simple and queryable.
# Foundations In ProseMirror And Tiptap BlockNote is built on top of ProseMirror and Tiptap, reusing their battle tested document model and plugin architecture instead of inventing a new editor core. Where ProseMirror and Tiptap are relatively low level and require substantial configuration, BlockNote wraps them in a higher level API and ships opinionated defaults so developers can get a production ready editor running quickly. Because the core is still ProseMirror, BlockNote can inherit capabilities such as robust schema validation, collaborative editing support and compatibility with existing editor plugins.
# React First Design BlockNote is designed primarily for React applications, exposing hooks and components that make the editor feel like a natural part of a React component tree. The main developer entry point is a hook that creates an editor instance and a corresponding view component that renders the full UI, including toolbars, menus and content area. A separate Mantine based UI package provides ready made styling, layout and theming, which can be overridden or replaced as needed. Although React is the primary target, BlockNote can also be integrated into vanilla JavaScript environments with a lighter weight setup.
# Ready Made Editor UI One of BlockNote’s core goals is to avoid the common situation where teams spend months building editor chrome around a headless core. The default BlockNote packages ship with an animated, keyboard friendly UI that includes toolbars, slash menus, formatting menus, placeholders, drag handles and block controls. This makes it useful for projects that need a Notion like experience but do not want to design or implement all of the surrounding interaction patterns from scratch. At the same time the UI components are modular so teams can replace menus, icons or layouts to fit their own design systems.
# Collaboration And Local First BlockNote supports Real-Time Collaboration via Yjs and compatible backends such as Y-Sweet or hosted services like Liveblocks. An editor instance can be configured with a Yjs provider and document fragment, allowing multiple users to edit the same BlockNote document concurrently. Cursor positions, selections and changes are synchronized in near real time, and the underlying CRDT model handles conflict resolution without central locking. Because BlockNote focuses on the editor layer, developers are free to design their own local first storage, sync and access control strategies around it.
# Custom Schemas And Extensions BlockNote exposes a custom schema layer that lets developers define new block types, inline content types and styles without dropping down into raw ProseMirror configuration. Custom blocks can introduce domain specific elements such as callouts, embeds, tasks, diagrams or data driven widgets while still fitting into the same document structure and APIs. For advanced use cases the editor can be extended further with direct ProseMirror or Tiptap plugins, allowing teams to reuse existing ecosystem extensions or to build highly specialized behavior. This combination of simple block level customization and deeper access to the editor core is part of BlockNote’s attempt to balance usability and power.
# Manipulating Content Programmatically Beyond the visual editor, BlockNote provides an API for reading and modifying documents from code. Developers can inspect the block tree, insert or remove blocks, update block properties, reorder blocks and manage nesting relationships. Inline content, including styled text and links, can be created and transformed at the level of individual spans, giving precise control over programmatic edits and imports. These APIs make it possible to build features such as template insertion, AI assisted rewriting, content migrations and integrations with external systems.
# Licensing And Governance BlockNote is released under open source licenses that allow use in both free and commercial projects while keeping some larger bundles under copyleft or commercial terms. The project received support from the NGI0 Entrust programme via NLnet, which explicitly aims to fund privacy respecting, user empowering internet infrastructure. BlockNote’s positioning as an open, self hosted alternative to proprietary document editors fits into broader efforts to improve data sovereignty and reduce dependence on closed SaaS platforms.
# Typical Use Cases BlockNote is aimed at developers building applications that require rich, structured text editing rather than plain text fields. Common use cases include documentation tools, knowledge bases, intranet wikis, note taking apps, CRM and ticketing systems, learning platforms and collaborative writing environments. It is also suitable as a building block inside more complex systems, such as project management tools or local first desktop applications, where a Notion like editor is expected as part of the overall experience. # See Also - Block-Based Editor - ProseMirror - Tiptap - React - Real-Time Collaboration - Yjs - Notion Style Editor