> ## 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 apps — ajuste texto, cores, layout e imagens clicando, sem escrever código.
## O que é o Visual Editor?
O Visual Editor permite que você faça mudanças práticas na sua UI clicando diretamente nos elementos. Ele funciona tanto no [canvas](/pt/design/canvas) do Replit Design quanto no Preview, para que você possa editar mockups e aplicações em execução da mesma forma.
Edições simples — mudanças de texto, ajustes de cor, ajustes de espaçamento — atualizam o código-fonte diretamente sem consumir créditos de IA. Para mudanças que envolvem complexidade oculta, o Visual Editor transfere a tarefa automaticamente para o Agent.
Conceitos principais:
* **Edições determinísticas**: mudanças simples (texto, cores, espaçamento) são aplicadas diretamente ao código-fonte sem passar por um ciclo do Agent
* **Sem custo de créditos**: edições diretas não consomem créditos de IA — apenas mudanças complexas passam pelo Agent
* **Contexto duplo**: funciona de forma idêntica nos frames do canvas e no Preview
* **Sincronização com o código-fonte**: cada edição atualiza o código-fonte subjacente instantaneamente
O Visual Editor está disponível atualmente apenas em **navegadores web**. Ele não é compatível com o Mobile App ou o Desktop App.
## Como usar o Visual Editor
### Editando no canvas
Selecione a ferramenta **Edit** na barra de ferramentas e clique em qualquer elemento dentro de um frame. O elemento recebe um destaque com um chip que o identifica, e o painel do Visual Editor abre à direita mostrando as propriedades que você pode editar para aquele elemento, como conteúdo, layout, cor e borda. Ajuste-as e depois selecione **Save edits** para aplicar ou **Discard** para descartar.
As propriedades exibidas correspondem ao elemento que você seleciona: elementos de texto expõem controles de fonte, imagens expõem a origem e o upload, e contêineres expõem controles de layout.
### Editando no Preview
A mesma experiência de edição funciona na sua aplicação em execução.
Clique em qualquer elemento no Preview para começar a editar.
Edite o texto inline, ajuste cores com o seletor, mude o espaçamento com controles de estilo ou troque imagens.
Clique em salvar para atualizar o código-fonte. Mudanças simples são aplicadas diretamente sem consumir créditos de IA. Se a edição envolver complexidade, o Visual Editor envia metadados direcionados ao Agent para ajuda.
### 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 cores de texto e de fundo. Digite o nome de uma cor, como "roxo", no campo, ou use o conta-gotas para escolher uma cor de qualquer lugar na sua tela.
### Mudanças de estilo
Ajuste preenchimento interno, margens e layout entre elementos usando controles intuitivos.
### Controles de layout
O Visual Editor agrupa cada controle em seções claras para que você encontre o que precisa mais rápido: **Text**, **Layout**, **Color** e **Border**. (A seção **Image** também aparece quando você seleciona um elemento de imagem.)
A seção **Layout** é onde você ajusta como os elementos filhos se posicionam dentro de um contêiner sem passar pelo Agent. Selecione um contêiner flex, expanda o Layout, e você terá:
* **Alignment**: um seletor de pontos 3×3 para onde os itens se posicionam ao longo dos dois eixos dentro do contêiner.
* **Direction**: dois botões de seta que empilham os elementos filhos em linha ou em coluna.
* **Gap**: um valor em pixels para o espaço entre os itens. O ícone ao lado do campo de gap 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 a opção **Distribute space between items**, que empurra os elementos filhos para as bordas opostas do contêiner.
* **Outer space**: campos por lado para o espaço fora do elemento (um campo por lado, com uma alternância de link para travar os quatro lados de uma vez).
* **Inner space**: campos para o espaço dentro do elemento em cada eixo, com uma alternância de link para os dois eixos de uma vez.
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, para que o editor permaneça compacto.
### Atualizações de imagem
Selecione imagens para trocar URLs ou fazer upload dos seus próprios arquivos com prévias 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**: refine preenchimento interno, margens e espaçamento visualmente em vez de adivinhar valores em pixels
* **Troca de imagens**: substitua imagens de espaço reservado por recursos reais clicando e fazendo upload
* **Iteração de design**: ajuste rapidamente os frames do canvas para comparar direções visuais sem idas e vindas com o Agent
## Perguntas frequentes
Edições simples e determinísticas — mudanças de texto, escolhas 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 encaminha a mudança pelo Agent, que sim usa créditos.
Sim. Selecionar um elemento renderizado em um loop ou reutilizado em vários componentes destaca e atualiza todas as instâncias de uma vez.
Elementos compostos formados por vários subelementos não podem ter o texto editado diretamente no Visual Editor. Peça ao Agent no chat para fazer essas mudanças.
Clique no rótulo no canto superior esquerdo de um elemento selecionado para ir até sua localização no código-fonte.