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 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 quanto na Prévia, para que você possa editar mockups e aplicações 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 automaticamente para o Agent. 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 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 Canvas de Design e na Prévia
- Sincronização com 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 App Móvel ou App Desktop.
Como usar o Editor Visual
Editando na Prévia
Clique em qualquer elemento no 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.Faça sua edição
Edite texto inline, ajuste cores com o seletor de cores, mude o espaçamento com controles de estilo ou troque imagens. Use o painel do editor no chat para propriedades adicionais como padding, margin e mais.
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, mude 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 cores
Use o seletor de cores para ajustar cores de texto e de fundo. Digite um nome de cor como “roxo” 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, margens 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 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 ativos reais clicando e fazendo upload
- Iteração de design: Ajuste rapidamente frames do Canvas para comparar direções visuais sem round-trips com o Agent
Perguntas frequentes
As alterações do Editor Visual custam créditos de IA?
As alterações do Editor Visual custam créditos de IA?
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, roteia a alteração pelo Agent, o que usa créditos.
Posso editar elementos que aparecem em vários lugares?
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 de uma vez.
Por que não consigo editar o texto em alguns elementos?
Por que não consigo editar o texto em alguns elementos?
Elementos compostos formados por múltiplos sub-elementos não podem ser editados diretamente como texto no Editor Visual. Peça ao Agent no chat para fazer essas alterações.
Como encontro o código-fonte de um elemento?
Como encontro o código-fonte de um elemento?
Clique no rótulo no canto superior esquerdo de um elemento selecionado para ir à sua localização no código-fonte.