Previews

Every project shows its app running in the preview, next to the agent. The preview is your framework’s dev server running in the project’s sandbox, so changes appear as soon as files are saved, with hot reload where the framework supports it.

Preview and Code

Use the Preview / Code toggle in the toolbar to switch between the running app and the code editor. The preview keeps running while you’re in the code.

Point an agent at an element

Click Select an element in the preview toolbar, then click anything in the page. Frontend pastes the element’s location in your source — its file, line and column — into the active agent’s prompt, so you can say what to change about it:

Make this button full width on mobile and use the primary color.

Element selection works on the browser runtime.

Logs and errors

The bottom panel shows the Server log (the dev server’s output) and the Console (the browser console of the preview). When something breaks, ask the agent to look at the error, or paste it into the prompt.

Previews on phones

On a phone, projects on the browser runtime can’t show the preview. Switch the project to the server runtime to preview it on mobile.

Share a preview

To show your work without publishing it, click Share. Frontend builds a preview deployment of your saved changes and gives you a link anyone can open. Share previews work on every plan, don’t count as published projects, and don’t collect analytics. To put the app on its production URL, publish it.