Getting started
The interface
The rail, the canvas, the tree, the panels — every surface of the app and what it edits.
One window, one project. This page names every surface so the rest of the documentation can point at things without explaining them again.
The top bar
- Project switcher — the project you are in, and the way back to the manager.
- Page switcher — the page you are editing; create, rename and re-route pages here.
+Insert — every element, plus your components and a paste-HTML option.- Breadcrumb — while you are inside a component or a template, a trail back out. Opening a component from inside another one is never a one-way door.
- Save —
⌘S. The dot next to it is unsaved work.
The rail
The left rail switches what the window is editing:
| View | What it edits |
|---|---|
| Build | the page canvas — the default |
| Content | content types, taxonomies and entries |
| Media | everything under public/, with alt text |
| Design | the design system: eleven modules, one screen each |
| Styles | project-wide stylesheets |
| Templates | headers, footers and their scopes |
| Snippets | code attached by a rule |
| Files | the project's real files, read-only where they are generated |
| Settings | this site's settings — name, SEO, publishing, presets |
Every full-width view has the same shape: a rail on the left, a column on the right, sections of rows. Settings and Design are grouped rails rather than flat tab strips, because grouping is what turns eleven pages into an overview.
The canvas
The canvas renders the page for real — your CSS, your fonts, your markup — with no build step. It shows every breakpoint side by side, widest first.
- Click selects; the ring is the element, and the label names it.
- Double-click edits text in place.
- Drag in the tree or on the canvas moves nodes.
- Working inside a frame picks the breakpoint you are editing. A style change made while you are in the tablet frame lands in that breakpoint's media query.
- Drag a frame's edge to check what happens between breakpoints; its icon puts the preset back.
- Play runs the motion runtime on the canvas, because on a canvas every element already sits where its animation ends — a reveal is something you ask to see.
The tree
The page from the other side: a layer list with names, drag-and-drop, and a context menu (duplicate, wrap, copy, paste, delete). Names matter — they are what BEM class generation builds on, and what the canvas label shows.
The panels
On the right, one column with tabs:
- Style — a stack of folds: Layout, Size, Spacing, Position, Typography, Background, Border, Transforms, Appearance, then Effects and Overlays. Each fold is shut by default and shows a count when it is closed and holding something.
- CSS — the same rule as text, with completion for properties, values and your own tokens, plus a Format button.
- Settings — the element itself: its tag, its id, its classes, its attributes, its link, its loop or condition, and — for nav parts — the menu's own three settings.
- Properties — only while you are editing a component: its typed props.
The selector picker at the top of Style and CSS says which rule you are editing. With no id and no class, that is the element attribute — the same selector the design system uses.
Keyboard
| Shortcut | Does |
|---|---|
⌘S | save the page |
⌘Z / ⇧⌘Z | undo / redo |
⌘D | duplicate the selected element |
⌘C / ⌘V | copy / paste an element |
Delete | delete the selected element |
Esc | deselect |
Shortcuts stay out of the way while you are typing in a field.
When an agent is working
If Claude Code is driving the project through the MCP tools, the canvas says so and keeps updating as pages are written. You can stop it and take over at any point — you are both editing the same files through the same engine. See Agents & the MCP.