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

# Visual editing

> Click any element on your site and change its text and style directly, with changes that save as you go.

Edit mode lets you change your site by clicking on it — no code, no menus to hunt through. It's the fastest way to make small visual tweaks.

## Turn on edit mode

Click the **Edit mode** toggle (the mouse-pointer icon) in the chat input area at the bottom, next to the attach button and model selector — or press **Alt+E** (⌥+E on Mac). Your preview needs to be visible and fully loaded first.

<Note>
  Edit mode isn't available on mobile — use a desktop browser to edit visually.
</Note>

## Select and change an element

Click any element in the preview — text, a button, an image, a container. It highlights, and a side editor panel opens on the right.

* **Text** — edit the words directly in the panel's fields.
* **Style** — adjust the element using grouped controls: **Typography** (font, size, weight, line height, spacing, alignment, and bold/italic/underline), **Color**, **Background Color**, **Margin**, **Padding**, **Border**, **Border Radius**, and **Opacity**.

Changes save automatically, and the preview updates as you adjust each value. To finish, click the **Edit mode** toggle again or close the side panel.

## Edit mode or chat?

<Columns cols={2}>
  <Card title="Use edit mode" icon="pen">
    For quick visual tweaks — a color, some spacing, updating text, trying a different font.
  </Card>

  <Card title="Use chat" icon="comments">
    For bigger changes — adding sections, restructuring a layout, or building new functionality.
  </Card>
</Columns>

## What's next

<Columns cols={3}>
  <Card title="AI chat" icon="comments" href="/docs/studio/ai-chat">
    Describe larger changes in plain language.
  </Card>

  <Card title="Media library" icon="images" href="/docs/studio/media-library">
    Swap in images and generate new ones.
  </Card>

  <Card title="Version history" icon="clock-rotate-left" href="/docs/studio/version-history">
    Undo a change you didn't mean to make.
  </Card>
</Columns>