Previewing and reading the code

The Preview tab

Preview is the default tab on the canvas, and it shows the live app running, not a screenshot of it. Because the builder writes real React and Next.js source, the buttons click, the forms submit, and the interactions behave exactly as they will for a visitor. What you see is what you get.

Device widths

Above the preview you can switch between mobile, tablet, and desktop presets. Use all three before you ship anything. A hero that looks right on desktop often needs the builder to fix spacing or stacking on a phone, and catching that here costs you one more chat message instead of a redeploy.

The Code tab and file tree

The Code tab shows the source for whichever file you select in the middle pane, and the file tree is the real project structure: components, styles, config, all of it. You do not have to read a line of code to use App Builder. It is there for the moments you want to confirm what the builder actually did, or hand the project to a developer to take further.

Locked files

Some files can be locked so later build turns cannot overwrite them. Locking a file is like taping plastic over the one wall you already painted while the crew works on the rest of the room. Once a section is exactly how you want it, lock it, and the builder leaves it alone while it works on everything else. This earns its keep as a project grows and you start iterating on one area at a time.