Skip to content
AI Employee

Visual Edits in AI Studio

Make direct changes to a AI Studio project without relying on prompts or editing code. Use Visual Edits to edit text, page elements, styles, prompts and more

5 min read1,122 words9 explained imagesUpdated Mon, 29 Jun at 9:54 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of Visual Edits in AI Studio
  2. What Elements Can Be Edited
  3. How To Enter Visual Edit Mode
  4. How To Make Visual Edits
  5. Click to Select to Open Visual Controls
  6. Edit Text Inline
  7. Update Icons
  8. Adjust Image Layout
  9. Use Prompts on Selected Elements
  10. Saving or Discarding Visual Edits
  11. Frequently Asked Questions
  12. Related Articles

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, colors, spacing, and layouts.

TABLE OF CONTENTS

What are Visual Edits in AI Studio

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

This feature is useful when your AI-generated site is close to finished, but you still need to polish the copy, spacing, colors, buttons, images, icons, or layout. Changes are shown in the live preview first, and nothing is applied to the project until you save.

Note: The AI model is only invoked when you explicitly send a prompt. Direct visual changes made through the editing controls do not require AI generation or consume tokens.

Key Benefits of Visual Edits in AI Studio

  • Direct Page Editing: Click elements in the preview and update them without opening the Code Editor or using AI.

  • Faster Copy Updates: Double-click text and type directly on the page for quick content changes.

  • Targeted Prompt Changes: Select an element (or elements) and describe the change you want to apply.

  • No Token Usage for Direct Edits: Changes made through direct visual controls do not consume AI tokens.

  • Preview before Saving: Review updates in the live preview before applying them to the project.

What Elements Can Be Edited

Visual Edits supports the most common page elements used when refining a site. The available controls change based on the selected element, so the editing panel only shows options that are relevant to what you clicked.

Editable elements include:

  • Headings and Text: Update copy, typography, alignment, text color, and style.

  • Buttons: Change labels, button style, button type, spacing, and colors.

  • Images: Update image source, image fit, and alt text.

  • Icons: Swap icons and adjust icon size or styling.

  • Containers and sections: Adjust spacing, borders, shadows, backgrounds, and layout styling.

How To Enter Visual Edit Mode

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

To enter Visual Edit mode:

  1. Open AI Studio and click into the project you want to update.
    Step 1 of 3: Open AI Studio and click into the project you want to update What this shows Step 1 of 3: Open AI Studio and click into the project you want to update. What this shows Shows where to go for step 1 of 3 in the "How To Enter Visual Edit Mode" section of "Visual Edits in AI Studio". This screenshot accompanies step 1 of 3 in the "How To Enter Visual Edit Mode" section of "Visual Edits in AI Studio". At this point in the walkthrough you open AI Studio and click into the project you want to update. The next step is to click Visual Edits in the prompt area at the bottom-left of the builder. Step 1 of 3Image 1 of 9 Where to goOpen AI Studio and click into the project you want to update.
    Buttons and menus referenced AI StudioVisual Edits
    Next stepClick Visual Edits in the prompt area at the bottom-left of the builder.
    All 3 steps in this procedure
    1. Open AI Studio and click into the project you want to update. this image
    2. Click Visual Edits in the prompt area at the bottom-left of the builder.
    3. Click an element in the preview to begin editing.

  2. Click Visual Edits in the prompt area at the bottom-left of the builder.

    Step 2 of 3: Click Visual Edits in the prompt area at the bottom-left of the builder What this shows Step 2 of 3: Click Visual Edits in the prompt area at the bottom-left of the builder. What this shows Shows what to click for step 2 of 3 in the "How To Enter Visual Edit Mode" section of "Visual Edits in AI Studio". This screenshot accompanies step 2 of 3 in the "How To Enter Visual Edit Mode" section of "Visual Edits in AI Studio". At this point in the walkthrough you click Visual Edits in the prompt area at the bottom-left of the builder. The next step is to click an element in the preview to begin editing. Step 2 of 3Image 2 of 9 What to clickClick Visual Edits in the prompt area at the bottom-left of the builder.
    Buttons and menus referenced Visual EditsAI Studio
    Next stepClick an element in the preview to begin editing.
    All 3 steps in this procedure
    1. Open AI Studio and click into the project you want to update.
    2. Click Visual Edits in the prompt area at the bottom-left of the builder. this image
    3. Click an element in the preview to begin editing.

  3. Click an element in the preview to begin editing.

    Step 3 of 3: Click an element in the preview to begin editing What this shows Step 3 of 3: Click an element in the preview to begin editing. What this shows Shows what to click for step 3 of 3 in the "How To Enter Visual Edit Mode" section of "Visual Edits in AI Studio". This screenshot accompanies step 3 of 3 in the "How To Enter Visual Edit Mode" section of "Visual Edits in AI Studio". At this point in the walkthrough you click an element in the preview to begin editing. Step 3 of 3Image 3 of 9 What to clickClick an element in the preview to begin editing.
    Buttons and menus referenced AI StudioVisual Edits
    All 3 steps in this procedure
    1. Open AI Studio and click into the project you want to update.
    2. Click Visual Edits in the prompt area at the bottom-left of the builder.
    3. Click an element in the preview to begin editing. this image

