# The editor What each part of the build screen does, from the chat and its modes to the tabs on the right. ## Layout Chat on the left, your app on the right. On a phone the bottom bar switches between **Chat** and **Preview**. The header has **Projects** (back), the project name and status, the connection chips, **Add sign-in** (only on an older project without accounts), **Share**, and **Deploy** (or, for an extension, **Download extension** and **How to install**). ## Chat and turns Three modes sit above the conversation: - **Build**: "Changes the app. Every turn is a version." - **Chat**: "Questions and advice. Reads the code, never changes it." Answers can include a prompt you send to Build with one click. - **Design**: "The look. Instant, free, every change is a version." Opens the design panel (below). Type in the box and press Enter to send; Shift+Enter for a new line; start a line with `-` for bullets. The box takes 1,000 characters. Under it, "≈ *N* tokens · *reason*" updates as you type, so you know the price before you send. **Quality** (Build only): **Fast** builds straight away with no plan step and is cheapest; **Careful** (the default) plans first, then builds; **Best** plans, builds, then reviews its own changes and fixes what it finds. **Max Quality** tries the request several ways at once and keeps the best; it costs roughly three to four times a normal turn, so a dialog shows the estimate and asks before it runs. ## Phases Each turn shows a card with its steps: Prompt received, reading the brief, planning, building the screens, laying them out, saving data, polishing, writing up, testing. Steps tick as the builder does them, with the files written under each. When the turn finishes the card folds to one line, for example "1:42 · 6 files · 12.3k chars · ~140 tokens". The gear on the card sets the style (**Conversational**, **Terminal**, **Minimal**) and what stays visible. Under each reply: the tokens it cost, how many files changed, **Undo this turn** (files go back to before that turn), and thumbs up or down. After a build turn the preview reloads and is checked. The status on the right pane reads "visual check", then "visual check passed", "visual check found issues, fixing" or "preview error, fixing". Up to two fix turns run on their own; after that it leaves it to you. **Next** suggestions then appear above the box as one-tap follow-ups. ## Preview The **Preview** tab runs the app in a sandbox. Buttons on the tab bar: - **Select**: click an element in the preview, then say what should change about it. The builder gets the exact element and file line. - **Edit text**: click any words in the preview, type, press Enter. If those words appear once in the source they are changed there directly, no tokens spent, and a version is saved. Otherwise a toast says "Asking the builder." and a build turn makes the change. - Phone width, **Download the code** (a zip), and reload. An extension previews as a 380px popup hanging off a toolbar. ## Map **Map** draws the app's structure from its files, with no model call: pages by area, the menu, whether people sign in, whether a landing page is in front. Click a page to open it in the preview (signed-in pages open as a preview account). Click the file name to open it in **Code**. ## Code and History **Code** lists every file; each has its own history and can be put back on its own. `NOTES.md` is the builder's notes about the app, and you can edit it. **History** has one entry per build turn, newest marked **Current**. **Restore** brings a version back into the editor. **Put live** makes it the live app; **Take offline** removes the live app while keeping versions, data and users. The live version carries a **Live** badge. ## Design Switch the chat to **Design**. The panel is instant and costs no tokens: preset themes and **Shuffle**; six landing page layouts (**Centered**, **Split**, **Showcase**, **Story**, **Minimal**, **Feature led**) when the app has a landing page; colours, heading and body fonts, corners (0 to 32px), spacing, type size, shadow, and light, dark or auto mode. Describing a look in the box ("warmer", "bigger corners and a mint accent") is an AI edit. **Make the app follow it (AI edit)** rewrites hardcoded styles to use the tokens. ## The other tabs - **Data**: what the live app has stored, and the preview's own data. See [App users and data](/guide/app-users-and-data). - **Users**: who has an account, who may sign up, invites, blocking, admins. - **Errors**: crashes from the preview and the published app, each with a **Fix** button. The count shows on the tab. - **Sales**: every payment the app took. See [Products and sales](/payments/products-and-sales). - **Settings**: project name; tab title, meta description, favicon and search indexing for the published app; payments processor and products; custom domains; **Delete project**. **Save** sits at the bottom.