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

# Live previews

> See changes as you build in studio.

V3Code has its own built-in browser, so what the agent builds renders live, right beside your work — no second window, no context switch. And you're not limited to watching: you can reach in and edit the page directly.

## Visual Edit

Turn on **Visual Edit** and every element on the live page becomes selectable. Click a heading, a button, a section, and a style panel opens for it:

* **Text** and **Background** color
* **Size** and **Weight**
* **Padding** and **Radius**

Your changes **stage** as a list of edits rather than applying blindly. When you're happy, hit **Send edits to agent** — the agent takes your visual changes as precise instructions and applies them in code, with an optional note ("make the hero pop"). It's design-by-pointing: you show the agent what you want instead of describing it.

<Note>
  Visual Edit shares the selected element and your staged changes with the agent ("Sharing with Agent"), so the handoff from "I tweaked this in the browser" to "the agent changed the code" is one click.
</Note>

## Why it's in V3Code's browser

Because the preview, the visual editor, and the agent all live in the same place, an edit loop that normally spans a design tool, a browser, and an editor collapses into one surface. Pair this with [Discover](/studio/discover) and the [Web builder](/studio/web-builder) and the whole path — pick a design, set tokens, build, preview, tweak, ship — stays inside V3Code.
