1. Primeiros Passos
O GB Coder roda totalmente no seu navegador sem servidores remotos.
Requisitos de Sistema e Navegadores
O editor estático funciona em qualquer navegador moderno com IndexedDB e ES2020. A IDE avançada WebContainer requer SharedArrayBuffer e isolamento COOP/COEP (Chrome, Edge, Brave, Firefox).
Criando seu Primeiro Projeto
Acesse /app/projects para abrir o painel e selecione entre projetos estáticos, React, Vue ou ambiente WebContainer completo.
2. Prototipagem Estática HTML/CSS/JS
Feedback visual imediato sem processos de compilação.
Edição em Três Painéis
Escreva HTML, aplique CSS e programe em JavaScript com atualização do DOM em tempo real.
<!-- index.html -->
<div class="card">
<h1>Olá GB Coder</h1>
<button id="btn">Cliques: 0</button>
</div>
<script>
let n = 0;
document.getElementById('btn').onclick = () => { n++; document.getElementById('btn').textContent = `Cliques: ${n}`; };
</script>Inclusão de Bibliotecas CDN
Inclua Tailwind CSS, Bootstrap ou React diretamente pelos links de CDN.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />3. Modelos e Galeria de Projetos
Estruturas prontas para agilizar o desenvolvimento.
Escolhendo um Modelo
Modelos para landing pages, protótipos de componentes e painéis administrativos.
Estrutura Multi-Arquivos
Suporte a pastas internas, estilos modulares e módulos ES nativos.
4. Desenvolvimento com React e Vue
Desenvolvimento baseado em componentes no navegador.
Componentes React 18
Crie componentes com JSX, TypeScript e recarregamento instantâneo.
import React, { useState } from 'react';
export default function App() {
const [c, setC] = useState(0);
return <button onClick={() => setC(c + 1)}>Cliques: {c}</button>;
}Componentes Vue 3 (.vue)
Escreva arquivos .vue completos com template, script setup e estilos encapsulados.
5. IDE Avançada e Terminal WebContainer
Ambiente Node.js real e servidores de desenvolvimento na sua aba.
Terminal xterm.js Interativo
Execute npm install e scripts do package.json diretamente no navegador.
npm install
npm run devEncaminhamento de Porta para o Preview
Servidores locais conectam-se automaticamente à janela de pré-visualização interna.
6. Armazenamento Local e Privacidade
Seus dados protegidos no IndexedDB do seu dispositivo.
Arquitetura IndexedDB
Todos os arquivos são gravados no banco local gb-coder-projects-db.
Continuidade Offline
Continue programando normalmente mesmo sem acesso à internet.
7. Backups e Exportação ZIP
Portabilidade e segurança sem dependências proprietárias.
Exportação ZIP com Hash SHA-256
Baixe seus projetos em arquivos ZIP padronizados com controle de integridade.
Importação Segura
Arraste arquivos ZIP para o painel de projetos para restaurá-los.
8. Busca no Projeto e Atalhos
Agilidade para navegar e editar seus arquivos.
Principais Atalhos de Teclado
Ctrl+S para salvar, Ctrl+P para trocar de arquivo e Ctrl+` para o terminal.
Busca Global em Múltiplos Arquivos
Pesquise e substitua termos com suporte a expressões regulares.
9. Resolução de Problemas e Compatibilidade
Diagnóstico rápido de problemas comuns.
WebContainer Desativado
Verifique se você está em HTTPS e se os cabeçalhos COOP/COEP estão ativos.
Limpeza de Cache
Pressione Ctrl+Shift+R para forçar a atualização de arquivos estáticos.