# Visual Editor

The Visual Editor lets you point at any element on your site and tell the agent what to change. Instead of describing where something is in your code, you select it visually — then describe what you want in plain language.

![Selecting an element with the Visual Editor](/images/docs/visual-edit-1.png)

## Setup

The Visual Editor requires a preview URL in your repository's `polyscope.json`:

```json
{
  "preview": {
    "url": "https://{{folder}}.test"
  }
}
```

The `{{folder}}` placeholder resolves to the workspace's folder name. Once configured, the preview panel becomes available in your workspace.

## How It Works

1. **Open the preview** — Click the preview icon in the workspace toolbar to open the embedded browser
2. **Activate the element picker** — Click the crosshair icon in the preview toolbar
3. **Select an element** — Hover over any element on the page to highlight it, then click to select
4. **Describe your change** — Type what you want to change about the selected element and send it to the agent

The agent receives both your instruction and the context of the selected element — its tag, CSS selector, text content, and position on the page — so it knows exactly what to modify.

![Selecting an element with the Visual Editor](/images/docs/visual-edit-2.png)

## What You Can Change

The Visual Editor works for any kind of change you can describe:

- **Text and copy** — "Change this heading to 'Get started in minutes'"
- **Styling** — "Make this button larger with a blue background"
- **Layout** — "Convert this list into a two-column grid"
- **Components** — "Turn this image gallery into a carousel"
- **Sections** — "Reorder these sections so pricing comes before features"
- **Additions** — "Add a testimonial card below this section"

Because the agent has full access to your codebase, it makes the actual code changes — not just visual overrides. The result is production-ready code.

## Preview Controls

The preview toolbar includes:

- **Back / Forward** — Navigate through page history
- **Reload** — Refresh the preview
- **URL bar** — Navigate to any page in your application
- **Element picker** (crosshair) — Activate element selection mode
- **Console** — View JavaScript console output for debugging
- **Split view** — Toggle side-by-side layout with the activity feed

## Tips

- **Navigate to the right page first.** Use the URL bar or click through your app to reach the page you want to edit before activating the element picker.
- **Be specific about what you want.** "Make this section look better" is vague — "Convert this feature list from a single column to a 3-column card grid with icons" gives the agent a clear target.
- **Combine with prompts.** You can mix visual selections with regular prompts. Select an element, then describe a complex change that spans multiple files.