<editor-container>
A toolkit for building block-based editors and collaborative applications with native web components and CRDT-based real-time collaboration.
What is <editor-container>?
BlockSuite is a content editing tech stack for the web, providing a framework and UI components to create customizable editors and collaborative applications. It originated from the AFFiNE knowledge base project and is designed to handle multimodal content, complex knowledge structures, and real-time collaboration natively.
Developers building customizable content editors, collaborative applications, or knowledge base tools that require block-based editing, real-time collaboration, and framework-agnostic components.
Developers choose BlockSuite for its native CRDT-based real-time collaboration, framework-agnostic web components that work with React, Vue, and others, and its dual-editor approach with PageEditor for documents and EdgelessEditor for graphics.
Overview
🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
Use Cases
Best For
- Building block-based document editors with real-time collaboration capabilities.
- Creating graphics editors that share rich-text capabilities with document editors.
- Developing framework-agnostic editing components that integrate with React, Vue, or other web frameworks.
- Implementing complex knowledge base applications requiring multimodal content editing and cross-document state management.
- Building collaborative applications with native CRDT-based synchronization and document streaming.
- Customizing or extending editors with type-safe editing logic using a command mechanism similar to React hooks.
Not Ideal For
- Projects requiring immediate production stability with long-term support guarantees.
- Teams needing drop-in, fully styled editors without significant customization or CSS work.
- Applications targeting legacy browsers without Web Components support or with strict JavaScript performance constraints.
- Simple text editing tasks where block-based complexity and collaboration are unnecessary.
Pros & Cons
Pros
Built-in real-time synchronization using Yjs enables seamless multi-user editing out of the box, as emphasized in its collaboration-ready design and document streaming features.
All editors and components are native web components, making them interoperable with React, Vue, and other frameworks without framework lock-in, as highlighted in the architecture.
Includes both PageEditor for documents and EdgelessEditor for graphics, sharing rich-text capabilities for flexible multimodal editing, demonstrated in AFFiNE's demo.
Command mechanism similar to React hooks allows writing complex, type-safe editing operations, reducing bugs in custom extensions as described in the features.
Cons
The README explicitly states it's in an early stage with components and extensions under refinement, leading to potential breaking changes and incomplete features.
Involves multiple packages (store, inline, block-std, etc.) and requires understanding of CRDT concepts, making setup and customization more challenging than simpler editors.
As a newer project, it lacks the extensive third-party plugins, community resources, and battle-tested documentation of established alternatives like ProseMirror or Slate.
Open Source Alternative To
<editor-container> is an open-source alternative to the following products:
Frequently Asked Questions
Related Projects
<model-viewer>Easily display interactive 3D models on the web and in AR!
<light-gallery>A customizable, modular, responsive, lightbox gallery plugin.
<rapi-doc>RapiDoc -WebComponent for OpenAPI Spec
<lottie-player>Lottie viewer/player as an easy to use web component! https://lottiefiles.com/web-player
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.