Skip to main content
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 running app in a Preview on the Wonder canvas, with the Local tag above it, a title bar with back, forward, reload and Stop, and the Navigate, Inspect and Capture bar at the bottom of the canvas 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. 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. The Screen template list in the properties panel, listing iPhone, iPad, MacBook, Desktop and TV sizes with their dimensions 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.
The More actions menu below a Preview, with Send all input to app and Open in browser

​
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. A card over the Preview saying localhost:5613 wants to use your camera, with Don't allow and Allow buttons 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 right-click menu of a Preview, with Clear preview data and Clear preview data (including logins) 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.
  • Sign-in flows that leave the page work differently in a Preview. See Preview sign-in.
  • You can’t start a Preview: you need edit access to the workspace, and the Wonder desktop app.