Skip to main content
Get started
CanvasViewport
Canvas

Viewport

This page has been cleared and is ready for updated Builder Studio documentation.

The viewport is your window onto the canvas. The workspace itself is effectively infinite, and the camera — your pan position and zoom level — decides which part of it you see. Moving the camera never moves your nodes; it just changes where you are looking.

The camera is yours
Pan and zoom are local to you. They are not part of the shared document, so scrolling around or zooming in does not move the view for anyone else on the canvas. See Multiplayer for what is shared during a live session.

Pan and zoom

  • Pan by scrolling, or by dragging on empty canvas, to move the camera across the workspace.
  • Zoom with a wheel-and-modifier gesture or a trackpad pinch. Zooming centers on your pointer, so the point under the cursor stays put as the view scales.

Zoom is clamped to a wide range — from far out at five percent to deep in at 2000 percent — so you can frame an entire sprawling canvas or work at the individual-pixel level. Pan and zoom are applied smoothly during the gesture and settle into the canvas state when you let go.

The quick-zoom dock

A control dock in the top-right corner gives you direct viewport actions without gestures:

  • Zoom in and Zoom out step the zoom level.
  • Fit to view frames the canvas content so everything fits on screen.
  • A zoom selector shows the current percentage and lets you jump to a preset level. When you are at a non-preset zoom, the current percentage is shown as its own option.

Keyboard framing shortcuts

With the canvas focused, the number row gives you quick framing (hold Shift):

ShortcutAction
Shift + 0Zoom to 100% (actual size)
Shift + 1Fit all content to the view
Shift + 2Fit the current selection to the view
Fit to selection needs a selection
Fit to selection frames whatever nodes are currently selected. With nothing selected, use fit-all (or the Fit to view button) to bring the whole canvas back into frame. See Nodes for how selection works.

Grid and snapping

The canvas shows a dot grid as a spatial reference. Alongside the quick-zoom dock are toggles that govern grid and placement precision:

  • Pixel grid — show or hide a fine grid, useful when you zoom in to work at pixel scale.
  • Snap to grid — switch between pixel-snapped and freeform positioning. A status label reflects the current mode (Pixel or Free), and holding a modifier key temporarily bypasses snapping so you can nudge a node off-grid without turning snapping off.

Appearance

The canvas background color and the grid dot color are part of the canvas's saved appearance. You can change both, and reset them to the defaults, from the workspace and canvas menu in the top-right. See Panels for that menu.

Related

  • Panels — the dock and menu the viewport controls live in.
  • Canvas Overview — the interaction model the viewport sits inside.

Was this page helpful?