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

# Click to Edit

> Visual editing mode: click any element on your live site, describe the change, and Foenix applies it to the exact file responsible.

Vibe Coding is a visual editing mode. Instead of describing where something is, you point at it - then describe what you want to change.

## How it works

1. Open a session and click **Live** in the bottom toolbar
2. Your live site appears in the center panel
3. Click **Visual Edit** and sany element - text, image, button, heading, section
4. The selected element is highlighted with an orange dashed border
5. Describe the change in the text field on the right
6. Foenix finds the exact file responsible and applies the change

## What you can edit

| Element         | What you can change                          |
| --------------- | -------------------------------------------- |
| Text / heading  | Content, font size, color, weight, alignment |
| Image           | Replace image, change alt text, adjust size  |
| Button          | Label, color, border radius, link target     |
| Navigation item | Label, URL, visibility                       |
| Section / block | Layout, background, spacing, visibility      |

## Example prompts

```text theme={null}
Change this heading to "Welcome to Pizza School Dubai"
```

```text theme={null}
Make this button larger and change the label to "Book a class"
```

```text theme={null}
Replace this image with a food photography style banner - warm tones
```

```text theme={null}
Hide this section on mobile devices only
```

## Tips

* You can switch between Vibe Coding and the chat panel at any time in the same session
* If you select the wrong element, click elsewhere to deselect and try again
* For changes affecting multiple elements at once, use Direct Edits instead
* Works with both classic themes and block (FSE) themes

<Warning>
  Always make a backup before making changes on a production site. [Backups →](/security/backups)
</Warning>