# Layout Preview

### Overview

Layout Preview allows users to preview both Draft (β) and Production (α) layout states on real devices before publishing changes. This enables teams to validate layout updates before making them available to end users. Available starting from **Zapp version 15**, the preview flow is accessible directly from the Layout Editor and is supported across all platforms.

:::note Important
**To use Layout Preview, the app must first be installed on the target device.**
:::

### Preview States

The preview modal includes a state selector that allows switching between:

**Draft (β)** — preview unpublished changes

**Production (α)** — preview the currently published version

### Draft and Publishing Workflow

With the introduction of **Draft** and **Production** layout states, the Layout Editor now includes separate actions for saving, publishing, previewing, and reverting changes.

**Save** — saves changes to the Draft state without publishing them

**Publish** — publishes the current Draft state to Production

**Preview** — opens the selected Draft or Production layout preview

**Revert** — resets the Draft state to match the current Production version

When unpublished changes exist, the editor displays a `Draft has unpublished changes` indicator and the **Publish** button becomes active.

If another user updates the same layout while the editor is open, a notification appears indicating that the layout has changed and the page should be refreshed to load the latest updates.

### Mobile Preview

For mobile layouts, the preview modal displays a QR code that can be scanned using a mobile device camera.

Scanning the QR code opens the selected layout state directly in the app.

The QR code updates automatically when switching between **Draft** and **Production** states.

![](./preview_mobile.png)

### TV Platforms Preview
For TV layouts, the preview modal provides instructions for opening the debug input on the TV device, along with a  pairing code and the required TV remote gesture: **`Up` → `Up` → `Left` → `Right` → `Left` → `Right`**.

Once the debug input is opened, enter the displayed pairing code to load the selected layout preview.
Switching between Draft and Production states generates a new pairing code automatically.

![](./tv_preview.png)

### Web Preview

For web layouts, the preview modal allows selecting a Vercel preview build, with the latest build selected by default.

After selecting a build, click **OPEN** to launch the preview in a new browser tab. The generated preview URL automatically includes the layout ID and the selected preview state (Draft or Production).

![](./preview_web.png)