Introducing Visual Edits in Ai Studio

Visual Edits is a new in-canvas editing mode that allows you to change how your site looks—colours, fonts, spacing, images, icons, and more—simply by clicking on any element in the live preview. There’s no need to describe what you want to the AI; just point and adjust.

Visual edits are applied instantly without any LLM calls, meaning changes are nearly immediate and do not consume any of your token usage.

Click any element in the preview to open the Visual Edits panel. The controls adapt to your selection—be it text, button, image, icon, or layout element.

Double-click any text element to edit it directly in the preview. Press Escape or click outside when finished.

Click any Lucide icon to access a searchable library of over 1,600 icons. Select one and it will swap instantly, with no reload required.

Your project’s theme colours appear alongside the complete Tailwind palette. Click a swatch to apply.

Margin and padding are displayed side by side, with a toggle to link or unlink all four sides.

Select an image to access a Layout dropdown: Fill, Contain, Cover, or Scale down.

Select a Lucide icon to resize its width and height; it will snap to Tailwind classes or accept custom values.

Select multiple elements at once and describe the changes you want across all of them in a single prompt. This is excellent for applying consistent styling or making coordinated updates across several components.

Colour swaps, spacing tweaks, icon changes, and inline text edits—none of these require AI interaction. Changes apply instantly and do not count against your token usage. The LLM is only invoked when you explicitly send a prompt.

Changes are previewed live. Click Save to apply them to your code, or Discard to undo them.

• Any element: colours, spacing, border, shadow, border radius, opacity, typography
• Text: edit content inline
• Buttons and inputs: type, aria label
• Links: URL, target, rel
• Images: source, alt text, object-fit
• Lucide icons: swap from the full library, resize
• Textareas: placeholder, name, rows

More features coming soon!