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

# Visual Editor

> Make direct visual edits to your designs and apps — adjust text, colors, layout, and images by clicking, without writing code.

## What is Visual Editor?

The Visual Editor lets you make hands-on changes to your UI by clicking directly on elements. It works in both the [Design Canvas](/replitai/canvas) and the Preview, so you can edit mockups and running applications the same way.

Simple edits — text changes, color adjustments, spacing tweaks — update the source code directly without consuming AI credits. For changes that involve hidden complexity, the Visual Editor hands off to Agent automatically.

Key concepts:

* **Deterministic edits**: Simple changes (text, colors, spacing) apply directly to source code without an Agent loop
* **No credit cost**: Direct edits don't consume AI credits — only complex changes route through Agent
* **Dual context**: Works identically on Design Canvas frames and in the Preview
* **Source code sync**: Every edit updates the underlying source code instantly

<Note>
  The Visual Editor is currently available only on **web browsers**. It is not supported on Mobile App or Desktop App.
</Note>

## How to use Visual Editor

### Editing in Preview

Click any element in your running application to start editing. Modify text, colors, spacing, or images — and see changes applied live.

<Steps>
  <Step title="Select an element">
    Click any element in the Preview to start editing.
  </Step>

  <Step title="Make your edit">
    Edit text inline, adjust colors with the picker, change spacing with style controls, or swap images. Use the editor pane in chat for additional properties like padding, margin, and more.
  </Step>

  <Step title="Save">
    Hit save to update the source code. Simple changes apply directly without consuming AI credits. If the edit involves complexity, the Visual Editor sends targeted metadata to Agent for assistance.
  </Step>
</Steps>

### Editing on the Canvas

The same editing experience works on Design Canvas frames. Click any element within a frame to edit it — resize, change text, adjust colors and spacing on your mockups without going through an Agent loop.

### Text editing

Click any text element and type to change it directly. If the text is a string in your source code, the edit applies immediately.

<Frame>
  <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-text-edits.mp4" />
</Frame>

### Color adjustments

Use the color picker to adjust text and background colors. Type a color name like "purple" in the input field, or use the eyedropper to pick a color from anywhere on your screen.

<Frame>
  <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-color-picker-and-eyedropper.mp4" />
</Frame>

### Style changes

Adjust padding, margins, and layout across elements using intuitive controls.

<Frame>
  <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-related-elements.mp4" />
</Frame>

### Image updates

Select images to swap URLs or upload your own files with instant previews.

<Frame>
  <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-image-edits.mp4" />
</Frame>

## What you can do

* **Quick text fixes**: Update copy, labels, and headings without opening source files
* **Color exploration**: Try different color schemes by clicking and adjusting — no need to find the right CSS
* **Layout tweaks**: Fine-tune padding, margins, and spacing visually instead of guessing pixel values
* **Image swaps**: Replace placeholder images with real assets by clicking and uploading
* **Design iteration**: Rapidly adjust Canvas frames to compare visual directions without Agent round-trips

## Frequently asked questions

<Accordion title="Do Visual Editor changes cost AI credits?">
  Simple, deterministic edits — text changes, color picks, spacing adjustments — don't consume AI credits. They update the source code directly. If the Visual Editor detects hidden complexity, it routes the change through Agent, which does use credits.
</Accordion>

<Accordion title="Can I edit elements that appear in multiple places?">
  Yes. Selecting an element rendered in a loop or reused across components highlights and updates all instances at once.
</Accordion>

<Accordion title="Why can't I edit the text on some elements?">
  Composite elements made up of multiple sub-elements can't be text-edited directly in the Visual Editor. Ask Agent in chat to make those changes instead.
</Accordion>

<Accordion title="How do I find the source code for an element?">
  Click the top-left label on a selected element to jump to its location in the source code.
</Accordion>