> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual Edits

> Make precise design edits directly on the interface.

Lumi’s Visual Edits allows you to select any element on your page to modify it directly. Instantly update properties like text and color, or use prompts to adjust functionality and layout. It's the ideal tool for making quick, targeted changes without writing any code or using AI.

<Note>
  **Note:** Using Visual Edits does not consume credits.
</Note>

<img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/VE.gif?s=c13d93006af083d7b1bad8f01ce4cebd" alt="VE Gi" width="1280" height="720" data-path="images/VE.gif" />

## When to Use Visual Edits

Visual Edits is ideal for when you want to:

* Change static text or media content on your site.
* Update typography, including fonts, sizes, and styles.
* Modify the colors of text, buttons, or other elements.
* Select a specific element and use a prompt to alter its visual appearance or functionality. Please note that these prompts consume credits just like a standard message.
* Apply AI-powered edits to existing images on your site through prompts. Please note that Edit with AI feature consumes chat credits just like a standard message.

  <img src="https://mintlify.s3.us-west-1.amazonaws.com/blockdance/%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91" alt="可视化编辑" />

## How to Use Visual Edits

<Steps>
  <Step title="Locate Visual Edits">
    You can find this tool either in the input box or in the top toolbar in Preview mode.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-184540.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=7d2c75ec60807782e3844a5afd94751d" alt="20250911 184540 Jpe" width="3840" height="1916" data-path="images/20250911-184540.jpeg" />
  </Step>

  <Step title="Activate the Tool">
    Click the button to enter Visual Edits mode.
  </Step>

  <Step title="Select an Element">
    Hover over the item you wish to modify—a headline, button, image, or background section—and click to select it.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-184025.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=9637a2ab63470ab62b99069f401b6b07" alt="20250911 184025 Jpe" width="1905" height="1186" data-path="images/20250911-184025.jpeg" />
  </Step>

  <Step title="Edit via Prompt or Direct Controls">
    Once an element is selected, either type a command like "Make this heading bold," or use the contextual editor to directly change text, fonts, and colors.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-183835.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=71158959d69d6ca9639c73ceb4bc5e0b" alt="20250911 183835 Jpe" width="1076" height="1344" data-path="images/20250911-183835.jpeg" />
  </Step>

  <Step title="Apply and Review">
    Click "Save" to confirm your changes. Lumi will instantly update the live preview and the corresponding code.
  </Step>
</Steps>