The visual editor: change words, order and look without a new build
Turn on Edit in the preview and the page becomes editable where it stands: click a headline and retype it, drag a section to a new place, or switch the design direction, theme, action colour and headline scale from a side panel. None of this calls the model. Each change is written into the project and the page is rebuilt and re-checked on the spot.
Small fixes shouldn't need a prompt
Most changes to a finished page are tiny: a phone number with a digit wrong, a heading that's a word too long, testimonials that belong above the prices. Asking a model for those is slow and can disturb things you were happy with. Anticode's AI website builder visual editor handles that class of change directly. Because it writes your edit into the same project data the design engine builds from, the Code tab, the report and the saved project always agree with what you see in the preview.
Editing text in place
With Edit on, every piece of text you can change gets a dashed outline when you point at it. Click it and type; the caret lands where you clicked. From the keyboard, Tab to the text and press Enter or F2 to start.
- Enter saves the text and Escape cancels, restoring what was there.
- Pasted text arrives as plain words, with formatting and line breaks stripped.
- Each text slot holds up to 400 characters.
- The side panel shows the selected piece (for example a section's heading or a card's text) in a field of its own, with Apply and Use original. Use original drops your wording and goes back to what the build wrote.
- While editing, links and buttons in the preview don't navigate and forms don't submit, so clicking a button's label edits it instead of following it.
Moving sections
Every section between the header and the footer gets a small handle in its top corner with a grip and up and down arrows. Drag the grip and a blue line shows where the section will land; Escape during a drag puts it back. You can also focus the grip and use the arrow keys, or use the Section order list at the bottom of the panel, which names each section with its own up and down buttons. The header and footer stay where they are, and dashboards keep a fixed layout, so their sections can't be reordered this way.
The design controls
| Control | Options | What changes |
|---|---|---|
| Direction | The seven design systems | Typeface, palette, spacing and shapes switch together, so nothing is left from the old system |
| Theme | Auto, Light, Dark | Auto uses the direction's own palette; Light and Dark use that system's light or dark palette |
| Action colour | Direction default, or red, orange, gold, green, teal, blue, pink, black | The one colour used for buttons and other actions |
| Hero headline | Calm, Bold, Boldest | The size of the main headline, at 1×, 1.14× or 1.28× of the direction's scale |
Switching direction or theme resets any individual colour tokens you'd tuned, because those belonged to the previous palette. If you want to see what a direction does before committing, the version history keeps the earlier state either way.
What happens after every edit
The page is rebuilt from the updated project and the design lint and security checks run again, so the status line tells you straight away whether the edit introduced a problem. A Visual edits card in the chat lists the latest changes in words, such as a text change with the new wording or a move from one direction to another. The scroll position is kept, so you stay where you were working. Edits are saved to the project like any other change and arrive in History as your own.
Where the visual editor stops
- Design-engine pages. It edits pages laid out by Anticode's design engine. Model-written apps are changed by asking in words instead; see change requests.
- Words, order and look, not structure. It doesn't add new sections, forms or pages. Ask for those in a sentence.
- Position and size live next door. Moving an element inside its section or resizing it is the layout editor, which shares the same panel.
- Plain text only. You can't add bold, links or line breaks inside a text slot. Pro mode's code editor syncs the same text, section order and colour tokens, not other markup.
Questions people ask
Does the visual editor use my build allowance?
No. Text edits, section moves and design switches are applied by the design engine in your browser, with no model call.
Can I edit the text on a phone-width preview?
Yes. Editing works whichever device width the preview is showing, and the section handles stay visible on touch screens.
How do I undo a text change?
Select the text and choose Use original to return to the generated wording, or restore an earlier version from History to undo a whole set of edits.
Can I edit every page of a multi-page site?
Yes. When you open another page of the site in the preview, its own sections get handles and its text becomes editable.