Using Visual Edits in AI Studio
What Are Visual Edits in AI Studio?
Visual Edits in AI Studio allow you to refine your AI-generated project directly within the live preview. After generating a project, you can click on text, select elements, adjust styling, or use targeted prompts to modify specific page sections. This feature is ideal for finalizing details like copy, spacing, colors, buttons, images, icons, or layout before saving changes. All edits appear in the preview first and are only applied to the project when you save.
Note: The AI model is only used when you send a prompt. Direct edits made using visual controls do not require AI generation or consume tokens.
Key Benefits of Visual Edits
- Direct Page Editing: Update elements directly in the preview without opening the Code Editor or using AI.
- Quick Text Updates: Double-click text and type directly on the page for fast content changes.
- Targeted Prompt Changes: Select elements and describe desired changes using prompts.
- No Token Usage: Direct visual edits do not use AI tokens.
- Preview Before Saving: Review all changes in the live preview before applying them.
Editable Elements
Visual Edits supports common page elements. The editing panel shows relevant controls based on your selection:
- Headings and Text: Update copy, typography, alignment, color, and style.
- Buttons: Change labels, style, type, spacing, and colors.
- Images: Update source, fit, and alt text.
- Icons: Swap icons and adjust size or styling.
- Containers and Sections: Adjust spacing, borders, shadows, backgrounds, and layout.
How to Enter Visual Edit Mode
- Open AI Studio and select the project you want to update.
- Click Visual Edits in the prompt area at the bottom-left of the builder.
- Click any element in the preview to begin editing.
How to Make Visual Edits
Select Elements to Open Controls
Click any element in the preview to open the Visual Edits panel. Controls adjust based on your selection (e.g., text, buttons, images). Color and spacing options appear when applicable, including theme colors and margin/padding controls.
Edit Text Inline
Double-click a text element and type directly on the page for quick copy updates.
Update Icons
Select a Lucide icon to open a searchable library with over 1,600 icons. Choose a replacement or resize the icon without reloading.
Adjust Image Layout
Select an image to change its URL, alt text, or layout using the Layout dropdown.
Use Prompts on Selected Elements
Select one or more elements and describe the change you want. Use prompts for targeted updates like modernizing a section, improving spacing, softening a button style, or applying consistent styling across multiple elements.
Saving or Discarding Visual Edits
Visual Edits uses a preview-first workflow. Click Save to apply changes to the project. Click Discard to remove unsaved changes and revert to the previous version. Leaving Visual Edit mode without saving discards all changes.
Frequently Asked Questions
Q: Do I need to enable a setting before using Visual Edits?
A: No. Open an AI Studio project and click Visual Edits to begin.