Skip to content

Doc Editor

This editor component is designed for conventional flow content editing, offering functionalities aligned with rich text editors based on the frameworks like ProseMirror or Slate.


  • Text, lists, and code blocks, along with customizable inline elements.
  • Images, attachments, and customizable embed blocks.
  • Database block that provides tables with kanban view support.
  • Bidirectional links between documents and transclusion similar to Notion synced blocks.
  • Two types of selections, including native text selection and block-level selection.
  • Cross-block dragging and multiple widget toolbars.

Moreover, this editor inherits capabilities built into the BlockSuite framework, including:

Notably, the BlockSuite framework allows runtime compatibility between the page editor and the edgeless editor, beyond mere static file format compatibility. This means you can dynamically attach the same doc object to different instances of the page editor and edgeless editor.


import { PageEditor } from '@blocksuite/presets';

const editor = new PageEditor();

Assigning a doc object to editor.doc will attach a block tree to the editor, and contains the API surface for editing. The quick start guide also serves as an online playground.


Like all BlockSuite editors, the editor UI is entirely composed of the combination of block specs. A specialized root block spec serves as the root node of the document and implements all top-level document UI, with main widgets also mounted on the Accordingly, commonly used editing APIs are provided in the page service.

To integrate and customize this editor, you can:

🚧 We are planning support for more frameworks.


Since PageEditor is a native web component, all DOM-related properties are inherited.