Build
Visual edits
Click on anything in preview and edit it directly — text, color, size, padding. No prompts, no credits, immediate result.
Overview
Visual edits are a quick way to fine-tune details. You activate them with the switch above the preview.
Visual edits are free and changes are saved immediately to the code.
What you can edit
- Text — all strings in JSX, headings, buttons, labels
- Colors — text, background, border (via design tokens)
- Typography — font size, weight, line-height
- Spacing — padding, margin, gap
- Border radius and shadows
- Images — replace by uploading or generate with AI
How to use Visual edits
- Click the "Edit" icon above the preview.
- Hover over an element — it will be outlined in blue.
- Click and edit properties in the right panel.
- Changes are saved automatically.
Limits
- Do structural changes via prompt.
- Visual edits do not edit component logic.
- If an element is rendered from data (loop), editing one will affect the template.