Skip to content

Edgeless Editor

This editor component offers a canvas with infinite logical dimensions, suitable for whiteboard and graphic editing.


  • All the rich text editing capabilities in the page editor.
  • CanvasElement rendered to HTML5 canvas, including shapes, brushes, connectors, and text.
  • Use of frames to denote canvas areas of any size.
  • Presentation mode achieved by switching between multiple frames in sequence.
  • Nestable group elements.
  • Various link cards that can be inserted on top of the canvas.
  • Customizable toolbars and other widgets.

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 { EdgelessEditor } from '@blocksuite/presets';

const editor = new EdgelessEditor();


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 root block. Accordingly, commonly used editing APIs are provided in the root service.

Specifically, the canvas element and some blocks that appear on the top layer of the canvas are located on the surface block. Therefore, operating the edgeless editor also requires accessing the model and service mounted on this block.

To integrate and customize this editor, you can:

🚧 We are planning support for more frameworks.


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