Watch your app run as you build it

A tight feedback loop

The gap between writing code and seeing it work is where momentum is lost. A live preview closes that gap: you ask for a change, the agent makes it, and the running app updates so you can judge it straight away. You are not reading a diff and imagining the result — you are looking at the actual screen, clicking the actual button, and deciding whether it feels right before you ask for anything else.

How it works, step by step

Every project runs inside its own sandboxed container, not as static files, so the preview reflects a real running app rather than a screenshot. When you describe a change, the agent edits the code and the container picks up whatever changed. The preview pane then points at that running container, so what you see is the same process that would run if you published the project. Because each project has its own isolated container, one preview can never leak into or interfere with another.

A worked example: watching a form take shape

Say you ask for a contact form with a name field, an email field, and a submit button that shows a thank-you message. The agent creates the component, wires up the state, and the preview refreshes to show an empty form. You type a test name, click submit, and see whether the thank-you message actually appears — if the email field lets you submit blank, that is visible immediately, and you can ask for validation right then. Each follow-up request, like adding a required-field check or changing the button color, shows up in the same pane within moments, so you are debugging a real interaction rather than reading code and guessing.

Limitations and what to expect

The preview runs inside a resource-limited sandbox, so it is meant for building and testing, not for handling production-scale traffic. A very large or long-running process can hit those limits. The preview reflects your project while you work on it; to make an app reachable by anyone else, you publish it, which gives it its own address with HTTPS. And a live preview only shows you what the app does when you interact with it — it does not replace reading the code or testing edge cases the agent might not have tried.

Tips for getting the most out of it

Use the preview to test the paths a real user would take, not just the happy path — try submitting a form empty, clicking a button twice, or resizing the window. When something looks wrong, describe exactly what you see in the preview rather than describing what you expect the code to do, so the agent can compare your description to the actual running state. And check the preview after every meaningful change rather than after several changes at once, so it is always clear which change caused which result.

Share what you build

When a project is ready, you can publish it so it becomes reachable by a link with its own HTTPS address. That makes it easy to show a client, a teammate, or a friend without any deployment work on your side.

Good for learning, too

Seeing code and its result side by side is one of the best ways to understand how software actually behaves. Change something, watch what happens, and build an intuition that tutorials alone rarely give you.

Frequently asked questions

Explore more