How To Make Visual Edits

Visual Edits gives you several ways to update a page after entering Visual Edit mode. You can select elements to open contextual controls, edit text directly on the page, swap icons, adjust colors and spacing, control image layout, resize icons, or use prompts across multiple selected elements.

Click to Select to Open Visual Controls

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

Color and spacing controls are available from the Visual Edits panel when they apply to the selected element. Your project’s theme colors appear alongside the full Tailwind palette. Margin and padding controls appear as well, allowing for you to control the spacing.

Click to Select to Open Visual Controls (image 4 of 9) What this shows Color and spacing controls are available from the Visual Edits panel when they apply to the selected element. What this shows Illustrates the "Click to Select to Open Visual Controls" section of "Visual Edits in AI Studio". This animation appears in the "Click to Select to Open Visual Controls" section of "Visual Edits in AI Studio". The text alongside this image reads: Color and spacing controls are available from the Visual Edits panel when they apply to the selected element. Your project’s theme colors appear alongside the full Tailwind palette. Margin and padding controls appear as well, allowing for you to control the spacing. Immediately after, the guide continues: Inline text editing is best for quick copy changes. Double-click a text element then type directly on the page to make changes. Image 4 of 9 What this coversColor and spacing controls are available from the Visual Edits panel when they apply to the selected element. Your project’s theme colors appear alongside the full Tailwind palette. Margin and padding controls appear as well, allowing for you to control the spacing. Next stepInline text editing is best for quick copy changes. Double-click a text element then type directly on the page to make changes.

Edit Text Inline

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

Edit Text Inline (image 5 of 9) What this shows Inline text editing is best for quick copy changes. What this shows Illustrates the "Edit Text Inline" section of "Visual Edits in AI Studio". This animation appears in the "Edit Text Inline" section of "Visual Edits in AI Studio". The text alongside this image reads: Inline text editing is best for quick copy changes. Double-click a text element then type directly on the page to make changes. Immediately after, the guide continues: 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 choose a replacement that swaps instantly without a reload. You can…. Image 5 of 9 What to fill inInline text editing is best for quick copy changes. Double-click a text element then type directly on the page to make changes. Next stepIcon 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 choose a replacement that swaps instantly without a reload. You can also resize selected Lucide icons.

Update Icons

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 choose a replacement that swaps instantly without a reload. You can also resize selected Lucide icons.

Update Icons (image 6 of 9) What this shows Icon controls make it easy to replace or resize Lucide icons without editing code. What this shows Illustrates the "Update Icons" section of "Visual Edits in AI Studio". This animation appears in the "Update Icons" section of "Visual Edits in AI Studio". The text alongside this image reads: 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 choose a replacement that swaps instantly without a reload. You can also resize selected Lucide icons. Immediately after, the guide continues: Image controls help you update both the image used and how it appears inside its assigned area. When you select an image, you can change the image URL to replace the image, update the alt text, and use the Layout dropdown to choose the…. Image 6 of 9 What to chooseIcon 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 choose a replacement that swaps instantly without a reload. You can also resize selected Lucide icons. Next stepImage controls help you update both the image used and how it appears inside its assigned area. When you select an image, you can change the image URL to replace the image, update the alt text, and use the Layout dropdown to choose the visual result you want.

Adjust Image Layout

Image controls help you update both the image used and how it appears inside its assigned area. When you select an image, you can change the image URL to replace the image, update the alt text, and use the Layout dropdown to choose the visual result you want.

