> ## Documentation Index
> Fetch the complete documentation index at: https://wonder.design/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Preview your running app
> Run your real app live on the Wonder canvas, click through it, try it at other screen sizes, and open it in a tab or your browser.
The Preview is your real app, running live on the canvas next to your designs and your chat. Wonder starts your app's dev server in the chat's worktree and shows the page it serves, so every change your agent makes appears as soon as your app reloads.
**Before you start** · Desktop app · Free plan
A Preview is local: it runs on your computer, and only you can see it, in the desktop app. To show your app to someone else, publish it.
## Start and stop the Preview
1. Open a chat in a worktree of your repository.
2. Click **Start preview** in the chat header, or press ⌘ ⇧ P.
Wonder starts your app and opens the Preview on the canvas. The first time, it needs to know how to start your app: see [Set up the Preview](https://wonder.design/docs/set-up-the-preview.md).
The Preview opens in the worktree's canvas file. If the worktree has no canvas file yet, or several, the chat asks **Where should the Preview go?** Click **Pick file** and choose one of your files, and the Preview starts there. Or click **Create file** to let your agent create one; it appears when **Let agents create files, folders and pages** is on in Settings.
To stop it, click **Stop** in the Preview's title bar or **Stop preview** in the chat header, or press ⌘ ⇧ P again. A stopped Preview stays on the canvas. Double-click it, or click **Start preview** on it, to start it again on the same page.
Each worktree has one Preview, and up to three Previews can run at once. Starting a fourth stops the one that has run longest.
## Click through your app
Clicking a Preview selects it, like any other layer. To use the app inside it:
1. Double-click inside the Preview, or select it and click **Navigate** in the bar at the bottom of the canvas. The Preview gets a blue outline.
2. Click, scroll, type and open pages as you would in a browser.
3. Press Esc, or click the canvas outside the Preview, to go back to selecting.
Use the title bar to go **Back**, **Forward** and **Reload**. Shift-click **Reload** to ignore the cache. Click the path, such as `/`, to type another page of your app.
Space, zoom shortcuts and pinch still move the canvas while you use the app. To send them to your app instead, select the Preview, open **More actions** (**⋯**) in the bar at the bottom of the canvas and choose **Send all input to app**.
## Change the screen size
Select the Preview, then pick a device under **Screen template** in the properties panel. Each one shows its width and height, from iPhone 17 (402 × 874) to TV (3840 × 2160). Click the rotate button next to it to switch between portrait and landscape.
You can also drag the Preview's edges, or type a **W** and **H**. A size that matches no device shows as **Custom**.
## Open it in a tab or your browser
* **Open in a tab**: press ⌘ ⌥ P, or click the tab button in the Preview's title bar. The app fills a Wonder tab, ready to use. Click **Show on canvas** to go back.
* **Open in browser**: select the running Preview, open **More actions** (**⋯**) in the bar at the bottom of the canvas and choose **Open in browser**. You'll also find it in the menu next to **Start preview** in the chat header, and in the worktree's menu in the sidebar.
## Let your agent use the Preview
A chat in a worktree can use that worktree's Preview without any setup. If the chat has worked in a fork, start the Preview yourself first, since starting it runs the fork's own scripts. Ask in plain words, for example "start the Preview and check the sign-up form". Your agent can:
* start the Preview and read the page it shows, including its console;
* click, type and scroll in the app to test a flow;
* capture the page onto the canvas as an editable design.
The chat shows what it is doing, such as **Clicking in the Preview** or **Reading the Preview console**. Your agent only ever uses its own worktree's Preview.
## Allow the camera, microphone and other permissions
When your app asks for the camera, microphone, location, your screen, or to read what you've copied, a card appears over the Preview naming the app and what it wants. Click **Allow** or **Don't allow**.
Wonder remembers your answer for that app. It asks every time an app wants to see your screen. The first time an app uses the camera, microphone or location, macOS may also ask whether Wonder can use them.
## Clear preview data
Clearing preview data resets the app in the Preview and makes Wonder ask for permissions again.
1. Right-click the Preview on the canvas. It has to be running.
2. Choose one:
* **Clear preview data** removes the app's local storage, Cache Storage and service workers, and forgets your permission answers. Cookies stay, so you usually stay signed in, unless your app keeps its sign-in in local storage.
* **Clear preview data (including logins)** also removes cookies and IndexedDB, which signs you out of your app.
The Preview reloads with a clean slate.
## If something goes wrong
* When the Preview can't start or show your app, it shows a card that says why, and most cards have **Fix with agent**. See [Fix Preview problems](https://wonder.design/docs/fix-preview-problems.md).
* Sign-in flows that leave the page work differently in a Preview. See [Preview sign-in](https://wonder.design/docs/preview-sign-in.md).
* You can't start a Preview: you need edit access to the workspace, and the Wonder desktop app.
## Related
* [Set up the Preview](https://wonder.design/docs/set-up-the-preview.md)
* [Fix Preview problems](https://wonder.design/docs/fix-preview-problems.md)
* [Preview sign-in](https://wonder.design/docs/preview-sign-in.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.