Visual Editor

​

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

​

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.

​

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

As mudanças do Visual Editor consomem créditos de IA?

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.

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 de uma vez.

Por que não consigo editar o texto em alguns elementos?

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.

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.