The canvas

The canvas is the center of the workspace, where your page renders live — the real thing, not a mock-up. You work on it directly: click to select, drag to rearrange, double-click to type. How it behaves depends on the current mode ; this page covers the interactions shared by the visual modes.

Pan and zoom

In Design and Stylebook mode the canvas is an open surface you move around:

• Pan — scroll with the mouse wheel or trackpad. Hold Shift while scrolling to pan sideways, or drag with the middle mouse button.

• Zoom — hold ⌘ (macOS) or Ctrl (Windows/Linux) and scroll; the canvas zooms toward your cursor. ⌘= / Ctrl+= zooms in, ⌘- / Ctrl+- zooms out, and ⌘0 / Ctrl+0 resets to 100%.

• The zoom controls in the tab bar do the same, plus Fit to bring the whole canvas into view.

In Edit mode the page scrolls like a normal browser page instead of panning, and Ctrl -scrolling zooms the content itself — the text reflows at the new size, like browser page zoom.

Selecting elements

Click any element to select it. Studio outlines it, the right panel inspects it, and the status bar shows its position in the page structure — a clickable trail of its ancestors.

You can also move the selection from the keyboard: ↑ and ↓ step between siblings, ← selects the parent, → steps into the first child, and Esc clears the selection. The full list is in the shortcut reference .

The block action bar

A small floating toolbar appears above the selected element:

• A back arrow selects the parent element.

• The name badge shows what's selected — the element's type or its name. When the element can become something else (a paragraph into a heading, for example), clicking the badge lists the conversions.

• The ⠿ drag handle — drag it to move the element somewhere else on the page.

• Move up and Move down arrows swap the element with its neighbors.

• For a component instance, Edit Component opens the component itself; for anything else, Convert to Component turns the selection into a reusable component.

• While you're editing text, formatting buttons (bold, italic, and friends) and an Insert data button join the bar. See Edit mode .

Inserting elements

Three ways to add something to the page:

• The + affordance — move the pointer between two elements and a + appears at the insertion point. Click it and pick an element from the menu; the new element lands right there, selected.

• The slash menu — while editing text, type / at the start of a line to insert headings, lists, images, buttons, and more without leaving the keyboard. See Edit mode .

• The Elements panel — open the Elements activity and drag an element or component card onto the canvas.

Drag and drop

You can drag onto and around the canvas from almost anywhere: cards from the Elements panel, rows in the Layers panel, and the ⠿ handle on the block action bar. While you drag, an indicator line shows exactly where the element will land — before, after, or inside the element under the cursor. Drop to commit, or press Esc to cancel the drag with nothing changed.

The right-click context menu

Right-click any element for the full action list: Copy , Cut , Duplicate , Copy styles and Paste styles , Insert before and Insert after , Wrap in Div , Repeat… (turn the element into a repeating list), Set Title , Edit Component or Convert to Component , and Delete . With something on the clipboard, Paste inside and Paste after appear too.

Editing text

Double-click any text to start typing in place. Everything about writing on the canvas — formatting, the slash menu, links — is covered in Edit mode .

Next

• Style what you select in Design mode

• Wire up behavior in Script & logic

• Keep your hands on the keys with the shortcut reference