Skip to main content

Preview

You've added events, actions, and behaviors to your design. Preview lets you see if it actually works — it opens your design in a separate window where everything is interactive, just as it would be for a real user.

What is preview​

Preview opens a single artboard in a new browser tab, separate from the editor. All interactions work — buttons hover, checkboxes check, modals open, and artboard navigation triggers. This is where you verify your prototype behaves the way you designed it.

How to run preview​

Click the Preview button in the editor toolbar. Which artboard opens depends on your selection:

SelectionPreview opens
An artboardThat artboard
An element inside an artboardThe parent artboard
Nothing selectedThe artboard closest to your current view
No artboards on pageError — create an artboard first

Best workflow: split tab view​

For the fastest design-and-test cycle, open Preview and arrange it side by side with the editor in a split tab view. Changes you make in the editor are reflected in the preview, so you can design and test simultaneously without switching windows.

This is a browser-level workflow — drag the preview tab to one side of your screen and keep the editor on the other.

Resizing the preview​

Numeric inputs​

The preview header has W (width) and H (height) fields. Type a value or scrub the input to resize the viewport precisely. Range: 100 to 5000 pixels.

Drag handles​

The preview container has drag handles on all four sides. Drag any handle to resize the viewport interactively.

Flip orientation​

Click the Flip orientation button in the header to swap width and height — quickly switch between landscape and portrait views. If the flipped dimensions exceed the available browser space, the viewport scales down to fit.

Full screen​

Click the Full screen button in the header to fill the entire browser window. The header hides to give you the full viewport.

  • A toast notification confirms you're in full screen mode.
  • Your previous dimensions are saved — exiting full screen restores them.
  • Press Escape to exit full screen.

Settings menu​

Click the gear icon in the header to access:

  • Reset to original — Restore the preview to the artboard's actual designed dimensions.
  • Fit to screen — Expand the viewport to fill all available browser space.

Sharing​

Click the Share button in the preview header to share the preview link. Anyone with the link can view and interact with the prototype.

Troubleshooting​

Preview opened the wrong artboard​

Select the intended artboard in the editor and click Preview again. Preview uses your current selection to determine which artboard to show.

"No artboards on page" error​

Your page has no artboards. Create at least one artboard, then try again.

Interactions aren't working​

Check that:

  1. You're previewing the correct artboard (the one with the interactions).
  2. Events and actions are properly configured on the right elements.
  3. Component behaviors are set if you're using behavior-dependent events (Check, Toggle).

The preview looks cut off​

The viewport may be smaller than your artboard. Use the W/H inputs or drag the handles to enlarge it. Or use Fit to screen from the settings menu.