Loading...

The Customize Panel

Sections, Theme and Images beside the web-app preview — the changes you make by hand, for free.

Three tabs

Beside the running web app sits Customize, and it has three tabs:

• Sections — every block of the page in order. Hide one, show it again, or move it up and down.
• Theme — the colours, fonts and spacing the whole app uses.
• Images — every picture on the page, swap any of them for one of your own.

The lists are read from the page that is actually on screen, so the panel can never offer you a section that is not there.

The rule worth knowing

Anything you do by hand here is instant and free. Hiding a section, reordering the page, changing a colour, replacing a picture — each one is a real edit to your code the moment you press it, and none of them costs a credit.

The other route is the ✦ buttons: one on every section row, ✦ Generate on every picture, and the ✦ Ask AI to change anything… box at the foot of the panel. Each one writes a request into the chat, already scoped to that section or picture. The Theme tab has no ✦ buttons — for a theme change you want the AI to make, use the box at the foot. Nothing is sent until you press send in the chat — and that send is the only thing on this panel that spends credits.

Why the ✦ route is scoped

Asking the AI in open chat to "make the hero friendlier" can quietly change the price list on the way past. The ✦ buttons attach the exact section or element to the request, so the change is aimed at the part you pressed it on.

Right after you move a section, some of the panel's buttons wait a moment. Reordering shifts every line number underneath, so the panel holds still until the preview has rebuilt and told it where things are now. Hiding a section and swapping an image do not move anything, so they never pause.

Where to next

• Next in Code Studio (IDE): Giving an App a Backend
• Changing one thing only: The Visual Editor — The other way to edit by clicking — one element at a time.
• New to web apps: Web App Studio — The studio this panel sits beside.
• Wondering what this costs: How Credits Work — Why only the ✦ buttons spend anything.

9 of 37 in Code Studio (IDE) · Last checked 27 August 2026 · Previous: Build Errors & Preview Warnings