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:
| Viewport | Width | Use case |
|---|---|---|
| Desktop | 1200px | The default. |
| Tablet | 768px | Check tablet-specific layouts. |
| Mobile | 375px | Mobile preview. |
| Fullscreen | 100% | 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.