// the find
toeverything/blocksuite
🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
BlockSuite is the editor engine extracted from AFFiNE — a Notion-style knowledge base. It ships two ready-made editors (a page editor and a canvas/edgeless editor) plus the underlying CRDT-native framework for building your own. If you're building a collaborative document editor and don't want to start from scratch with ProseMirror or Slate, this is a serious contender.
- CRDT is the data model, not a plugin bolted on afterward. Yjs is the store, which means real-time collaboration and undo/redo are structural guarantees rather than features you have to wire up yourself.
- The split between `@blocksuite/inline` (per-block rich text) and the block tree is genuinely clever — it sidesteps the classic ProseMirror problem where a single monolithic document model makes complex nested structures painful.
- Web components throughout means the preset editors drop into React, Vue, or plain HTML without a wrapper layer. AFFiNE itself uses React against these components, so the framework-agnostic claim is tested in production.
- The package split is clean: headless framework (`store`, `inline`, `block-std`) is decoupled from the AFFiNE-specific block implementations, so you can take the primitives without inheriting all of AFFiNE's opinions.
- Still self-described as early stage, and the API surface shows it — the changeset history has frequent breaking changes, and the canary releases are the only way to get the latest fixes. Pinning to a stable version means missing bug fixes; tracking canary means churn.
- The monorepo is enormous (dozens of packages under `packages/affine/`) and the mental model to understand which package does what requires reading a lot of docs before you can write a single line of custom block code.
- Documentation covers concepts reasonably well but is light on practical migration paths — importing from markdown or HTML goes through a 'snapshot transformer' abstraction that isn't well-documented for edge cases like nested tables or embedded media.
- The `EdgelessEditor` canvas layer mixes DOM and canvas rendering, which makes it fast but also means custom edgeless elements require understanding two rendering pipelines. There's no clear guide on when to use which.