Skip to main content
Visual Edit lets you change your site by clicking on it: double-click a sentence to rewrite it, or pick a new size or color from a panel. Changes save on their own, and no AI is involved, so they are instant and use no credits. In this example we rewrite the sentence under the Northwind headline, try a bigger text size, and undo it.

​
Turn on Visual Edit

1

Click Visual Edit

In the toolbar above the preview, click Visual Edit.
The Visual Edit button outlined in the toolbar above the preview

The Visual Edit button

The builder with the Visual Edit button outlined in the toolbar above the preview

Where Visual Edit is in the builder

2

See the editing panel

The chat on the left is replaced by the editing panel. Until you pick something, it says Click an element in the preview to edit its styles, or open the Navigator. As you move the mouse over the page, each part of it is outlined and labeled.
The builder in Visual Edit: an empty editing panel on the left and the Northwind home page on the right

Visual Edit is on

The thin strip of icons on the far left switches the panel between the Style inspector, the Navigator (a list of everything on the page), Pages, Components, a Page audit, and Back to chat.

​
Change the words

1

Click the text you want to change

Click once on the text. It gets a blue outline and a label such as p · page.tsx · Double-click to edit, and the panel on the left shows its styles.
The sentence under the Northwind headline outlined in blue, with the label Double-click to edit and a small card with AI and Font tabs

The sentence under the headline, selected

The builder in Visual Edit with the sentence selected in the preview and the Style inspector open on the left

The whole builder with the sentence selected and its styles on the left

A small card also opens next to it. Its AI tab sends a request about this part of the page to the AI chat, for example “make this shorter”. That is a normal AI request, and Visual Edit closes so you can watch it work.
2

Double-click to edit it in place

Double-click the text. A hint appears under it: Enter to save · Esc to cancel.
The sentence in edit mode with the hint Enter to save, Esc to cancel

Editing the text in place

3

Type the new text

Select the old words and type the new ones. For Northwind we wrote: “We travel to the source, roast in small batches, and ship every bag fresh to your door.”
The sentence now reading We travel to the source, roast in small batches, and ship every bag fresh to your door.

The new sentence, typed in

4

Press Enter to save

Press Enter (or click anywhere else on the page). The toolbar shows Saving… for a moment. That is all: there is no Save button. Press Esc instead if you want to throw the edit away.
The toolbar showing Saving...

The change saving

​
Change a style

With something selected, the panel on the left shows its styles. The Text section has the font, Size, Weight, line and letter spacing, alignment and more. Further down are Colour & fill, Spacing, and sections for layout, borders, effects and motion.
1

Pick a new value

For Northwind we tried a bigger size for the sentence: under Size, we clicked xl (it was lg).
The Size buttons in the Text section, with lg selected and xl outlined

The Size buttons, with xl outlined

The page changes right away, and the change saves on its own a moment later.
The editing panel with xl selected and the sentence on the page now larger, wrapping onto three lines

The sentence at the bigger size

At the top of the panel, Styling has All, Phone only, Tablet and Desktop. Choose Phone only to change how something looks on phones without touching the desktop design. State lets you style Hover, Focus and Pressed separately, for example a button’s color when the mouse is over it.

​
Undo a visual change

The bigger size made the sentence wrap onto three lines with one word on the last line, so we took it back.
1

Click the undo arrow

While Visual Edit is on, undo and redo arrows appear in the toolbar. Click the undo arrow to take back the last change. Each click undoes one more, text edits included.
The undo arrow outlined in the Visual Edit toolbar

The undo arrow

The sentence back at its original size on two lines, still with the new wording

Back to the original size, with the new text kept

​
Turn off Visual Edit

Click the Visual Edit button again (it is purple while Visual Edit is on), click Back to chat at the bottom of the icon strip, or press Esc twice.
The purple Visual Edit button outlined, next to the undo and redo arrows

The Visual Edit button while it is on

Like changes from the chat, visual edits are saved to Your site but are not live until you publish.

​
When to use Visual Edit, and when to ask the AI

​
Next

4. Add a new page

Ask the AI for a new FAQ page and link it from the footer.