Making Visual Edits in AI Studio

Visual Edits in AI Studio let you refine your project directly from the live preview — no need to dig through menus or write prompts for every small change. You click an element, adjust it using the panel controls or a short prompt, and see the result instantly before saving. This guide walks through how to use Visual Edit mode and what you can do with it.

What Are Visual Edits

Visual Edits is an editing mode inside the AI Studio builder that lets you click directly on page elements — text, buttons, images, icons, containers — and make changes from a side panel. You can update content, styling, spacing, and layout without writing prompts, and you can also use prompts on selected elements when you want AI to help.

Key Benefits

• Direct selection: Click any element on the preview to open its editing controls.
• No AI tokens required for panel edits: Adjusting text, spacing, colors, and styling through the panel does not use AI credits.
• Preview before saving: All changes show in the live preview first so you can review before applying.

What You Can Edit

The editing panel adapts based on what you select, so you only see options relevant to that element. Editable elements include:

• Headings and Text: Update copy, typography, alignment, text color, and style.
• Buttons: Change labels, button style, type, spacing, and colors.
• Images: Update the image source, fit, and alt text.
• Icons: Swap icons and adjust size or styling.
• Containers and sections: Adjust spacing, borders, shadows, backgrounds, and layout.

Step 1 — Enter Visual Edit Mode

Visual Edit mode is turned on from within the AI Studio builder. Once active, the preview becomes interactive and you can click any element to select it.

Step 2 — Click to Select an Element

Click any element in the live preview to select it. The editing panel opens on the side with controls specific to that element type.

Edit Text Inline

For text elements, you can edit the copy directly in the preview. Click the text to select it, then click again to edit inline.

Update Icons

Click an icon element to open the icon picker. Browse or search for a replacement, then apply it.

Adjust Image Layout

Select an image element to access controls for the image source, fit (cover, contain, fill), and alt text.

Use Prompts on Selected Elements

When panel controls aren't enough, you can describe a change in plain language. Select one or more elements, then type a prompt to apply AI-assisted edits to just those elements.

This is useful for things like making a section feel more modern, improving spacing inside a container, or applying consistent styling across multiple selected components like cards or buttons.

Save or Discard Visual Edits

Visual Edits uses a preview-first workflow. Changes appear in the live preview before they're applied to the project, so you can test different styles without committing.

• Click Save to apply the changes to your project.
• Click Discard to undo the edits and go back to the previous state.

Frequently Asked Questions

Do Visual Edits use AI tokens?
Panel-based edits (text, spacing, colors, styling) do not use AI tokens. Prompt-based edits on selected elements do use AI credits.

Can I edit multiple elements at once?
Yes. Select more than one element and use a prompt to apply changes across all of them — useful for matching button styles, aligning spacing, or applying the same color to a group.

What if I don't like the result?
Click Discard before saving to return to the previous state. Changes are only applied when you click Save.

Can I use Visual Edits and AI prompts together?
Yes. You can mix both — use the panel for quick adjustments and prompts for more complex or coordinated changes.