[opensourcedex]

blocksuite is a free, open source collaboration & communication project written in TypeScript and released under MPL-2.0. It has 6,016 GitHub stars, 563 forks and 196 open issues, and was last pushed 2 days ago. On this registry it ranks #16 of 41 tracked projects in Collaboration & Communication, with 5 head-to-head comparisons available. It gained 2 stars over the last 3 tracked days.

What is blocksuite?

BlockSuite is an MPL-2.0 licensed TypeScript toolkit for building block-based editors and collaborative applications, intended for developers who need to embed, extend, or compose rich content editing rather than adopt a finished product.

What it is

BlockSuite is a content editing tech stack for the web, distributed as npm packages such as @blocksuite/store and @blocksuite/presets. It implements a set of content editing infrastructures, UI components, and editors independently, and can be treated as a UI component library for building various editors on top of a minimized vanilla framework that serves as their runtime. All BlockSuite components, including the editors, are native web components, which makes them framework-agnostic and interoperable with popular frameworks.

The concrete problem it solves is the cost of assembling an editor and a collaboration layer from incompatible parts. The project originated in the AFFiNE knowledge base, where the design goals were to support multimodal editable content under a consistent framework, to manage state across multiple documents with intertwined references, and to treat real-time collaboration as native rather than as an optional plugin. In practice it replaces the bespoke editor framework and the separate plugin-based collaboration stack that a team would otherwise write and maintain itself, and it also gives developers the option to build new editors from scratch on the underlying vanilla framework.

Key capabilities

  • PageEditor, a comprehensive block-based document editor offering extensive customization and flexibility.
  • EdgelessEditor, a graphics editor with opt-in canvas rendering support that shares the same rich-text capabilities as PageEditor.
  • Native web components throughout, including the editors, so components interoperate with popular frameworks.
  • CRDT-native data flow for editor state management, described in the project blog as a clearer and more reliable approach than plugin-based collaboration.
  • Custom blocks defined through the block tree, documented under blocksuite.io/guide/working-with-block-tree.html.
  • A components library plus an examples/ directory for customizing and enhancing the first-party editors.
  • Published npm release channels, including the latest release of @blocksuite/store and a canary release of @blocksuite/presets.

Who uses it and how

  • The AFFiNE knowledge base is the originating deployment, and BlockSuite was open sourced and maintained independently once it outgrew its in-house role there.
  • Product teams that already have an application shell use the web components to embed editing without adopting a framework-specific wrapper.
  • Developers targeting multimodal content views such as text, slides, mind maps, and tables use one framework across presentation modes.
  • Knowledge tools dealing with complex structures of intertwined references rely on the framework managing state across multiple documents.
  • Teams that want full control build new editors from scratch on the vanilla runtime instead of reusing PageEditor or EdgelessEditor.

Getting started

Install from npm: the framework store lives in @blocksuite/store and the first-party editors and components in @blocksuite/presets, the latter also published under a canary tag. A zero-install trial is available through the Open in StackBlitz link in the README, and documentation lives at blocksuite.io.

How it compares

The facts provided name no paid products that BlockSuite replaces and no directly comparable editor frameworks, so it stands alone in this registry. Its nearest named relation is AFFiNE, the knowledge base it came from, which consumes it rather than competes with it.

When to use it — and when not to

BlockSuite is a library, not a hosted service, so adopting it means building and operating the application around it rather than running an installer. The README states plainly that the project is in its early stage, with components and extension capabilities still under refinement, and the repository carries 196 open issues, so teams needing frozen APIs or a turnkey editor product should look elsewhere. The MPL-2.0 licence is unambiguous for those who do proceed.

project readme (upstream, from github) — read inline

BlockSuite

BlockSuite logo and name

Checks Status Issues Closed NPM Latest Release NPM Canary Release Open in StackBlitz Join Discord Gurubase

Overview

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:

  • Reuse multiple first-party BlockSuite editors:
    • 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.
  • Customize, extend and enhance these editors with a rich set of BlockSuite components and examples. All BlockSuite components (including editors) are native web components, making them framework-agnostic and easy to interop with popular frameworks.
  • Or, build new editors from scratch based on the underlying vanilla framework.

🚧 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!

Motivation

BlockSuite originated from the AFFiNE knowledge base, with design goals including:

  • Support for Multimodal Editable Content: When considering knowledge as a single source of truth, building its various view modes (e.g., text, slides, mind maps, tables) still requires multiple incompatible frameworks. Ideally, no matter how the presentation of content changes, there should be a consistent framework that helps.
  • Organizing and Visualizing Complex Knowledge: Existing editors generally focus on editing single documents, but often fall short in dealing with complex structures involving intertwined references. This requires the framework to natively manage state across multiple documents.
  • Collaboration-Ready: Real-time collaboration is often seen as an optional plugin, but in reality, we could natively use the underlying CRDT technology for editor state management, which helps to build a clearer and more reliable data flow.

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.

Features

With BlockSuite editors, you can selectively reuse all the editing features in AFFiNE:

affine-demo

And under the hood, the vanilla BlockSuite framework supports:

  • Defining custom blocks and inline embeds.
  • Incremental updates, real-time collaboration, and even decentralized data synchronization based on the document streaming mechanism of the document.
  • Writing type-safe complex editing logic based on the command mechanism, similar to react hooks designed for document editing.
  • Persistence of documents and compatibility with various third-party formats (such as markdown and HTML) based on block snapshot and transformer.
  • State scheduling across multiple documents and reusing one document in multiple editors.

To try out BlockSuite, refer to the quick start example and start with the preset editors in @blocksuite/presets.

Architecture

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:

  • Both AFFiNE and other projects should equally reuse and extend BlockSuite through components, without any privileges.
  • BlockSuite components can be easily reused regardless of whether you are using React or other frameworks.

To that end, the BlockSuite project is structured around key packages that are categorized into two groups: a headless framework and prebuilt editing components.

Framework
@blocksuite/store Data layer for modeling collaborative document states. It is natively built on the CRDT library Yjs, powering all BlockSuite documents with built-in real-time collaboration and time-travel capabilities.
@blocksuite/inline Minimal rich text components for inline editing. BlockSuite allows spliting rich text content in different block nodes into different inline editors, making complex content conveniently composable. This significantly reduces the complexity required to implement traditional rich text editing features.
@blocksuite/block-std Framework-agnostic library for modeling editable blocks. Its capabilities cover the structure of block fields, events, selection, clipboard support, etc.
Components
@blocksuite/blocks Default block implementations for composing preset editors, including widgets belonging to each block.
@blocksuite/presets Plug-and-play editable components including editors (PageEditor / EdgelessEditor) and auxiliary UI components named fragments (CopilotPanel, DocTitle...).

Resources

readme truncated — read the full docs on github

Frequently asked questions

Is blocksuite free to use?

blocksuite is open source under the MPL-2.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does blocksuite do?

🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.

What is blocksuite written in?

blocksuite is primarily written in TypeScript. Its source is publicly available at https://github.com/toeverything/blocksuite, and it has 6,016 GitHub stars.