#Architecture

#User Interactive Data flow

Blocksuite follows a classic data flow pattern:

• All data are provided by Store

• Store will create Model for every editable element and block in the editor.

• Model will be rendered by View

• A bunch of Actions will be bound to View

• Action will trigger a update to Store.

#Document Structure

Blocksuite documents are composed of a block tree.

The top-level block is always a root block, and the leaf blocks are always leaf blocks.

All components on the whiteboard are stored in a surface block, and every editable unit is an element (e.g., brush element, shape element, etc.).

#Extension System

Blocksuite is built upon the blocksuite extension system. For each feature in blocksuite, one or more extensions are introduced to implement its functionality. Extension packages can be categorized into the following types:

• Inline: Inline content used in rich text. Examples: Bold, italic, highlight.

• Block: Block-level content that composes the document. Examples: Paragraph, list, code.

• Gfx: Editable components on the whiteboard. Examples: Shape, brush, frame.

• Widget: Tools that assist users in editing content within the editor. Examples: Slash menu, toolbar, drag handle.

• Fragment: Panels outside the editor that display information retrieved from the editor. Examples: Title, outline, dual link panel.