The workbench

Sizing the frame

The frame is the visible boundary of the preview iframe, and its size is the preview's viewport — resize it and ctx.viewport follows. The toolbar's width presets jump straight to the sizes that matter for responsive work:

The readout under the frame keeps you honest: it shows the live width × height in pixels and the breakpoint name that width resolves to — the same mobile / tablet / desktop your components read from ctx.viewport.name. When a layout flips unexpectedly, glance there first.

Between presets, drag. The handles flanking the frame resize width (down to a floor of 320px, symmetrically from the centre), and the handle under it resizes height, from 280px up to 2400px — taller than the stage scrolls, for long pages. The double-clicks are worth learning:

• Double-click a width handle to toggle between the two extremes — fill the stage, or drop to the mobile preset if it's already filled.
• Double-click the height handle to fit: height snaps back to tracking the available stage, instead of a fixed pixel value.

Zoom

The toolbar's zoom controls step from 50% to 150% in tens; click the percentage to snap back to 100%. Zoom isn't only cosmetic — sizing is zoom-aware. The stage measures itself through the current zoom, so zooming out genuinely frees canvas width: at 50% a Fill frame can be twice as wide as your window, which is how you preview a desktop layout on a laptop screen. The settings popover carries the same zoom as a slider.

Grid and canvas settings

The toolbar's grid button toggles the background grid painted behind the preview — the iframe is transparent, so the grid shows through and gives transparent components something to sit on. The gear next to it opens the canvas settings popover, where the grid becomes properly yours: style (dots, lines, or off), density, opacity, and — per light and dark mode separately — the canvas background and grid colours. A dark-mode component often wants a different backdrop than the chrome's default; set it once and it persists. Reset canvas puts everything back.

Fullscreen

When you want to look at a component rather than work on it — a design review, a screenshot, a second pair of eyes — the toolbar's fullscreen button (next to the grid toggle; on small screens, next to the settings gear) clears the chrome away. Topbar, sidebar, and inspector all go; only the toolbar and the canvas remain.

Fullscreen also hides the resize handles by default, and with the handles gone the frame goes full-bleed: edge to edge, top to bottom, ignoring your saved width and height without overwriting them — exit fullscreen and the frame is exactly as you left it. If you want to resize while fullscreen, the settings popover gains a Resize handles show/hide row; flip it to show and the frame returns to its sized, draggable self.

For the last scrap of space, the chevron at the toolbar's right end collapses the toolbar entirely, leaving a single floating chevron over the canvas to bring it back.

All of this — handles shown, toolbar collapsed — is per-session by design. Leave fullscreen and it resets, so the next review starts clean: handles hidden, toolbar shown.

Small screens

Below 860px of browser width, the workbench trades its three-pane layout for one pane at a time:

• The sidebar and inspector become drawers, opened from the topbar — a hamburger on the left for the component library, a panel button on the right for the inspector. One at a time: opening one closes the other. A tap on the backdrop or a press of Esc closes them.
• The width presets compress into a single select (with a Custom entry when you've dragged to an in-between width), and a component's toolbar actions fold into an overflow menu.
• Zoom and the grid toggle leave the toolbar; zoom lives on in the settings popover's slider.
• The breadcrumb truncates rather than wraps.

Nothing about the preview changes — the frame, presets, and breakpoint names are the same machinery. 860px is where the chrome reflows; 640 and 1024 are where your component's viewport name changes. The two never interact.

What persists

The workbench remembers how you left it. Layout preferences — the chrome theme, frame width and height, zoom, grid settings, sidebar and inspector collapse, the selected component, and your tag filters — are stored in localStorage under windo:* keys, so a reload (or tomorrow) picks up where you stopped. The deliberate exception is fullscreen: neither the mode nor its toggles survive the session, because a workbench that boots into chromeless fullscreen is a workbench that looks broken.

Where next

• State & actions — the toolbar's component actions, and the state they drive.
• Contexts — the inspector's Context tab, where direction, reduced motion, and locale live.
• The CLI — the command that serves this workbench, and the build that makes it shareable.