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

# Visual Edit

> Edit text, colors, layout, and fonts by clicking elements. Best for small tweaks; use chat for larger changes.

Visual edit lets you change your app's text and UI by clicking on elements and editing them directly. Edit colors, layout, fonts, and text directly.

Select the **Visual Edit** tab to use it

<div className="screenshot fire">
  <img src="https://mintcdn.com/zeus-0f6dadbf/SoIe7YZRhLr-wZus/images/apps/visual-edit-example.png?fit=max&auto=format&n=SoIe7YZRhLr-wZus&q=85&s=a7414d833feebc2954b5dffa1e80c8ad" alt="Visual edit mode with element selection and edit controls" width="1544" height="666" data-path="images/apps/visual-edit-example.png" />
</div>

### What can I edit?

* **Text:** Edit copy directly on the page
* **Colors:** Background, text, borders
* **Layout:** Spacing, padding, margins, alignment
* **Fonts:** Size, weight, family

<div className="screenshot ocean">
  <img src="https://mintcdn.com/zeus-0f6dadbf/SoIe7YZRhLr-wZus/images/apps/visual-edit-text.png?fit=max&auto=format&n=SoIe7YZRhLr-wZus&q=85&s=de147cf6c2c0be195d74b2ffdd5e4b7e" alt="Editing text directly on the page" width="1672" height="892" data-path="images/apps/visual-edit-text.png" />
</div>

<div className="screenshot mint">
  <img src="https://mintcdn.com/zeus-0f6dadbf/SoIe7YZRhLr-wZus/images/apps/visual-edit-layout.png?fit=max&auto=format&n=SoIe7YZRhLr-wZus&q=85&s=4bdaa567f504f5d1e4ca6d848b65be02" alt="Adjusting layout and spacing" width="1358" height="510" data-path="images/apps/visual-edit-layout.png" />
</div>

### When should I use the visual edit?

Visual edit is best for **small, fast tweaks:**

* Fixing a typo
* Adjusting spacing
* Changing a color
* Updating button text

For larger changes (new sections, layout restructures, new features), chat with Hercules instead.

### How do I save changes?

Visual edits are not saved automatically. You must click the "save changes" button at the bottom of the preview for changes to be saved.

<div className="screenshot aurora">
  <img src="https://mintcdn.com/zeus-0f6dadbf/SoIe7YZRhLr-wZus/images/apps/visual-edit-save.png?fit=max&auto=format&n=SoIe7YZRhLr-wZus&q=85&s=115effcf297a5f046e3e611e3b754780" alt="Saving visual edit changes" width="2158" height="294" data-path="images/apps/visual-edit-save.png" />
</div>

### What's the difference between Visual Edit and Capture Tools- Select Element?

| Tool                               | Purpose                                                        |
| ---------------------------------- | -------------------------------------------------------------- |
| **Visual Edit**                    | Directly edit the text and UI (make changes)                   |
| **Capture Tools - Select Element** | Give Hercules more context on what element you want it to edit |

### Additional FAQ

<AccordionGroup>
  <Accordion title="Can I undo visual edit changes?">
    Yes. Click the "revert" button if you haven't saved the changes yet. Alternatively use [version control](/apps/version-control) to revert to a previous state.
  </Accordion>

  <Accordion title="Why can I edit some text but not others?">
    Most basic text can be edited in visual edit. However, some text elements are more complicated
    (the text is dynamically generated or is part of a bigger component) and so can currently only be
    edited by Hercules AI.
  </Accordion>

  <Accordion title="Can I edit any element?">
    Most UI elements can be edited. Some system components or dynamically-generated content may have limited editability.
  </Accordion>
</AccordionGroup>