The canvas

Devices, themes & zoom

Each state frame has its own width and height, the canvas has a single global zoom, and the preview has a single theme toggle. This page describes the presets and controls for all three.

Frame size (device presets)

Frame size is set from the Details card (top-left) under Global Dimensions — a width control and a height control, each with device presets, applied across the project's states.

state-frame-size-presets.png

Width presets:

  • Auto (responsive)
  • Mobile S — 320 px
  • Mobile M — 375 px
  • Mobile L — 414 px
  • iPhone 17 Pro — 430 px
  • Tablet — 768 px
  • Laptop — 1024 px
  • Desktop — 1440 px

Height presets:

  • Short — 480 px
  • Default — 600 px
  • iPhone SE — 667 px
  • Laptop — 800 px
  • Desktop — 900 px
  • iPhone 17 Pro — 932 px
  • Tablet — 1024 px

States default to auto width and 600 px height. The frame size can also be adjusted continuously: select a state on the canvas and drag any of its eight resize handles — the four edges or four corners. Hold Shift to keep the aspect ratio, or Alt to resize from the centre; nearby frames snap into alignment as you drag, and a live readout shows the exact width × height. The preset dropdown shows custom when a state no longer matches a named preset.

frame-custom-resize.png

Width presets drive the iframe's CSS width, which means responsive props on components react to the change through the design system's breakpoints tokens.

Light and dark theme

The theme toggle lives in the Details card (top-left), next to the design system name. It only appears if the active project's design system declares more than one themeMode — a single-mode design system has nothing to toggle.

theme-toggle-sidebar.png

The toggle is per-canvas: every state in the project switches together. Switching the canvas to dark does two things:

  • Any colorsDark tokens in the design system replace their light counterparts in the iframe's CSS custom properties.
  • Provider chains that accept a themeMode or similar prop receive the new value (for libraries that expose it this way).

Play mode picks up whichever theme was last set on the canvas; there is no separate Play-mode theme control.

Zoom

Zoom is a single canvas-wide scale factor. Zooming scales the rendered states but does not change the frame's pixel size, so a state set to Tablet width still reports 768 px to its iframe regardless of zoom.

zoom-level-indicator.png

Controls:

  • Cmd+= (or Cmd++) — zoom in
  • Cmd+- — zoom out
  • Cmd+0 — reset to 100 %
  • Cmd+1 — zoom to fit all state frames
  • Cmd (or Ctrl) + scroll wheel — zoom at the cursor
  • Trackpad pinch — zoom at the pinch centre

The range is 10 % to 300 %. Reset and fit transitions are animated briefly so the relationship between the old and new views stays visible.

Panning

Panning is independent of zoom. Hold Space and drag, drag with the middle mouse button, or scroll a trackpad with two fingers. There is no pan-to-state shortcut — use the States panel (open it from the dock) to jump between states.