blocksuite

BlockSuite is a toolkit for building text editors and collaborative applications on the web. It is not a finished editor product that end users run directly. Instead, it is a set of building blocks that developers use to construct editors, in the same way that a word processor company might use an underlying editor framework rather than writing all the text-handling logic from scratch.

The project grew out of AFFiNE, an open-source knowledge base application, and was eventually split out as a standalone project when it became clear it had value beyond its original home. The relationship is similar to how the code editor inside Visual Studio Code was eventually released separately as the Monaco Editor.

BlockSuite ships two ready-to-use editor components. The PageEditor is a block-based document editor similar to what you would find in tools like Notion. The EdgelessEditor is a canvas-based editor that combines freeform drawing and graphics with the same rich text capabilities as the PageEditor. Both are implemented as web components, which means they work with any web framework, including React, Vue, or plain JavaScript, without requiring any particular setup.

At its core, BlockSuite uses a technology called CRDT (specifically the Yjs library) to manage document state. CRDT is a data structure designed for situations where multiple people edit the same document at the same time. Because the framework uses it from the ground up rather than as an add-on, real-time collaboration is built into every document by default rather than being layered on afterward.

Other capabilities include support for defining custom block types, importing and exporting documents in formats like Markdown and HTML, and synchronizing document state across multiple editor instances. The project is written in TypeScript and is actively developed, though the README notes it is still in an early stage.