Edit by clicking

You don't have to describe every small change in words. Above your preview there are three click-based tools: Edit mode for changing things yourself, Select for pointing the AI at one element, and pin notes for marking several spots at once. Most edits you make yourself are free and appear instantly.

These buttons become active once your preview has been built. Until then, the tooltip says Available once your preview is built.

Edit mode

1. 1

   Turn on Edit mode

   Click the pencil icon to the left of the address bar. The Edit mode panel opens beside the preview (or under it on a narrow screen).

2. 2

   Click the part you want to change

   Click a heading, button, paragraph, section or photo. A blue box marks it and the panel shows what you can change. Press Esc to clear your selection.

3. 3

   Make your changes

   Every change shows in the preview straight away. A counter at the top of the panel shows how many edits you've made.

4. 4

   Click Save

   Click Save at the bottom of the panel to write your edits into your app's code. To leave without saving, click Discard.

What you can change

When you pick a photo, the panel only shows the controls that make sense for a picture (replace it, describe it, round its corners, space around it).

Edit text directly in the preview

While Edit mode is on, double-click any text in the preview and type over it. Click away to finish. If that text can't be edited this way (for example, it contains an icon), a message tells you so and nothing is kept. Use Ask AI instead.

Replace a photo

1. 1

   Click the photo

   In Edit mode, click the photo. If you click a headline or overlay that sits on top of a photo, the panel offers Picture behind this so you can still swap the photo.

2. 2

   Choose your photo

   Click Replace image, or drop a photo onto the box. JPG, PNG or WebP, up to 10 MB.

3. 3

   Describe it and save

   Add an Image description for the new picture, then click Save.

Replacing a photo doesn't use the AI or credits. Your photo is resized for the web and its hidden location data is removed before it goes into your app.

Two kinds of picture can't be swapped here: background pictures set behind a section, and a picture that's one of a repeated set (like one product card in a grid). For those, describe the change in Ask AI.

Undo, discard and save

• Every edit is listed under Edits in the panel, each with its own Undo.
• CmdZ (Mac) or CtrlZ (Windows) removes your most recent unsaved edit, as long as you aren't typing in a box. There's no redo.
• Discard throws away all unsaved edits.
• Save writes your edits into your app's code and saves them as a new version. A line like this appears in the chat:

You edited: heading text (now "Fresh bread daily"), "Order now" button background color. Saved as a new version.

To undo edits after you've saved them, restore an earlier version from Version history. If an edit couldn't be saved, the chat line says so and suggests asking the AI instead.

Saved edits change your preview. Your live site updates the next time you publish.

Things to know

• Repeated items change together. If you pick one of several items made from the same code (like a card in a list), the panel warns you that changing it changes all of them. To change just one, use Ask AI.
• Some parts can't be edited directly, such as an icon's inner shapes, charts, text that contains other elements, or very long text. The panel says so and points you to Ask AI.
• Saving waits for builds. While the AI is building, the panel shows AI is building — saving locked until it finishes. You can keep making edits and save when the build is done.

Ask AI from the panel

For changes the controls can't make ("add a subtle shadow", "make this section feel more premium"), use the Ask AI box at the bottom of the Edit mode panel. Type what you want, then click Ask AI to do this or press CmdEnter (CtrlEnter on Windows).

The AI works on just the element you picked and won't rebuild other parts of the page. Its progress shows in the chat. This uses credits, like any AI request, but it's a small, focused job. It isn't available while another build is running.

Add a soft shadow and a little more space above this card

Select an element for chat

Use Select when you want to talk to the AI about one exact spot.

1. 1

   Click the arrow

   Click the arrow icon to the right of the address bar.

2. 2

   Click the part you mean

   The preview highlights what's under your mouse. Click to pick it, or press Esc to cancel.

3. 3

   Say what you want

   A chip showing the element appears above the chat box. Type your request and send it. The AI knows which element you mean.

Make this bigger and change the wording to "Book your free class"

The chip has three more options:

• Keep as is tells the AI to leave this part alone in future builds. It adds a line to your project's Knowledge, so it's shown to the project's owner and Admins. See Project knowledge.
• Edit opens a quick-edit box with Text, Style and Ask AI tabs. Each sends a small AI edit for that element only, so it uses credits.
• × removes the chip without clearing what you've typed.

Pin notes on several spots

When you have feedback on several parts of the page, click the pin icon next to the arrow. Each click on the preview drops a numbered pin and asks What should change here? Type a note and click Done. Pin mode stays on so you can keep pinning.

Your notes wait above the chat box ("3 notes on the preview · sent together"). You can click a note to change it, remove one pin, or use Clear all. When you send your message, all the notes go to the AI in one request. You can add up to 10 pins, with up to 500 characters each. Press Esc to close a note, and again to leave pin mode.

What uses credits

Related

• Version history
• Project knowledge
• Images in your app
• Chat with Buildliy