Preview your app

The preview runs your app on the host and shows it on the project page, so you can use it while your team builds it.

Use it on the page

The Preview tab is the first thing you see in a project. It is your real app, not a picture of it: click, type and scroll as you would anywhere else. Use the size buttons to check it at tablet and phone widths. In the desktop app it is one screen shared with your agents: what you do there they see, and what they do, you see, so you can take over or watch them work.

Open it in a browser when you need more

Open in browser launches the app in a real tab, with real devtools. With the browser extension installed, the Studio chat docks beside it, so you are talking to your agents while looking at the running app.

Steps

1. Open a project. A project that has run before starts on its own. Otherwise click Start preview.
2. If it does not start, the error shows in the tab, and the full output is under Code, then Logs. A failed dependency install is the usual cause.
3. Stop the preview when you are done. It holds a port and a process on the host.

You're done when the app shows in the Preview tab and reflects your latest change.

Gotchas

• A stopped host means no preview. Check the host before debugging the app.
• The first start is slow. Dependencies install once.
• In a web browser, the Preview tab works on the computer running the project. From another computer it tells you so. On that computer, the desktop app streams it from the host.