The canvas is an infinite, zoomable surface. Each page shows as three artboards side by side, desktop, tablet and phone, and every one of them is a live render of the same page. Edit on one and the others update instantly.
Move around
| Do this | How |
|---|---|
| Pan | Scroll with two fingers, hold Space and drag, or use the Hand tool H. |
| Zoom | Pinch, or ⌘ + scroll. Zoom stays centred on the cursor. |
| Zoom in / out | ⌘= / ⌘- |
| Zoom to fit | ⇧1 |
| Zoom to 100% | ⇧0 |
Artboards are real browsers
Each artboard is a sandboxed frame as wide as its breakpoint (1440, 768 and 390 px). Media queries, position: fixed, scroll effects and fonts behave exactly as on the live site. Page artboards grow with their content.
Select and edit
- Click selects the top-level element under the cursor; double-click drills into its children. Double-click text to edit it in place.
- ⇧ + click adds to the selection. ⌘A selects all, Esc deselects, ⇧↵ selects the parent.
- Drag a selected element to move it. Inside a stack, a drop indicator shows where it will land. Drag the handles to resize; the size badge shows the result.
- Arrow keys nudge, ⌥↑ / ⌥↓ move an element among its siblings.
- Right-click for the context menu: copy, cut, paste, paste here, duplicate, wrap in frame, wrap in link (remove link on a link block), create component, hide, lock and delete.
Insert elements
Use a tool key, the insert menu or the context menu. From the insert menu or the context menu, new elements go inside the selected frame, or onto the page body. With a tool, you draw them where you want them (see below).
Draw to insert
The Frame F, Text T and Image I tools insert on press, drag and release: press on an artboard, drag out a box and let go. The new element is selected and the tool goes back to Select.
Where the element lands depends on what you draw into:
- The container. The element goes into the deepest unlocked container under the point where you pressed that the box does not fully cover. Drawing all the way around a card inserts next to it, not inside it.
- Stacks and grids. The element is inserted in the flow at the position under the box, and a drop indicator shows where. The box sets its width and height (a text gets a width only). A box that spans the full content width of a vertical stack gets
width: 100%. - Free frames. The element is positioned absolutely, exactly where you drew the box.
- Wrap what is there. A frame drawn around existing siblings wraps them, in one undo step. In a free frame they keep their spot on screen.
- A click without dragging inserts the element at its default size.
While you drag, hold ⇧ to draw a square, ⌥ to draw from the center, or ⌘ to turn snapping off. Press Esc to cancel. The Text tool starts editing right away with the placeholder text selected, so you can type over it.
Links
Insert a Link for a text link, or a Link block to make a group of elements clickable. To turn existing elements into a link, select them (siblings only), right-click and choose Wrap in link. On a link block, Remove link puts its children back in its place.
Select a link or a button and open the Link section of the inspector:
| Field | What it does |
|---|---|
| Text | The label of a text link. Link blocks show their own content instead. |
| Bound URL | Press to bind the URL to an expression. Inside a collection list or on a template page, the quick picks include Item page, the item's own template page, and the pages of its reference fields, such as Author page. See linking list items. |
| Target | None, Page or URL. New links start on None and go nowhere until you pick a target. |
| Page | The page to open. The link follows the page when you rename it or change its path. |
| URL | Any https://, mailto: or tel: address. Turn on New tab to open it in a new tab. |
A button with a target becomes a link styled as a button. A button inside a form always submits the form, so its Link section only says so: to go to a page from a form, add a link outside the form.
Layers and pages
The Layers tab mirrors the page tree. Drag rows to reorder or re-parent, press ↵ to rename, and use the row buttons to hide (⇧⌘H) or lock (⇧⌘L) a layer. Locked layers cannot be selected on the canvas.
The Pages tab lists the site’s pages. A page has a title and a path. Template pages for CMS collections render one page per item; see CMS template pages.
Copy and paste
⌘C, ⌘X and ⌘V work on elements, between pages and between sites. Pasting plain text creates a text element; pasting an image uploads it to your assets first. ⌘D duplicates in place.
Preview
Press ⌘↵ to preview. Interactions play, bindings resolve with live data and client workflows run, right on the artboards. Clicking a link follows it: a page link opens that page, a link to a CMS item's page (such as /blog/hello) also previews that item, and an external URL opens in a new tab. While you design, clicking a link only selects it.