> ## 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.
# Editor Visual
> 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 Editor Visual?
O Editor Visual permite que você faça alterações práticas na sua interface clicando diretamente nos elementos. Ele funciona tanto no [Canvas de Design](/pt/learn/design/canvas) quanto na Pré-visualização, para que você possa editar maquetes e aplicativos em execução da mesma forma.
Edições simples — alterações de texto, ajustes de cores, ajustes de espaçamento — atualizam o código-fonte diretamente sem consumir créditos de IA. Para alterações que envolvem complexidade oculta, o Editor Visual passa o controle ao Agente automaticamente.
Conceitos-chave:
* **Edições determinísticas**: Alterações simples (texto, cores, espaçamento) são aplicadas diretamente ao código-fonte sem um loop do Agente
* **Sem custo de crédito**: Edições diretas não consomem créditos de IA — apenas alterações complexas são roteadas pelo Agente
* **Contexto duplo**: Funciona de forma idêntica em frames do Canvas de Design e na Pré-visualização
* **Sincronização com o código-fonte**: Cada edição atualiza o código-fonte subjacente instantaneamente
O Editor Visual está disponível atualmente apenas em **navegadores web**. Não é compatível com o Aplicativo Móvel ou o Aplicativo Desktop.
## Como usar o Editor Visual
### Editando na Pré-visualização
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 em tempo real.
Clique em qualquer elemento na Pré-visualização para começar a editar.
Edite o texto diretamente, ajuste cores com o seletor, altere o espaçamento com controles de estilo ou troque imagens. Use o painel do editor no chat para propriedades adicionais como padding, margem e mais.
Clique em salvar para atualizar o código-fonte. Alterações simples são aplicadas diretamente sem consumir créditos de IA. Se a edição envolver complexidade, o Editor Visual envia metadados direcionados ao Agente para assistência.
### Editando no Canvas
A mesma experiência de edição funciona em frames do Canvas de Design. Clique em qualquer elemento dentro de um frame para editá-lo — redimensione, altere texto, ajuste cores e espaçamento nas suas maquetes sem passar por um loop do Agente.
### 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.
### Ajustes de cor
Use o seletor de cores para ajustar as cores do texto e do fundo. Digite um nome de cor como "purple" no campo de entrada ou use o conta-gotas para selecionar uma cor em qualquer lugar da sua tela.
### Alterações de estilo
Ajuste padding, margens e layout entre elementos usando controles intuitivos.
### Controles de layout
O Editor Visual agrupa todos os controles em seções claras para que você encontre o que precisa mais rapidamente: **Texto**, **Layout**, **Cor** e **Borda**. (A seção **Imagem** também aparece quando você seleciona um elemento de imagem.)
A seção **Layout** é onde você ajusta como os filhos ficam posicionados dentro de um contêiner sem passar pelo Agente. Selecione um contêiner flex, expanda Layout e você terá:
* **Alinhamento**: Um seletor de pontos 3×3 para onde os itens ficam ao longo de ambos os eixos dentro do contêiner.
* **Direção**: Dois botões de seta que empilham os filhos em linha ou coluna.
* **Espaço entre**: Um valor em pixels para o espaço entre os itens. O ícone ao lado da entrada de espaço muda para corresponder à direção atual, para que você sempre saiba se está ajustando o espaçamento horizontal ou vertical. Ao lado dele, um ícone de seta alterna **Distribuir espaço entre os itens**, que empurra os filhos para as extremidades opostas do contêiner.
* **Espaço externo**: Entradas por lado para o espaço fora do elemento (uma entrada por lado, com um alternador de link para travar todos os quatro lados ao mesmo tempo).
* **Espaço interno**: Entradas para o espaço dentro do elemento ao longo de cada eixo, com um alternador de link para ambos os eixos ao mesmo tempo.
A seção Layout só aparece quando pelo menos um controle de layout se aplica ao elemento selecionado. Nós de texto simples sem propriedades de espaçamento ou layout ocultam a seção completamente, mantendo o editor compacto.
### Atualizações de imagem
Selecione imagens para trocar URLs ou fazer upload dos seus próprios arquivos com pré-visualizações instantâneas.
## O que você pode fazer
* **Correções rápidas de texto**: Atualize textos, rótulos e títulos sem abrir 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, margens e espaçamento visualmente em vez de adivinhar valores em pixels
* **Troca de imagens**: Substitua imagens de placeholder por assets reais clicando e fazendo upload
* **Iteração de design**: Ajuste rapidamente os frames do Canvas para comparar direções visuais sem round-trips do Agente
## Perguntas frequentes
Edições simples e determinísticas — alterações de texto, seleção de cores, ajustes de espaçamento — não consomem créditos de IA. Elas atualizam o código-fonte diretamente. Se o Editor Visual detectar complexidade oculta, ele roteia a alteração pelo Agente, que utiliza créditos.
Sim. Selecionar um elemento renderizado em um loop ou reutilizado em vários componentes destaca e atualiza todas as instâncias ao mesmo tempo.
Elementos compostos formados por múltiplos subelementos não podem ser editados diretamente no Editor Visual. Peça ao Agente no chat para fazer essas alterações.
Clique no rótulo no canto superior esquerdo de um elemento selecionado para ir até sua localização no código-fonte.