Editor Visual

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

O Editor Visual permite que você altere a interface do seu app clicando nos elementos e editando suas propriedades diretamente. Alterne para o modo Visual na barra de ferramentas do builder para ativá-lo.

Como funciona

Alterne para o modo Visual na barra de ferramentas (ao lado de Preview, Code e Dashboard)
Passe o cursor sobre os elementos na pré-visualização — eles são destacados com uma sobreposição
Clique em um elemento para selecioná-lo
Edite as propriedades no painel lateral: texto, cores, espaçamento, fontes, bordas, imagens, efeitos

As alterações são aplicadas instantaneamente na pré-visualização e salvas nos seus arquivos de origem. 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 de 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 customizadas já em uso. Ao abrir o seletor de cores para o 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 hex.

Perguntar à 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 deseja alterar.

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 recorre automaticamente ao chat de IA com 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 o espaçamento
Alterar uma cor
Atualizar o texto de um botão

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

Como salvo as alterações?

As alterações são salvas automaticamente quando você edita uma propriedade. O arquivo é gravado no seu runtime e commitado quando a IA ou você criam um 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 de IA.

Qual é a diferença entre o Editor Visual e o Editor de Código?

Ferramenta	Ideal para
Visual Editor	Alterações rápidas de propriedades (texto, cores, espaçamento) clicando nos elementos
Code Editor	Edição completa do código-fonte com VS Code
AI Chat	Mudanças complexas, novas funcionalidades, depuração