> ## 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

> Faça edições visuais diretas nos seus designs e aplicativos — ajuste texto, cores, layout e imagens clicando, sem escrever código.

## O que é o Visual Editor?

O Visual Editor permite que você faça alterações práticas na sua interface clicando diretamente nos elementos. Ele funciona tanto no [Design Canvas](/replitai/canvas) quanto na Prévia, para que você possa editar mockups e aplicativos em execução da mesma forma.

Edições simples — alterações de texto, ajustes de cor, ajustes de espaçamento — atualizam o código-fonte diretamente sem consumir créditos de IA. Para alterações que envolvem complexidade oculta, o Visual Editor passa automaticamente para o Agent.

Conceitos principais:

* **Edições determinísticas**: Alterações simples (texto, cores, espaçamento) aplicam-se diretamente ao código-fonte sem um loop do Agent
* **Sem custo de crédito**: Edições diretas não consomem créditos de IA — apenas alterações complexas são roteadas pelo Agent
* **Contexto duplo**: Funciona de forma idêntica em frames do Design Canvas e na Prévia
* **Sincronização com o código-fonte**: Cada edição atualiza o código-fonte subjacente instantaneamente

<Note>
  O Visual Editor está disponível atualmente apenas em **navegadores web**. Não é compatível com o aplicativo Mobile ou o aplicativo Desktop.
</Note>

## Como usar o Visual Editor

### Editando na Prévia

Clique em qualquer elemento do seu aplicativo em execução para começar a editar. Modifique texto, cores, espaçamento ou imagens — e veja as alterações aplicadas ao vivo.

<Steps>
  <Step title="Selecione um elemento">
    Clique em qualquer elemento na Prévia para começar a editar.
  </Step>

  <Step title="Faça sua edição">
    Edite texto inline, ajuste cores com o seletor de cores, altere o espaçamento com os controles de estilo ou troque imagens. Use o painel do editor no chat para propriedades adicionais como padding, margin e mais.
  </Step>

  <Step title="Salve">
    Pressione salvar para atualizar o código-fonte. Alterações simples aplicam-se diretamente sem consumir créditos de IA. Se a edição envolver complexidade, o Visual Editor envia metadados direcionados ao Agent para assistência.
  </Step>
</Steps>

### Editando no Canvas

A mesma experiência de edição funciona nos frames do Design Canvas. Clique em qualquer elemento dentro de um frame para editá-lo — redimensione, altere texto, ajuste cores e espaçamento nos seus mockups sem passar por um loop do Agent.

### Edição de texto

Clique em qualquer elemento de texto e digite para alterá-lo diretamente. Se o texto for uma string no seu código-fonte, a edição é aplicada imediatamente.

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

### Ajustes de cor

Use o seletor de cores para ajustar as cores de texto e fundo. Digite um nome de cor como "purple" no campo de entrada ou use o conta-gotas para selecionar uma cor de qualquer lugar na sua tela.

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

### Alterações de estilo

Ajuste padding, margins e layout entre elementos usando controles intuitivos.

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

### Atualizações de imagem

Selecione imagens para trocar URLs ou fazer upload dos seus próprios arquivos com prévias instantâneas.

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

## O que você pode fazer

* **Correções rápidas de texto**: Atualize cópias, rótulos e títulos sem abrir os arquivos de código-fonte
* **Exploração de cores**: Experimente diferentes esquemas de cores clicando e ajustando — sem precisar encontrar o CSS certo
* **Ajustes de layout**: Ajuste padding, margins e espaçamento visualmente em vez de adivinhar valores em pixels
* **Troca de imagens**: Substitua imagens de placeholder por ativos reais clicando e fazendo upload
* **Iteração de design**: Ajuste rapidamente os frames do Canvas para comparar direções visuais sem viagens de ida e volta ao Agent

## Perguntas frequentes

<Accordion title="As alterações do Visual Editor custam créditos de IA?">
  Edições simples e determinísticas — alterações de texto, seleções de cor, ajustes de espaçamento — não consomem créditos de IA. Elas atualizam o código-fonte diretamente. Se o Visual Editor detectar complexidade oculta, ele roteia a alteração pelo Agent, o que usa créditos.
</Accordion>

<Accordion title="Posso editar elementos que aparecem em vários lugares?">
  Sim. Selecionar um elemento renderizado em um loop ou reutilizado em componentes destaca e atualiza todas as instâncias ao mesmo tempo.
</Accordion>

<Accordion title="Por que não consigo editar o texto em alguns elementos?">
  Elementos compostos formados por vários sub-elementos não podem ter o texto editado diretamente no Visual Editor. Peça ao Agent no chat para fazer essas alterações.
</Accordion>

<Accordion title="Como encontro o código-fonte de um elemento?">
  Clique no rótulo superior esquerdo em um elemento selecionado para ir à sua localização no código-fonte.
</Accordion>