🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
MPL-2.0 License
People who are really serious about editor should make their own framework.
BlockSuite is a toolkit for building editors and collaborative applications. It implements a series of content editing infrastructures, UI components and editors independently.
You can consider BlockSuite as a UI component library for building various editors, based on a minimized vanilla framework as their runtime. With BlockSuite, you can:
PageEditor
: A comprehensive block-based document editor, offering extensive customization and flexibility.EdgelessEditor
: A graphics editor with opt-in canvas rendering support, but also shares the same rich-text capabilities with the PageEditor
.🚧 BlockSuite is currently in its early stage, with components and extension capabilities still under refinement. Hope you can stay tuned, try it out, or share your feedback!
BlockSuite originated from the AFFiNE knowledge base, with design goals including:
During the development of AFFiNE, it became clear that BlockSuite was advancing beyond merely being an in-house editor and evolving into a versatile framework. That's why we chose to open source and maintain BlockSuite independently.
With BlockSuite editors, you can selectively reuse all the editing features in AFFiNE:
And under the hood, the vanilla BlockSuite framework supports:
To try out BlockSuite, refer to the quick start example and start with the preset editors in @blocksuite/presets
.
The relationship between BlockSuite and AFFiNE is similar to that between the Monaco Editor and VSCode, but with one major difference: BlockSuite is not automatically generated based on the AFFiNE codebase, but is maintained independently with a different tech stack — AFFiNE uses React while BlockSuite uses web components.
This difference has led BlockSuite to set clear boundaries based on a component-centric philosophy, ensuring:
To that end, the BlockSuite project is structured around key packages that are categorized into two groups: a headless framework and prebuilt editing components.
See BUILDING.md for instructions on how to build and test BlockSuite from source.
BlockSuite accepts pull requests on GitHub. Before you start contributing, please make sure you have read and accepted our Contributor License Agreement. To indicate your agreement, simply edit this file and submit a pull request.