BlockSuite (pronounced "block sweet" 🍬) is the open-source editor project behind AFFiNE. It provides an out-of-the-box block-based editor built on top of a framework designed for general-purpose collaborative applications. This monorepo maintains both the editor and the underlying framework.

BlockSuite-based Editor in AFFiNE

• 👉 Try BlockSuite-based AFFiNE online
• 🚀 Edit this page in BlockSuite

⚠️ This project is under heavy development and is in a stage of rapid evolution. Stay tuned or see our roadmap here!

BlockSuite works very differently than traditional rich text frameworks:

• For the data model, BlockSuite eliminates the need to work with data-driven DSLs (e.g., operations, actions, commands, transforms). Instead, it utilizes CRDT as the single source of truth, offering a strongly-typed block tree model built on Yjs. With BlockSuite, manipulating blocks becomes as simple as updating a todo list. Moreover, by fully harnessing the power of CRDT, it supports zero-cost time travel, real-time collaboration, and out-of-the-box pluggable persistence backends.
• For rich text editing, BlockSuite seamlessly organizes rich text content into discrete blocks. In BlockSuite, a document with 100 paragraphs can be rendered into 100 text blocks or 100 individual rich text editor instances, effectively eliminating the outdated practice of consolidating all content into a single, risky contenteditable monolith.
• At the rendering layer, BlockSuite remains framework agnostic. It doesn't limit the block tree rendering to the DOM. Not only does it implement its entire document editing UI using Web Components, but it also offers a hybrid canvas-based renderer for whiteboard content sections. Both renderers can coexist on the same page and share a unified centralized data store.

BlockSuite is not intended to be yet another plugin-based rich text editing framework. Instead, it encourages building various collaborative applications directly through whatever UI framework you're comfortable with. To this end, we will try to open-source more foundational modules as reusable packages for this in the BlockSuite project.

Although BlockSuite is still in its early stages, you can already use the @blocksuite/editor package, the collaborative editor used in AFFiNE Alpha. Note that this editor is also a web component and is completely framework-independent!

• 🎁 Examples
  • Nightly Playground (🔗 source)
  • The SimpleAffineEditor Example (🔗 source)
  • AFFiNE Alpha Editor (🔗 source)
  • CodeSandbox Starter Template
  • BlockSuite Monorepo in CodeSandbox
• 📄 Documentation
• 🗓️ GitHub Project
• 📍 GitHub Issues
• 🎙️ GitHub Discussions
• 💬 Discord Channel
• 🏠 AFFiNE Community
• 🚀 Releases

To learn how to start using BlockSuite, visit blocksuite.affine.pro.

For more detailed planning and progress, please checkout our GitHub project.

• Basic text editing
  • ✅ Paragraph with inline style
  • ✅ Nested list
  • ✅ Code block
  • ✅ Markdown shortcuts
• Block-level editing
  • ✅ Inline text format bar
  • ✅ Inline slash menu
  • ✅ Block hub
  • ✅ Block drag handle
  • ✅ Block-level selection
• Rich-content
  • ✅ Image block
  • ⚛️ Database block
  • 📌 Third-party embedded block
• Whiteboard (edgeless mode)
  • ✅ Zooming and panning
  • ✅ Frame block
  • ✅ Shape element
  • ✅ Handwriting element
  • ⚛️ Shape connector
  • 🚧 Grouping
• Playground
  • ✅ Multiplayer collaboration
  • ✅ Local data persistence
  • ✅ E2E test suite
• Developer experience
  • ✅ Block tree update API
  • ✅ Zero cost time travel (undo/redo)
  • ✅ Reusable NPM package
  • 🚧 Dynamic component registration
  • 📌 Dynamic block registration

Icons above correspond to the following meanings:

• ✅ - Beta
• ⚛️ - Alpha
• 🚧 - Developing
• 📌 - Planned

See BUILDING.md for instructions on how to build BlockSuite from source code.

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.

MPL 2.0