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

# Visual editor

> Mouse-based focused edits: font size, color, border radius. Faster and cheaper than chat.

For focused edits (change font size, round a button, recolor one element), the visual editor is faster than describing in words.

## How to open

In the builder header, click "Editor" (cursor icon). The preview switches to selection mode, you can click any element.

## Editing one element

<Steps>
  <Step title="Click the element">
    A frame appears around the selected element.
  </Step>

  <Step title="Edit panel opens">
    Size, font, color, border radius, padding, all in one place.
  </Step>

  <Step title="Change parameters">
    Changes show immediately in the preview.
  </Step>

  <Step title="Save">
    When happy with the result, click "Save edits".
  </Step>
</Steps>

## Comment mode

Alternative scenario: select an element, add a comment ("make this card lighter, increase headline font"). You can stack multiple edits in a queue and submit as a batch, the AI applies them together.

<Tip>
  Useful when you see 5 problems at once: no need for 5 separate edits and 5 XP charges.
</Tip>

## Safe for the rest of the design

<Note>
  Visual editor edits affect only the specific element you selected. The rest of the site (theme, fonts, other sections) stays unchanged. Risk of accidentally breaking something is minimal.
</Note>

## When to use what

| Situation                       | Better to use |
| ------------------------------- | ------------- |
| Change one headline's font size | Visual editor |
| Recolor one button              | Visual editor |
| Replace site phone              | Chat          |
| Add a new section               | Chat          |
| Switch site theme to dark       | Chat          |
| Change card padding             | Visual editor |

## What's next

<CardGroup cols={2}>
  <Card title="Chat edits" icon="comments" href="/en/editing/chat-edits">
    When you need to describe an edit in words.
  </Card>

  <Card title="Version history" icon="clock-rotate-left" href="/en/editing/history">
    Rollback if something went wrong.
  </Card>
</CardGroup>