> ## Documentation Index
> Fetch the complete documentation index at: https://docs.youware.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual Editing - Direct UI Modifications

> Edit website elements directly in the preview with instant visual feedback. Make precise UI changes without describing them to AI, saving time and credits while maintaining full control.

<video width="100%" height="auto" controls autoPlay muted loop style={{ borderRadius: '8px', marginTop: '24px', marginBottom: '32px' }}>
  <source src="https://mintcdn.com/youware-18c86901/ZKaGMh0Yuq54Ftak/images/visual-editing-complete.mp4?fit=max&auto=format&n=ZKaGMh0Yuq54Ftak&q=85&s=3d042aa49d1911144a9a2eeca46f81a4" type="video/mp4" data-path="images/visual-editing-complete.mp4" />

  Your browser does not support the video tag.
</video>

<Tip>
  **Direct, Precise, Instant** — Skip the back-and-forth. Select elements on screen, edit them visually, and apply changes instantly. Visual Editing empowers you to iterate faster while using fewer AI credits.
</Tip>

Visual Editing transforms the way you build. Instead of describing UI changes to AI, you select elements directly in the preview, adjust them visually, and see results in real-time. Perfect for fine-tuning layouts, updating text, swapping images, or refining interactions—all without consuming extensive AI resources.

## Why Visual Editing Matters

<CardGroup cols={2}>
  <Card title="Faster Iterations" color="#FF6B6B">
    Make changes in seconds, see results instantly. No waiting for AI responses.
  </Card>

  <Card title="Lower Credit Cost" color="#339933">
    Visual modifications consume minimal credits compared to descriptive edits.
  </Card>

  <Card title="Precise Control" color="#61DAFB">
    Select exactly what you want to change. No ambiguous descriptions needed.
  </Card>

  <Card title="Live Preview" color="#9B59B6">
    See every adjustment update in real-time as you modify elements.
  </Card>
</CardGroup>

## Getting Started

<Steps>
  <Step title="Enable Visual Editing">
    Click the **Edit** button in the bottom-left corner of the chatbot to activate Visual Editing mode
  </Step>

  <Step title="Select an Element">
    Hover over the element you want to modify, then click to open the editing toolbar
  </Step>

  <Step title="Make Your Changes">
    Use the available tools to adjust text, images, styling, or properties
  </Step>

  <Step title="Apply Changes">
    Click the send arrow or press Enter to apply your edits and exit Visual Editing mode
  </Step>
</Steps>

## Editing Different Elements

### Text Elements

Click directly on any text to edit its content. The toolbar provides comprehensive formatting options:

<AccordionGroup>
  <Accordion title="Text Formatting" defaultOpen={true}>
    Adjust **font size**, **color**, **style** (bold, italic, underline), and **text alignment**. Add hyperlinks to make text interactive.
  </Accordion>

  <Accordion title="Spacing Control">
    Modify **padding** and **margin** to control space around text elements and their positioning.
  </Accordion>
</AccordionGroup>

<img src="https://mintcdn.com/youware-18c86901/ZKaGMh0Yuq54Ftak/images/visual-editing-edit-text.gif?s=23cf8800e8a1677d5fb0b861de164974" alt="Text editing demonstration showing font size, color, and style adjustments" style={{ borderRadius: '8px', marginTop: '16px', marginBottom: '16px' }} width="1232" height="720" data-path="images/visual-editing-edit-text.gif" />

<img src="https://mintcdn.com/youware-18c86901/p6I7gwS_1Zo9eXOb/images/visual-editing-text-other-function.gif?s=6de00cebc0a315abccec659ebb7c6619" alt="Advanced text editing features including alignment, padding, margin, and hyperlink insertion" style={{ borderRadius: '8px', marginBottom: '16px' }} width="1232" height="720" data-path="images/visual-editing-text-other-function.gif" />

### Image Elements

Select any image to replace or customize it:

<AccordionGroup>
  <Accordion title="Replace Image" defaultOpen={true}>
    Upload a new image file (PNG, JPG, SVG, WEBP, GIF) to replace the selected image instantly.
  </Accordion>

  <Accordion title="Customize Appearance">
    Adjust **corner radius** for rounded corners, control **padding** and **margin**, or add **hyperlinks** for interactivity.
  </Accordion>
</AccordionGroup>

<img src="https://mintcdn.com/youware-18c86901/ZKaGMh0Yuq54Ftak/images/visual-editing-replace-image.gif?s=188d9feb37f39e4b08c37701b12542e5" alt="Image replacement workflow showing file upload and instant preview update" style={{ borderRadius: '8px', marginTop: '16px', marginBottom: '16px' }} width="1296" height="720" data-path="images/visual-editing-replace-image.gif" />

<img src="https://mintcdn.com/youware-18c86901/ZKaGMh0Yuq54Ftak/images/visual-editing-edit-image.gif?s=902d3bce41d28cb02267add3e5310cc5" alt="Image customization showing corner radius, padding, margin, and hyperlink adjustments" style={{ borderRadius: '8px', marginBottom: '16px' }} width="1304" height="720" data-path="images/visual-editing-edit-image.gif" />

