Loading...

The Visual Editor

Click things in the Web App preview and change them by hand — five safe fields, written straight into your code.

Getting into it — Customize on a computer, Edit on a phone

The way in changed on 25 August 2026, and it is different on the two screens:

• On a computer the toolbar button is Customize. Press it and the inspector opens as a sidebar down the left of the preview, where there is room for it.
• On a phone the plain Edit toggle is still there, and the inspector is a small card over the top-right corner — a 300px sidebar is the phone, so it would leave nothing to look at.

Either way the preview stops being a plain window: click anything in your app and the inspector names the element and the file it lives in. If you are following an older guide that says "the Edit toggle" on a desktop, Customize is the button it means.

The five fields

The inspector deliberately offers only the changes that are safe to write by hand:

• Text — the words themselves. Offered only when the element's text is plain text in the code; text built from data is left to the AI
• Size & weight — font size in px, and Normal / Medium / Semibold / Bold
• Align — left, center or right. (On an element only as wide as its own text, the inspector tells you aligning will not move anything — ask the AI to centre it in its container instead)
• Colour — a swatch and a hex field
• Spacing below — the gap under the element, in px

Everything else stays the AI's job — and the inspector's last button, Ask AI about this element, hands it over already knowing which element you mean. The five fields and every refusal message below are the same whichever way you got in.

It edits your code, not a copy

Every change is written into the real project file the moment you commit it (leave the field, or press Enter): it is logged in the chat as a manual edit and the preview rebuilds — a strip reads Applying your change… while that happens. A crumb along the bottom of the preview shows the before → after and Saved to the file it touched.

Undo in the toolbar takes the last change back — in the code, not just on screen.

Two Undo buttons, and the Desktop / Phone toggle

There are two Undos, and each takes back only its own edits:

• Undo in the preview toolbar appears while click-to-select is on and there is something to take back. Its tooltip says what it does: Undo the last visual change — in the code, not just on screen.
• Undo in the Customize sidebar's header appears once that panel has changed something, and takes back the panel's own last change — up to twenty steps.

Neither reaches the AI's edits; for those, Version History.

Beside the preview's Undo, on a computer, is a Desktop / Phone toggle. It squeezes the preview to phone width so you see what a visitor's phone sees, and clicking and editing keep working at that width.

When it refuses

Not every element can be rewritten safely. When the styling is built in code the editor will not rewrite by itself, the fields go read-only and a note says so — the way forward is Ask AI about this element.

The editor is also honest after the fact: a toast tells you when a change was already how the code reads, and when one was "Saved to the code, but the page did not change" because the app's own stylesheet overrules it — again with the AI as the fix.

Where to next

• Next in Code Studio (IDE): The README Editor
• No preview open yet: Web App Studio — The preview this editor lives in.
• When the look is right: Publishing a Web App — Putting the polished result on the internet.
• Want the old look back: Version History — Rolling back if an edit went wrong.

13 of 37 in Code Studio (IDE) · Last checked 3 September 2026 · Previous: Site & SEO