Skip to Content
For EditorsThe canvas

The canvas

The canvas is the center of the editor. It shows your page exactly as it will render — no placeholder outlines, no fake styles. What you see is what you’ll publish.

Layout

┌ Top bar ─────────────────────────────────────────────────────────────┐ │ Page title · Undo / Redo · History · Save · Publish · Peers · Settings│ ├─┬──────────────┬────────────────────────┬────────────────────────────┤ │L│ Layers │ │ Edit · Config · Info │ │e│ Blocks │ Live canvas │ Tools · SEO · Assets │ │f│ Comments │ (device-framed) │ │ │t│ Versions │ │ │ └─┴──────────────┴────────────────────────┴────────────────────────────┘
  • Top bar — page title, history controls, save and publish, settings.
  • Left rail — tabs for Layers, Blocks library, Comments, Versions, and any plugin-contributed panels.
  • Canvas — your page, in the selected device viewport.
  • Right rail — the Edit form for the selected block, plus Tools, Config, Info, SEO, and Assets panels.

Selecting blocks

  • Click a block on the canvas to select it. A floating toolbar appears with duplicate, delete, and quick-action buttons.
  • Click again inside the selected block to edit inline where supported (text, headings).
  • Use ↑ / ↓ on the keyboard to select sibling blocks.
  • Press Esc to clear selection.

The selected block is highlighted in the Layers tree on the left, and the Edit form on the right shows its fields.

Device viewports

The canvas can preview four viewports:

ViewportWidthUse case
Desktop1200pxThe default.
Tablet768pxCheck tablet-specific layouts.
Mobile375pxMobile preview.
Fullscreen100%No frame — fills the canvas area.

Switch viewports from the viewport bar above the canvas. The document itself doesn’t change — only the preview frame does.

Viewport switching is visual only. Whether your blocks look different at different widths depends on the CSS in your component renderers.

The block toolbar

When a block is selected, a toolbar floats above it with these actions:

  • Duplicate (⌘/Ctrl+D) — creates a copy directly below.
  • Delete (Delete / Backspace) — removes the block (undoable).
  • Move up / down (Alt+↑ / Alt+↓) — reorder within the same parent.
  • AI — shows block-level AI actions, if any are configured.
  • Comment — opens an inline comment thread (if Comments is enabled).

Inserting blocks between siblings

Hover between two blocks on the canvas — a thin ”+” bar appears. Click it to open the block palette and insert a new block at that exact position. You can also drag blocks from the Blocks panel on the left directly onto the canvas.

Status indicators

The top bar shows whether the document has unsaved changes:

  • Green dot — clean. Your last save or publish matches the current content.
  • Yellow dot — dirty. You have unsaved changes.

The same indicator appears in the browser tab if your page title includes it.

Last updated on