Editor Visual

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

​

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.

​

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

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, ele roteia a alteração pelo Agente, que utiliza créditos.

Posso editar elementos que aparecem em vários lugares?

Sim. Selecionar um elemento renderizado em um loop ou reutilizado em vários 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 múltiplos subelementos não podem ser editados diretamente no Editor Visual. Peça ao Agente no chat para fazer essas alterações.

Como encontro o código-fonte de um elemento?

Clique no rótulo no canto superior esquerdo de um elemento selecionado para ir até sua localização no código-fonte.