Visual Edit Mode

Click-to-edit

Visual Edit mode lets you click any element in your live preview and edit its content or styles directly — no code needed. Enable it via the Visual Edit toggle in the header (desktop only, Max plan required).

When active, hovering over elements shows a violet dashed outline. Click to select an element and open its property panel on the right.

Editing properties

The Visual Edit panel exposes the most useful properties for the selected element:

• Text — edit the element's text content directly
• Font — family, size, weight, line height, letter spacing, color, alignment, transform, decoration
• Layout — display mode, flex direction, wrap, justify-content, align-items, gap
• Spacing — margin and padding (all sides)
• Border & background — border style and background color

Changes are applied live to the preview. When you're done, the AI assistant can generate the corresponding source code changes and save them to your files.