Visual Editor

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.

​

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

​

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.

​

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.

​

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.

​

Alterações de estilo

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

​

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

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.

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.

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.

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.