Create & connect
Edit and fix a Build project
Make direct text, image, or code edits, preview them, and save or discard a new Build version.
Before you start
Section titled “Before you start”Open a workspace with a Build project and show the Your app panel. Choose Preview to inspect the selected version or Code to work with its files. The panel follows the selected Build node; if you select a node without its own version, it may show the nearest earlier version in that branch. Confirm the version title before editing.
Direct text and image edits in the preview are unsaved changes. Editing code is also a draft until you choose Save version. Saving creates a new version on a child node; it does not change a published site automatically. You can use Discard to remove manual changes that you have not saved.
When to use this
Section titled “When to use this”Use Edit text and images for quick copy changes or to replace an image without asking a model. Use Code for precise HTML, CSS, or JavaScript changes, adding or deleting a project file, or when you know exactly what needs to change. Use Edit with AI to select an element and describe a change, and use Fix when the preview Console reports errors. Ask discusses the app without editing files; Build asks a model to implement a change.
- Select the version you want to edit and open Your app → Preview. Check the version title and preview before making changes.
- For direct visual edits, choose Edit text and images. Click supported text to edit it in place; press Enter to confirm. Click an image and enter its new HTTPS image address, then choose Replace image. Changes appear in the preview as an unsaved draft.
- For an AI change to one element, choose Edit with AI, select the element, describe the change, and choose Change with AI. This sends a Build request; review it in the conversation and wait for the resulting version. Save or discard any manual edits before requesting an AI change.
- To edit files directly, choose Code, select a file tab, and edit the source. Use the add-file control to create a supported file, or delete a non-entry file with Delete file. The preview reflects the draft as you work.
- Return to Preview and check the layout at Mobile, Tablet, and Desktop. Use Reload if you need to rerun the current preview.
- If the Console shows errors, open Console and inspect the messages. Choose Fix to prepare a model request containing the displayed errors, then review and send that request from the conversation. Fix uses AI and may spend credits.
- Choose Save version to preserve your manual changes as a new version. Choose Discard instead to drop unsaved edits and return to the selected saved version. Verify the new version in the conversation tree before continuing.
Worked example
Section titled “Worked example”Suppose your landing page works but the headline is too long and the mobile menu throws a console error. Use Edit text and images to shorten the headline, confirm the edit with Enter, and inspect the mobile preview. Then open Console, read the error, and choose Fix. The prepared AI request is separate from the manual draft, so save or discard the headline change first. After the repair is generated, test the preview again and save any direct code edits as a new version.
What happens next
Section titled “What happens next”A manual save becomes a new Build node and version, leaving earlier branches intact. Select that version to continue editing or to choose it for publishing. AI edits and Fix are model generations, so their results also appear as Build versions when changes are successfully applied. None of these actions publishes a site by itself; see Build: publish and export when you are ready to share it.
Cost and limitations
Section titled “Cost and limitations”Direct text and image changes in the preview and direct code editing do not call a model. Edit with AI and Fix do, so the model, context, and generated output can use credits; check the estimate before sending and the actual charge on the answer. Build file types, project size, number of files, and premium-model access depend on your current plan; the panel enforces those limits. The preview runs in a sandbox. External resources may be restricted by its content policy: HTTPS images are permitted, while scripts, styles, fonts, and connections depend on the allowed hosts shown by the app. Check the Console rather than assuming every external request will work. Build projects are browser-side HTML, CSS, and JavaScript, not a hosted server backend.
Troubleshooting
Section titled “Troubleshooting”- Text cannot be selected or saved in place: some text is generated dynamically or is not directly editable. Use Code or select the element with Edit with AI.
- An image replacement is rejected: use a valid image URL that starts with
https://. - A manual change disappeared: it was still an unsaved draft. Return to the same version and choose Save version before switching versions or leaving the edit.
- Save version reports a file or project limit: remove unneeded files or reduce file size, then review the limits shown for your plan.
- Fix did not resolve the Console error: inspect the latest Console output, describe the remaining behavior more specifically, and try a focused Build request. Confirm that the affected external resource is allowed in the preview.
