Academy
4. Iterating with the Live Preview
Master the conversational iteration loop — request one change at a time, watch the live preview refresh, and converge on the exact result you need.
The live preview is your project running inside an isolated cloud sandbox, rendered right next to the conversation thread. Every time the AI accepts and applies a change you request, the preview refreshes automatically so you see the exact current state of your application — no manual reloads, no deploy steps. This tight feedback loop is the core of the Code Builder iteration model: describe a change → AI edits the code → sandbox re-executes → preview updates. Because execution is fully sandboxed, it is isolated from your machine and from other users, so you can iterate fearlessly on any kind of change without risk to your local environment.
The golden rule of iteration is: change one thing at a time. Asking for a single, well-scoped modification — "make the header sticky", "add a search filter to the user list", "switch the color palette to dark mode" — gives the AI a clear target and produces a predictable diff you can verify in the preview. Stacking multiple unrelated changes in one message increases the chance of regressions and makes it harder to pinpoint which edit caused an issue. Think of each message as a micro-commit: atomic, reviewable, and easy to roll back by simply asking the AI to revert.
Frame each iteration request as a specific, observable outcome: "the sidebar should collapse below 768 px" rather than "make it responsive". The more concrete the instruction, the fewer round-trips you need — and each round-trip costs AI credits plus sandbox execution time, both visible as you go.
Before you start iterating, make sure you have selected the right execution profile for your project type. Execution profiles define the runtime and capabilities of the sandbox — choosing the wrong one can cause confusing preview behavior that looks like an AI error but is actually an environment mismatch. You can manage profiles from the builder settings. Switching profiles mid-project is possible, but doing it early avoids wasted iterations.
If the preview shows unexpected behavior after a change, check the generated files in the workspace before requesting another iteration. Often a quick code review reveals whether the issue is in the logic or in the execution profile. The files are yours — review and download them at any time.
Open Code Builder, start a project (or continue an existing one), and practice the one-change-at-a-time loop: request a single UI modification, watch the live preview refresh, verify the result, then request the next change. Aim for at least five sequential micro-iterations to build muscle memory around the conversational workflow.
The iteration loop in Code Builder is: request one atomic change → AI edits the code → sandbox re-executes → live preview refreshes. Keep each request specific and single-purpose to minimize regressions and credit spend. Verify results in the preview and, when needed, inspect the generated files directly. Make sure your execution profile matches your project type before you start iterating. Costs (AI credits + sandbox time) are visible as you go, so you always know what each iteration costs.