Summary

Visual Edits is an in-canvas editing mode that lets you update your site’s styles directly in the live preview. You can adjust colors, fonts, spacing, images, icons, and layout by clicking an element and changing its settings.

These direct edits apply immediately and do not use AI tokens. AI is only used when you send a prompt.

What’s included

• Click to select: Click an element to open the Visual Edits panel. The controls change based on what you selected (text, button, image, icon, or layout).
• Edit text inline: Double-click text to edit it in place. Press Escape or click outside to finish.
• Icon picker: Replace Lucide icons using a searchable library of 1,600+ icons.
• Color palette: Choose from your project theme colors and the Tailwind palette.
• Spacing controls: Adjust margin and padding with the option to link or unlink sides.
• Image layout: Set image fit to Fill, Contain, Cover, or Scale down.
• Icon sizing: Resize Lucide icons using Tailwind classes or custom values.
• Multi-select with prompt: Select multiple elements and apply a single prompt to update them consistently.
• Save or discard: Preview changes live, then save to apply or discard to revert.

What you can edit

• Colors, spacing, borders, shadows, border radius, opacity, typography
• Text content (inline editing)
• Buttons and inputs (type and aria label)
• Links (URL, target, rel)
• Images (source, alt text, object-fit)
• Lucide icons (swap and resize)
• Textareas (placeholder, name, rows)