Learn how to use Visual Edits in AI Studio to refine your project directly from the live preview. You'll learn how to enter Visual Edit mode and select editable elements. You'll also see how to update text, images, icons, colours, spacing and layouts.

Visual Edits in AI Studio lets you refine your AI project directly from the live preview after it's been generated. You can click into text, select page elements, update styling options, or use a targeted prompt to change specific parts of the page.

This feature is handy when your AI-generated site is nearly finished, but you still need to polish the copy, spacing, colours, buttons, images, icons or layout. Changes show in the live preview first. Nothing is applied to the project until you save.

Note: The AI model is only used when you send a prompt. Direct visual changes made through the editing controls don't need AI generation and don't use tokens.

Visual Edits supports the most common page elements you'll use when refining a site. The controls change based on the element you select, so the editing panel only shows options that suit what you clicked.

Editable elements include:

You turn on Visual Edit mode from the AI Studio builder. Once it's on, the preview becomes interactive, so you can select text, images, buttons, icons, containers and other supported elements.

To enter Visual Edit mode:

Once you're in Visual Edit mode, there are several ways to update a page. You can select elements to open contextual controls, edit text directly on the page, swap icons, adjust colours and spacing, control image layout, resize icons, or use prompts across several selected elements.

Click any element in the preview to open the Visual Edits panel. The controls adapt to what you selected, such as text, buttons, images, icons, containers or layout elements. This lets you make targeted changes without digging through the project code.

Colour and spacing controls are available in the Visual Edits panel when they apply to the selected element. Your project's theme colours appear alongside the full Tailwind palette. Margin and padding controls also appear, so you can control the spacing.

Inline text editing is best for quick copy changes. Double-click a text element, then type directly on the page.

Icon controls make it easy to replace or resize Lucide icons without editing code. When you select a Lucide icon, you can open a searchable library of 1,600+ icons and pick a replacement. It swaps instantly without a reload. You can also resize selected Lucide icons.

Image controls help you update both the image itself and how it appears in its area. When you select an image, you can change the image URL to replace it, update the alt text, and use the Layout dropdown to choose the look you want.

Prompt editing lets you select one or more elements and describe the change you want. Use it to update a specific element in plain language, or to apply a coordinated change across several selected elements.

For a single element, prompts are helpful for changes like making a section look more modern, improving the spacing inside a container, softening a button style, or making one component better match the rest of the page.

For multiple elements, prompts are useful for applying consistent styling across repeated components. For example, matching button styles, aligning spacing between containers, updating repeated cards or columns, or applying the same colour to a group of elements.

Visual Edits works preview-first, so you can review changes before applying them to the project. This helps prevent accidental updates and gives you room to try different styles or content.

Click Save to apply the edit to the project. If you leave Visual Edit mode without saving, your changes are discarded.

If an edit affects the wrong element, creates a style you don't want, or doesn't match your design, click Discard to remove unsaved changes and go back to the previous version.
​

Q: Do I need to turn on a setting before using Visual Edits?
No. Open an AI Studio project and click Visual Edits in the prompt area at the bottom-left of the builder to start editing.

Q: Do Visual Edits use AI tokens?
Direct visual edits don't use AI tokens, because the changes are made through editing controls rather than AI prompts.

Q: Can I use a prompt on a specific selected element?
Yes. Select the element you want to change and enter a targeted instruction in the Visual Edits prompt area.

Q: Can I edit more than one element at a time?
Yes. Multi-select editing works well for coordinated updates such as consistent spacing, shared styling or repeated layout tweaks.