The editor has four regions around the canvas. Workspaces slide over the canvas when you need them and slide away when you are done.
| Region | What it holds |
|---|---|
| Toolbar (top) | Site menu, page switcher, tools, breakpoint switcher, zoom, timeline, undo/redo, collaborators, sync status, Preview and Publish. |
| Left sidebar | Tabs for Layers, Pages, Components and Assets, and the workspace buttons at the bottom. |
| Canvas (center) | One artboard per breakpoint for the current page, component artboards and loose elements. |
| Inspector (right) | Tabs for Design, Interactions and Tokens. With nothing selected it shows page settings. |
The toolbar
- Site menu: site settings, plugins, save as template, export and keyboard shortcuts.
- Page switcher: jump between pages and template pages.
- Tools: Select V, Frame F, Text T, Image I and Hand H.
- Sections: insert a saved section at the end of the page.
- Breakpoint switcher: choose which breakpoint your style edits write to.
- Zoom, undo/redo, the presence stack of people in the site and the sync pill (saved, saving, offline).
- Timeline ⌥T opens the timeline panel for interactions.
- Preview ⌘↵ runs interactions, bindings and client workflows on the canvas. Publish ships to staging or production.
The left sidebar
- Layers: the node tree of the page. Drag to reorder, double-click or ↵ to rename, hide and lock from the row actions.
- Pages: add, rename and reorder pages; create template pages for CMS collections.
- Components: the site’s components; drag one onto the canvas to place an instance.
- Assets: uploaded images and files.
Workspaces
The buttons at the bottom of the left sidebar open a workspace over the canvas. Press the same button again to return to the canvas.
The inspector
Design shows the sections that apply to the selection: content, link, image, layout, size, position, typography, fill, border, effects, visibility, events, and element-specific sections for forms, fields, instances and collection lists. Above them, the class bar picks which classes the element uses and the state bar picks hover, focus or active.
Interactions lists the animations triggered by or targeting the selection. Tokens edits the site’s colours, fonts and spacing. With nothing selected, the inspector shows the page: title, path, SEO preview and access rule.
The timeline panel
The Timeline button in the toolbar, or ⌥T, docks a timeline under the canvas. It shows the steps of one interaction as bars in seconds: scrub the playhead to see the animation on the canvas, play it, and drag bars to change their timing. See Timeline panel.
The AI panel
In design sessions, an AI panel sits beside the canvas. Describe a change and it edits the page through the same validated, undoable operations you use. See AI and MCP.
Working together
Everyone in a site edits the same live document. You see other people’s avatars, cursors and selections. Changes merge automatically, and undo only reverts your own edits.