# Preview options
> Choose the width and scaling Preview plays at, turn hints and shortcuts on or off, and hide the interface.
Source: https://uxdeck.app/guide/preview-options (checked against uxdeck on 16 October 2026)
Preview plays your prototype the way people will meet it. Its top bar lets you pick a screen and a width, choose how the design is scaled to your window, replay motion, and tidy the interface away when you show it to someone. These are your own settings for watching: they never change the file.
## The bar
From left to right:
- **Flows:** the page's [flows](/guide/flows), to start another one. Shown when the page has flows.
- **Frame:** jump to any screen on the page.
- **Widths:** **Phone** (390), **Tablet** (768) and **Desktop** (1280), plus the frame's own width when it is none of these. When the screen has linked [breakpoints](/guide/breakpoints), you see their names instead, and each one plays its own frame.
- **Replay** and **Reduce motion:** shown when the screen has motion. Replay plays it from the top; Reduce motion shows the page as people who ask for less motion see it.
- **Scaling** and **Options** (the two icon buttons), then full screen.
- **Done** (Esc) leaves Preview.
At the bottom, a bar steps to the previous and next frame, shows where you are (such as "3 / 8") and has **Restart**.
## Scaling
The **Scaling** menu sets how the design fits your window. Z steps through the options.
| Option | What it does |
|---|---|
| **Scale to fit** (default) | Shrinks the whole screen, mockup included, to fit the window. Never enlarges it past its real size. |
| **Actual size (100%)** | Shows it at its real size; the window scrolls if it is bigger. |
| **Responsive** | Takes the window's width and switches between this page's breakpoints as you resize. Shown without a device around it. |
| **Fit width** | Fills the window's width, larger or smaller. |
| **Fill screen** | Covers the whole window; some of the design may be cut off. |
Picking a width in the bar leaves Responsive for Scale to fit at that width.
## Options
The **Options** menu holds:
- **Enable shortcuts** (on): the keys below work. Turn it off when your prototype listens for those keys itself, so only the prototype answers.
- **Show hints on click** (on): a click that lands on nothing clickable briefly outlines what can be clicked.
- **Show device frame** (on): the phone or browser drawn around the screen. Offered when the page has a [mockup](/guide/present).
- **Hide UI:** removes the bar, the footer and the flows. Move the pointer and a **Show UI** button appears to bring them back.
The menu also lists the keys, as a reminder.
## Keys
| Action | Keys |
|---|---|
| Next frame | →, Space or N |
| Previous frame | ← |
| Restart | R |
| Change scaling | Z |
| Full screen | F |
| Refresh from the file | ⇧R |
| Leave Preview | Esc |
A key that your prototype uses for a **Key/Gamepad** interaction belongs to the prototype on that screen, not to Preview.
## Who is watching
The bar shows who else has the file open, so you know who can see what you are presenting, and lets you invite someone.
## Catches
- **Preview's widths are not the breakpoint sizes.** Phone, Tablet and Desktop here are 390, 768 and 1280; a breakpoint you made at another width plays at its own width.
- **Fonts this device lacks** are mentioned in the bar, so a stand-in font is not mistaken for your design.
- **Restart forgets everything** the prototype remembered: variables set, modes switched and variants changed.
- **Enable shortcuts**, **Show hints on click** and **Show device frame** are kept in this browser for you alone; another viewer has their own. **Hide UI** is for this showing only.
Preview and all its options are on every plan.