O editor: code, visual, theme
Depois que o app está gerado, você cai no editor. Tem 3 abas + uma topbar com ações importantes.
Aba Preview
Onde o app gerado executa. É o mesmo iframe que o usuário final vê. Atualiza automaticamente conforme você edita.
Atalhos:
- Cmd+R — recarregar app (reset de estado)
- F11 (ou botão expand) — tela cheia, esconde sidebar e topbar
Aba Código
Editor de código TSX completo, com syntax highlight (Prism), busca (Cmd+F) e auto-save.
Você pode editar o código TSX manualmente — não precisa pedir pra IA toda vez. Mudou uma cor? Salve Cmd+S e o preview reflete na hora.
Atalhos no editor:
- Cmd+S — salvar versão (cria snapshot no histórico)
- Cmd+F — buscar dentro do código
- Cmd+Z / Cmd+Shift+Z — desfazer / refazer
- Tab — indenta seleção
Modo Visual
Botão [path:Visual ✏️] no topo. Liga um overlay no preview que permite clicar em textos/cores/layouts e ajustar sem mexer no código. Bom pra acertos finos sem precisar entender JSX.
Dados conectados
Ícone de banco de dados (🗄️) no topo. Abre painel lateral com:
- Tabelas do app detectadas via parse do código (
app_tablename_xxxx) - Conta de linhas, schema (colunas + tipos)
- Botão "Limpar dados" pra zerar tabela durante testes
Não tem undo. Use só em apps de teste ou quando você sabe que os dados não importam.
Histórico de versões
Cada Cmd+S cria uma versão. Acessível pelo ícone de relógio no topo. Clique numa versão antiga pra carregar — não substitui, só carrega no editor (você pode salvar como nova versão pra "voltar de verdade").
Publicar
Botão lima [path:Publicar 🚀] no topo. Cria um subdomínio público:
https://seu-slug.beadev.ai
Acessível sem login (mas dados isolados por usuário se você usar auth.currentUser() no app — ver docs de auth).
O slug do app vira o sub-domínio direto. Se você renomear o app depois, o sub-domínio antigo para de funcionar — sub-domain é gerado a partir do slug atual.