Visual Editing
Visual editing lets you select elements in the browser preview and ask the AI to modify them, bridging the gap between design and code.
How It Works
-
Open the browser preview in your project's code editor
-
Enable visual editing by clicking the pointer icon in the preview toolbar
-
Click any element on the page to select it
-
Describe your change in the chat:
"Make this button larger and change the color to blue"
"Add a border-radius to this card"
"Center this text and increase the font size"
The AI identifies the corresponding source code and applies the changes.
Toolbar
The visual editing toolbar provides:
| Tool | Description |
|---|---|
| Select | Click to select elements |
| Inspect | View element properties (size, spacing, colors) |
| Measure | Show distances between elements |
What You Can Edit
- Styles — Colors, fonts, spacing, borders, shadows
- Layout — Flexbox, grid, positioning, alignment
- Content — Text, images, labels
- Components — Add, remove, or rearrange components
Supported Frameworks
Visual editing works with any web framework that renders in the browser preview:
- React / Next.js
- Vue / Nuxt
- Svelte / SvelteKit
- HTML / CSS
- Tailwind CSS
Tips
- Select specific elements rather than containers for more precise changes
- Use the inspect tool to understand the current styles before requesting changes
- Combine visual editing with chat instructions for complex modifications