### Other Elements (Divs, Buttons, Spans, etc.)

Customize styling and interactivity for any page element:

<AccordionGroup>
  <Accordion title="Styling Options" defaultOpen={true}>
    Modify **corner radius**, **padding**, **margin**, or **background color** to match your design vision.
  </Accordion>

  <Accordion title="Add Interactivity">
    Add **hyperlinks** to make any element clickable, turning static elements into interactive components.
  </Accordion>

  <Accordion title="Remove Elements">
    Delete elements you no longer need with a single click. The element is removed from your page immediately.
  </Accordion>
</AccordionGroup>

<img src="https://mintcdn.com/youware-18c86901/ZKaGMh0Yuq54Ftak/images/visual-editing-delete.gif?s=962c3d7743c801795ede79e4b4079154" alt="Element deletion showing selection, delete confirmation, and removal from page" style={{ borderRadius: '8px', marginTop: '16px', marginBottom: '16px' }} width="1236" height="720" data-path="images/visual-editing-delete.gif" />

## Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts:

<AccordionGroup>
  <Accordion title="macOS Shortcuts">
    * **Cmd+Z** — Undo your last change
    * **Shift+Cmd+Z** — Redo your last change
  </Accordion>

  <Accordion title="Windows Shortcuts">
    * **Ctrl+Z** — Undo your last change
    * **Ctrl+Shift+Z** — Redo your last change
  </Accordion>
</AccordionGroup>

## Applying & Saving Changes

<Info>
  **Important**: Changes are only saved when you apply them. Unsaved modifications will be lost if you exit without applying.
</Info>

When you're ready to finalize your edits:

<Steps>
  <Step title="Review Changes">
    Take a moment to review all modifications in the preview
  </Step>

  <Step title="Apply Changes">
    Click the **send arrow** or press **Enter** to apply your edits and exit Visual Editing mode
  </Step>

  <Step title="Check Credit Usage">
    View the credit cost displayed after each edit (for example: `Credits used: 20`). Depending on change complexity, some edits may consume no credits at all.
  </Step>
</Steps>

<img src="https://mintcdn.com/youware-18c86901/ZKaGMh0Yuq54Ftak/images/visual-editing-apply-edits.gif?s=bc442c3accddf6cc1fdc54f0b2b4af8f" alt="Workflow showing edit review, application via send arrow, and credit usage display" style={{ borderRadius: '8px', marginTop: '16px', marginBottom: '16px' }} width="1236" height="720" data-path="images/visual-editing-apply-edits.gif" />

## Exiting Visual Editing

You have two options when leaving Visual Editing mode:

<AccordionGroup>
  <Accordion title="Save & Exit (Apply Changes)" defaultOpen={true}>
    Click the **send arrow** or press **Enter** to save your edits and exit Visual Editing mode. Your changes become permanent.
  </Accordion>

  <Accordion title="Exit Without Saving (Discard Changes)">
    Click the **Edit** button again in the bottom-left corner. In the popup menu, select **Discard changes** to exit without saving any modifications.
  </Accordion>
</AccordionGroup>

<img src="https://mintcdn.com/youware-18c86901/ZKaGMh0Yuq54Ftak/images/visual-editing-discard-changes.gif?s=4ced49aeaa3a9f5913edc80e318c74c9" alt="Exit workflow demonstrating both save/apply and discard/cancel options" style={{ borderRadius: '8px', marginTop: '16px', marginBottom: '16px' }} width="1236" height="720" data-path="images/visual-editing-discard-changes.gif" />

## Best Practices

<Tip>
  **Pro tip**: Use the undo/redo shortcuts (Cmd+Z / Ctrl+Z) liberally. You can experiment freely and revert any mistakes instantly without affecting your AI credit balance until you apply changes.
</Tip>

<CardGroup cols={2}>
  <Card title="Be Specific" color="#FF6B6B">
    Visual Editing works best for targeted, precise modifications rather than complete redesigns.
  </Card>

  <Card title="Edit in Batches" color="#339933">
    Make multiple related changes before applying to optimize credit usage.
  </Card>

  <Card title="Review First" color="#61DAFB">
    Always review changes in the preview before applying them to avoid unintended modifications.
  </Card>

  <Card title="Combine with AI" color="#9B59B6">
    Use Visual Editing for refinements and AI chat for structural changes to your website.
  </Card>
</CardGroup>

## Summary

Visual Editing transforms "slow, credit-heavy back-and-forth" into "**quick, precise, and affordable**" improvements you fully control. By selecting elements directly in the preview, you eliminate misunderstandings, shorten feedback loops, and keep projects moving forward.

Whether you're polishing copy, swapping images, fine-tuning layouts, or adding interactivity, you can iterate in seconds and apply changes confidently—no guesswork, no waste.