Editor Visual

Clique em elementos para editar texto, cores, espaçamento, fontes e muito mais. Ideal para pequenos ajustes; use o chat para mudanças maiores.

O Editor Visual permite alterar a interface do seu app clicando nos elementos e editando suas propriedades diretamente. Ative o modo Visual na barra de ferramentas do builder para começar.

Como funciona

1. Alterne para o modo Visual — é um submodo de Preview na barra de ferramentas (a barra tem dois segmentos: Preview e Admin)
2. Passe o mouse sobre os elementos no preview — eles ficam destacados com uma sobreposição
3. Clique em um elemento para selecioná-lo
4. Edite as propriedades no painel lateral: texto, cores, espaçamento, fontes, bordas, imagens, efeitos

As alterações são aplicadas instantaneamente no preview e gravadas nos seus arquivos de código-fonte. Use o botão Reset last edit na barra lateral para reverter a última alteração de propriedade.

O que posso editar?

• Texto — Edite o conteúdo diretamente
• Tamanho da fonte — xs, sm, base, lg, xl, etc.
• Peso da fonte — thin, light, normal, medium, semibold, bold, extrabold
• Família da fonte — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
• Estilo da fonte — Alternância de itálico
• Alinhamento do texto — left, center, right, justify
• Cor do texto — Qualquer cor do Tailwind
• Cor de fundo — Qualquer cor do Tailwind
• Espaçamento — Padding e margin em todos os lados
• Borda — Largura, cor e raio (disponível em elementos de contêiner sem conteúdo de texto)
• Imagem — Substitua por uma foto do banco de imagens ou faça upload da sua própria imagem (aplica-se a elementos img e imagens de fundo)
• Efeitos — Sombra e opacidade

Desfazer / Refazer

Use Cmd+Z (Mac) ou Ctrl+Z (Windows) para desfazer alterações. Cmd+Shift+Z / Ctrl+Shift+Z para refazer.

Paleta da página

O Editor Visual inspeciona sua página e exibe todas as cores do Tailwind e propriedades CSS personalizadas já utilizadas. Ao abrir o seletor de cores do elemento selecionado, você pode escolher a partir desta paleta da página para manter consistência com seu sistema de design existente, sem precisar adivinhar códigos hexadecimais.

Pergunte à IA sobre um elemento selecionado

Para ajustes que o editor de propriedades não consegue expressar, digite um prompt curto no campo Ask AI na parte inferior da barra lateral. O elemento selecionado é passado como contexto, então prompts como “deixe este card mais compacto” ou “adicione um estado hover com uma elevação sutil” funcionam sem que você precise descrever qual elemento está se referindo.

Elementos Estáticos vs. Dinâmicos

O Editor Visual funciona melhor em elementos estáticos, onde o className e o conteúdo de texto são literais de string no JSX. Para elementos dinâmicos (classNames computados, renderização condicional, expressões), o editor automaticamente recorre ao chat com IA usando um prompt estruturado.

Quando devo usar o Editor Visual?

O Editor Visual é ideal para ajustes pequenos e rápidos:

• Corrigir um erro de digitação
• Ajustar espaçamento
• Alterar uma cor
• Atualizar o texto de um botão

Para mudanças maiores (novas seções, reestruturação de layout, novos recursos), use o chat com IA.

Como salvo as alterações?

As alterações são salvas automaticamente ao editar uma propriedade. O arquivo é gravado no seu runtime e a mudança é registrada no seu histórico de versões no próximo turno do builder que fizer commit.

Perguntas Frequentes

Posso desfazer edições visuais?

Sim. Use Cmd+Z / Ctrl+Z para desfazer. O Editor Visual mantém sua própria pilha de desfazer/refazer.

Por que consigo editar alguns elementos, mas não outros?

Atributos de texto estático e className podem ser editados diretamente. Valores dinâmicos ou computados (template literals, expressões ternárias, chamadas de função) recorrem automaticamente ao chat com IA.

Quando devo usar o Editor Visual em vez do chat com IA?

Ferramenta	Ideal para
Visual Editor	Alterações rápidas de propriedades (texto, cores, espaçamento) por clique
AI Chat	Mudanças complexas, novos recursos, depuração

Estas são as únicas duas formas de alterar seu app — não há editor de código. Veja Editando e Acessando Seu Código.