Adjust Image Layout (image 7 of 9) What this shows Image controls help you update both the image used and how it appears inside its assigned area. What this shows Illustrates the "Adjust Image Layout" section of "Visual Edits in AI Studio". This animation appears in the "Adjust Image Layout" section of "Visual Edits in AI Studio". The text alongside this image reads: Image controls help you update both the image used and how it appears inside its assigned area. When you select an image, you can change the image URL to replace the image, update the alt text, and use the Layout dropdown to choose the visual result you want. Immediately after, the guide continues: Prompt editing lets you select one or more elements and describe the change you want to make. Use it when you want to update a specific element in plain language or apply a coordinated change across multiple selected elements. Image 7 of 9 What to chooseImage controls help you update both the image used and how it appears inside its assigned area. When you select an image, you can change the image URL to replace the image, update the alt text, and use the Layout dropdown to choose the visual result you want.
Buttons and menus referenced Layout
Next stepPrompt editing lets you select one or more elements and describe the change you want to make. Use it when you want to update a specific element in plain language or apply a coordinated change across multiple selected elements.

Use Prompts on Selected Elements

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

For a single element, prompt editing is helpful for changes like making a selected section 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, it is useful for applying consistent styling across repeated components, such as matching button styles, aligning spacing between containers, updating repeated cards or columns, or applying the same color to a group of selected elements.

Use Prompts on Selected Elements (image 8 of 9) What this shows For multiple elements, it is useful for applying consistent styling across repeated components, such as matching button styles, aligning… What this shows Illustrates the "Use Prompts on Selected Elements" section of "Visual Edits in AI Studio". This animation appears in the "Use Prompts on Selected Elements" section of "Visual Edits in AI Studio". The text alongside this image reads: For multiple elements, it is useful for applying consistent styling across repeated components, such as matching button styles, aligning spacing between containers, updating repeated cards or columns, or applying the same color to a group of selected elements. Immediately after, the guide continues: Visual Edits uses a preview-first workflow so you can review changes before applying them to the project. This helps prevent accidental updates and gives you room to test different styles or content changes. Image 8 of 9 What this coversFor multiple elements, it is useful for applying consistent styling across repeated components, such as matching button styles, aligning spacing between containers, updating repeated cards or columns, or applying the same color to a group of selected elements. Next stepVisual Edits uses a preview-first workflow so you can review changes before applying them to the project. This helps prevent accidental updates and gives you room to test different styles or content changes.

Saving or Discarding Visual Edits

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

Click Save to apply the edit to the project. If you leave visual editor mode without saving, your changes will be discarded.

If an edit affects the wrong element, creates an unwanted style or does not match your intended design, click Discard to remove unsaved changes and return to the previous version.

Saving or Discarding Visual Edits (image 9 of 9) What this shows If an edit affects the wrong element, creates an unwanted style or does not match your intended design, click Discard to remove unsaved… What this shows Illustrates the "Saving or Discarding Visual Edits" section of "Visual Edits in AI Studio". This screenshot appears in the "Saving or Discarding Visual Edits" section of "Visual Edits in AI Studio". The text alongside this image reads: If an edit affects the wrong element, creates an unwanted style or does not match your intended design, click Discard to remove unsaved changes and return to the previous version. Immediately after, the guide continues: Q: Do I need to enable a setting before using Visual Edits? No. Open an AI Studio project and click Visual Edits in the bottom-left prompt area of the builder to start editing. Image 9 of 9 What to clickIf an edit affects the wrong element, creates an unwanted style or does not match your intended design, click Discard to remove unsaved changes and return to the previous version.
Buttons and menus referenced SaveDiscard
Next stepQ: Do I need to enable a setting before using Visual Edits? No. Open an AI Studio project and click Visual Edits in the bottom-left prompt area of the builder to start editing.

Frequently Asked Questions

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

Q: Do Visual Edits use AI tokens?
Direct visual edits do not use AI tokens because the changes are made through editing controls instead of AI-generated 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 can be used for coordinated updates such as consistent spacing, shared styling, or repeated layout refinements.

Was this guide helpful?

Related guides

AI Studio in GHL Customer Care17 min read · 29 imagesConnect Forms and Calendars in AI Studio6 min read · 10 imagesCode Editor in the AI Studio6 min read · 15 imagesAdvanced SEO Support in AI Studio6 min read · 15 images