Repolode
Submit
toeverything

toeverything/blocksuite

A TypeScript toolkit of web-component UI components and a CRDT-based data layer for building block editors and collaborative apps.

Open-source alternative to:Notion

View on GitHubWebsite
Stars
6,085
Forks
565
Open issues
196
Last commit
yesterday

What is it?

BlockSuite is a toolkit for building editors and collaborative applications. It provides a headless framework for modeling document state, plus prebuilt editing components such as a block-based document editor (PageEditor) and a graphics-style canvas editor (EdgelessEditor) that share the same rich-text capabilities.

The data layer is built on the Yjs CRDT library, giving documents real-time collaboration and time-travel support. Components are native web components, so they can be used from React or other frameworks. Developers can define custom blocks, reuse one document across several editors, and convert content to and from formats such as Markdown and HTML through snapshots and transformers.

The project originated from the AFFiNE knowledge base and is maintained as an independent library. It is still in an early stage, and its component and extension APIs are being refined.

Key features

  • 01Two prebuilt editors: a block-based page editor and a canvas-style edgeless editor.
  • 02Real-time collaboration and document history built on Yjs CRDT.
  • 03Custom block and inline embed definitions.
  • 04Native web components usable across React and other frameworks.
  • 05Snapshot and transformer support for Markdown and HTML conversion.

Use cases

  • Building a Notion-style block editor inside a web application.
  • Adding collaborative rich-text editing to an existing product.
  • Creating a custom editor by reusing BlockSuite's vanilla framework and components.
  • Sharing one document across multiple editor views.

Quick start

  1. 1

    Read the quick start guide for installing BlockSuite packages

  2. 2

    Start with the preset editors in the presets package

Things to know

  • The README says BlockSuite is in its early stage, so components and extension APIs may still change.
  • Building from source requires following a separate BUILDING.md guide.
  • Licensed under MPL 2.0, a weak copyleft license that requires sharing changes to modified MPL-licensed files.

In collections

Privacy & local-first tools

Topics

#block-editor#rich-text-editor#collaboration#crdt#web-components#yjs#typescript#local-first#block#components

FAQ

What is blocksuite?
A TypeScript toolkit of web-component UI components and a CRDT-based data layer for building block editors and collaborative apps. BlockSuite is a toolkit for building editors and collaborative applications. It provides a headless framework for modeling document state, plus prebuilt editing components such as a block-based document editor (PageEditor) and a graphics-style canvas editor (EdgelessEditor) that share the same rich-text capabilities.
Is blocksuite free to use? What license does it have?
blocksuite is open source under the MPL-2.0 license. Check the license terms before using it in commercial products.
Is blocksuite still maintained?
Actively maintained. The last commit to blocksuite was on Nov 6, 2026.
What can I use blocksuite for?
Building a Notion-style block editor inside a web application. Adding collaborative rich-text editing to an existing product. Creating a custom editor by reusing BlockSuite's vanilla framework and components. Sharing one document across multiple editor views.
How do I install blocksuite?
Read the quick start guide for installing BlockSuite packages Start with the preset editors in the presets package
Where can I get blocksuite?
The source code and installation instructions are on GitHub: https://github.com/toeverything/blocksuite

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects