Canvas

The canvas is the main workspace in Design mode. It shows your app running in live iframe frames. Select elements, navigate the layout, manage multiple viewports. Everything on the canvas is a real, running version of your app, not a static mockup.

Frames

Each frame is a live iframe rendering your app at a specific viewport size. A frame shows:

A top bar with the frame label, URL path, and device info
The live application rendered by the sandbox dev server
Resize handles on edges and corners

You can have multiple frames on the canvas to preview different pages, breakpoints, or branches side by side.

Adding frames

Frames are created when you:

Start a project (a default desktop frame is created)
Add a breakpoint preview from the responsive design tools
Open a page in a new frame from the Pages panel

Frame controls

When a frame is selected, the editor bar shows:

Device selector: Switch between preset dimensions (iPhone, iPad, MacBook, iMac, etc.)
Rotate: Toggle portrait/landscape
Theme toggle: Switch between light and dark mode
Window actions: Reload, close, or duplicate

Resizing frames

Drag the resize handles to set a custom viewport size. Dimensions update in real time, display in the top bar, and persist across sessions.

Zoom

Control zoom from 0.1x to 3x:

Scroll wheel: Ctrl/Cmd + scroll to zoom
Keyboard: Ctrl+= to zoom in, Ctrl+- to zoom out, Ctrl+0 to reset
Zoom controls: Buttons in the bottom-left for zoom in, out, and fit to view

Pan

Move around the canvas:

Scroll: Scroll wheel or trackpad
Middle-click drag: Pan freely
Space + drag: Temporarily activates Pan mode
Recenter: Button in the bottom-left snaps back to the default position

The canvas extends from -5000 to 10000 on both axes, so there's plenty of room for multiple frames.

Element selection

Click any element in a frame to select it. The canvas shows several overlays:

Hover highlight

A rectangle shows the element under your cursor before you click.

Selection rectangle

A colored outline around the selected element, with a label showing the tag name and component info.

Resize handles

Drag handles on corners and edges for changing width or height.

Measurement overlay

Hold Alt/Option while hovering another element to see the pixel distance between it and the selected element. Works like Figma's measurement tools.

Alignment and snap guidelines

Snap guidelines

As you drag an element, red snap lines appear when its edges or center align with other elements. Snaps at a configurable threshold (default: 12px).

Alignment guides

Magenta Figma-style guide lines show alignment relationships in real time as you drag.

Drag measurements

Distance measurements appear between the moving element and nearby elements while dragging.

Overlay system

A transparent layer on top of the frames displays all visual aids:

Selection and hover rectangles
Resize handles
Snap guidelines and alignment guides
Measurement overlays
Drop zone indicators
Comment markers
Text editing cursors

The overlay clips to frame boundaries. Resize handles are in a separate unclipped layer so they stay accessible at frame edges.

Right-click any element for a context menu:

Copy, paste, delete
Group and ungroup
Move to front or back
Navigate to the element in the Layers panel
Open the source code in the Code editor

Tips

Use multiple frames to preview at different sizes simultaneously. Catches responsive issues early.
Hold Alt while hovering to measure distances without leaving the canvas.
Snap guidelines appear automatically when elements are close to aligning.
Right-click for quick actions instead of navigating menus.