> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Steps>
  <Step title="Open the live preview">
    Either in the embedded panel or a separate tab.
  </Step>

  <Step title="Click 'Visual edit' in the preview toolbar">
    The preview enters edit mode — elements highlight on hover.
  </Step>

  <Step title="Click the element you want to change">
    A dialog opens with edit options for that element type.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## What you can do

<CardGroup cols={2}>
  <Card title="Edit text inline" icon="text-cursor-input">
    Click any text element, type the new text. Saves immediately.
  </Card>

  <Card title="Change colors / spacing / fonts" icon="palette">
    Visual style picker — pick from the brand palette or enter a custom color.
  </Card>

  <Card title="Reorder children" icon="move-vertical">
    Drag list items, cards, or layout sections to rearrange.
  </Card>

  <Card title="Replace components" icon="boxes">
    "Use a card layout instead of a list." Right-click → swap component.
  </Card>

  <Card title="Delete elements" icon="trash">
    Right-click → Delete. The agent removes both UI and any orphaned code.
  </Card>

  <Card title="Scoped prompts" icon="message-square-code">
    "Make this button rounded and add a left icon." The prompt applies only to the clicked element.
  </Card>
</CardGroup>

## When to use it vs. other modes

<Tabs>
  <Tab title="✅ Visual edits">
    * "Make this specific button violet."
    * Reordering items.
    * Inline text changes (typos, copy edits).
    * Tweaking spacing or color on one element.
  </Tab>

  <Tab title="❌ Use Agent mode">
    * Anything that touches multiple elements.
    * Schema changes.
    * Adding new features.
    * Anything that has knock-on effects ("change all buttons").
  </Tab>
</Tabs>

## Tips

<Tip>
  **Visual edits are still revisions.** Each edit creates a [version history](/building/version-history) entry. Roll back the same way you would for any prompt.
</Tip>

<Tip>
  **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.
</Tip>

## Related

<CardGroup cols={3}>
  <Card title="Code mode" icon="code" href="/building/code-mode">
    Hand-edit when you'd rather type than click.
  </Card>

  <Card title="Agent mode" icon="bot" href="/building/agent-mode">
    For changes that span multiple elements.
  </Card>

  <Card title="Version history" icon="history" href="/building/version-history">
    Every visual edit is recoverable.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.