On this page

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:

| Selection                      | Preview opens                      |
| ------------------------------- | ---------------------------------- |
| An artboard                    | That artboard                      |
| An element inside an artboard   | The parent artboard                |
| Nothing selected               | The artboard closest to your current view |
| No artboards on page          | Error — 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.