Visual Edit & live preview

When a web app build finishes, you do not have to start a whole new build to change how it looks. Visual Edit lets you click parts of the page and adjust them right there. Small style changes apply straight away, and larger changes are made just where you point, so you can shape the result without waiting for a full rebuild each time.

You open Visual Edit from a finished web app, on the build’s Edit tab. If a build was not made this way, the tab tells you so and points you to Revise instead.

Theme edits: click and change the look

Tap an element and a small panel opens with the controls that fit it. From there you can change colours, fonts, spacing, the logo, and header text. These changes apply instantly, with no build and no cost. Pick a colour from the swatches or the colour wheel, upload a new logo, or tap a heading and type new words, and the page updates as you go.

Because theme changes are global, a colour you set while looking at the phone view also applies on desktop and tablet. You can flip between desktop, phone, and tablet previews to check the result at each size, and you get a heads up if the page scrolls sideways on a phone so you can fix it.

Targeted edits: describe one change

For something the quick controls do not cover, tap the element you want and describe the change in plain words. LoopCodeLab makes just that one change, scoped to the element you picked, and shows you the result. You then choose to keep it or discard it.

Targeted edits take a little longer than theme edits and use build credits, and the panel says so clearly. Your project stays untouched until you keep the change, so trying one out is safe.

Keep or discard

Every targeted edit ends with a choice. Keep saves the change into your project, so it becomes part of the build and the live preview updates to match. Discard throws the change away and leaves the project exactly as it was. Nothing is committed to your project until you keep it.

Revise: larger changes

Visual Edit is for styling and small, pointed tweaks. When you want a bigger functional change, use Revise and describe the behaviour you want in plain words. LoopCodeLab plans small follow-up stories for the change instead of rebuilding the whole project. See Web apps for how Revise fits into a web app build.

Live preview with Go live

While you edit, you can run the app live so you see each change render in the real, running app as you make it. Turn this on with the Go live button in the edit panel. The preview switches to the live app, and your targeted edits show up in place as soon as you make them, before you decide to keep them.

Go live uses an optional live-edit sandbox powered by Daytona, so it needs a Daytona key connected in Settings. Without that key, editing still works using the standard on-box preview, so you lose nothing except the live render. See Media & research keys for how to connect the live-edit sandbox key. The sandbox only runs while you are actively editing and shuts itself down when you finish, so it stays cheap.