Primeiros passos

O editor: code, visual, theme

O editor

Cada app tem 3 modos de edição na barra superior:

📝 Editar (code)

Editor de código com syntax highlight. Você modifica o JSX/JS direto. Cmd+S salva.

Use quando:

  • Precisa ajustar lógica que a IA não pegou
  • Quer renomear variáveis, refatorar
  • Vai colar um snippet que achou em algum lugar

🎨 Visual

Modo "click to edit". Clica num texto, cor ou imagem e edita inline:

  • Cor de fundo, texto, borda
  • Tamanho de fonte
  • Padding/margin
  • Texto literal (substituir "Bem-vindo" por "Olá Maria")

Salva como visualEdits separadas, sem mexer no código original.

🎨 Tema (Theme editor)

Edita as variáveis CSS de tema do app:

  • Cores primária, secundária, accent
  • Border radius
  • Fundo, texto

Apenas as variáveis — afeta tudo que usa hsl(var(--primary)) etc.

Versionamento

Cada save vira uma versão. No topo, "X versões". Você pode reverter pra qualquer versão anterior.

Atalhos úteis

  • Cmd+S salvar
  • Cmd+Z / Cmd+Shift+Z undo/redo no editor
  • Cmd+/ comentar linha
  • Esc fechar modais