Visual edits

Click directly on UI elements to edit them. Skip the round-trip when you can point at the thing you want to change.

Visual edit mode is the fastest way to change something you can see. Hover any element in the live preview, click, and the agent edits the corresponding code.

How it works

1. Open the live preview

   Either in the embedded panel or a separate tab.

2. Click 'Visual edit' in the preview toolbar

   The preview enters edit mode — elements highlight on hover.

3. Click the element you want to change

   A dialog opens with edit options for that element type.

4. Pick an edit or type a prompt

   Common edits (change color, change text, change spacing) are one-click. For anything else, type a prompt scoped to that element.

What you can do

Edit text inline

Click any text element, type the new text. Saves immediately.

Change colors / spacing / fonts

Visual style picker — pick from the brand palette or enter a custom color.

Reorder children

Drag list items, cards, or layout sections to rearrange.

Replace components

“Use a card layout instead of a list.” Right-click → swap component.

Delete elements

Right-click → Delete. The agent removes both UI and any orphaned code.

Scoped prompts

“Make this button rounded and add a left icon.” The prompt applies only to the clicked element.

When to use it vs. other modes

✅ Visual edits

• “Make this specific button violet.”
• Reordering items.
• Inline text changes (typos, copy edits).
• Tweaking spacing or color on one element.

❌ Use Agent mode

• Anything that touches multiple elements.
• Schema changes.
• Adding new features.
• Anything that has knock-on effects (“change all buttons”).

Tips

Visual edits are still revisions. Each edit creates a version history entry. Roll back the same way you would for any prompt.

Use scoped prompts for one-off styling experiments. Visual edits + a prompt like “round the corners more aggressively and add a soft shadow” iterates fast on style decisions.

Related

Code mode

Hand-edit when you’d rather type than click.

Agent mode

For changes that span multiple elements.

Version history

Every visual edit is recoverable.