BlockSuite

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.

• 👉 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!

Introduction

BlockSuite works very differently than traditional rich text frameworks. Feature highlights:

• 📝 Block-Based Editing: BlockSuite breaks down rich content into discrete contenteditable blocks, avoiding pitfalls using traditional monolithic rich text container.
• 🧬 Intrinsically Collaborative: By harnessing the power of CRDT, any application built with BlockSuite effortlessly supports real-time collaboration right from the start.
• 🧩 Framework Agnostic: With UI components implemented using Web Components, BlockSuite provides editors that can be easily embedded and eliminates the risk of vendor lock-in.
• 🎯 Incremental State Sync: The state updates in BlockSuite can be incrementally encoded as standardized binaries, enabling efficient data synchronization over various network protocols.
• 📏 Compact Rich Text: BlockSuite builds its own rich text component. With minimal responsibilities that benefits from the block-based architecture, this component is light, simple and reliable.
• 🎨 Hybrid Infinite Canvas: A high performance canvas-based renderer is also provided by BlockSuite, fulfilling needs for whiteboard functionalities.

Check out blocksuite.affine.pro for a detailed overview!

Resources

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

Getting Started

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

Current Status (@blocksuite/editor)

For more detailed planning and recent 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
  • 🚧 Block schema

Icons above correspond to the following meanings:

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

Building

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

Contributing

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.

License

MPL 2.0