1. Aan de Slag
GB Coder draait volledig in je browser zonder externe servers of accounts.
Systeemvereisten & Browsers
Voor de Statische Editor is elke moderne browser met IndexedDB-ondersteuning geschikt. Voor de Geavanceerde WebContainer IDE is SharedArrayBuffer en COOP/COEP-isolatie vereist (Chrome, Edge, Brave, Firefox).
Je Eerste Project Starten
Ga naar /app/projects en klik op "New Project" om direct een statisch project, React-template of WebContainer-omgeving te openen.
2. Statische HTML/CSS/JS Workflow
Direct visueel resultaat zonder compilatiestappen.
Drie-Panelen Ontwerp
Schrijf HTML, style met CSS en programmeer in JavaScript. De interne preview wordt synchroon bijgewerkt.
<!-- index.html -->
<div class="card">
<h1>Hallo GB Coder</h1>
<button id="btn">Kliks: 0</button>
</div>
<script>
let n = 0;
document.getElementById('btn').onclick = () => { n++; document.getElementById('btn').textContent = `Kliks: ${n}`; };
</script>CDN-Bibliotheken Toevoegen
Voeg eenvoudig Tailwind CSS, Bootstrap of iconensets toe via betrouwbare CDN-links.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />3. Templates & Projectcreatie
Vooraf geconfigureerde starters voor moderne webontwikkeling.
Een Starter Kiezen
Kies uit templates voor landingspagina’s, dashboardinterfaces en componentprototypes.
Structuur met Meerdere Bestanden
Ondersteunt submappen, gescheiden stijlbladen en ES-modules.
4. React en Vue Ontwikkeling
Componentgedreven bouwen in de browser.
React 18 Componenten
Bouw React-interfaces met volledige JSX- en TypeScript-ondersteuning.
import React, { useState } from 'react';
export default function App() {
const [c, setC] = useState(0);
return <button onClick={() => setC(c + 1)}>Clicks: {c}</button>;
}Vue 3 Single-File Components
Schrijf .vue-bestanden met template, script setup en scoped styles met directe in-browser compilatie.
5. WebContainer IDE & Terminal
Draai echte Node.js-opdrachten en Vite-servers.
De xterm.js Terminal
Voer npm install uit en start ontwikkelservers rechtstreeks in je browsertabblad.
npm install
npm run devPoortkoppeling naar Preview
Lokale poorten worden automatisch gekoppeld aan de interne voorvertoning.
6. Lokale Opslag & Privacy
Veilige lokale gegevensopslag in IndexedDB.
IndexedDB Architectuur
Alle bestanden blijven lokaal opgeslagen in gb-coder-projects-db.
Offline Werken
Blijf productief zonder internetverbinding.
7. Back-ups & ZIP Exporteren
Eenvoudig exporteren en herstellen van projecten.
ZIP met SHA-256 Hash
Exporteer complete projecten naar ZIP-archieven met integriteitscontrole.
Veilig Importeren
Sleep ZIP-bestanden naar het dashboard om projecten te herstellen.
8. Zoeken & Sneltoetsen
Sneller navigeren door je bestanden.
Sneltoetsen
Gebruik Ctrl+S om op te slaan, Ctrl+P voor snelle bestandswisseling en Ctrl+` voor de terminal.
Projectbrede Zoekfunctie
Zoek en vervang in alle bestanden tegelijk.
9. Probleemoplossing & Compatibiliteit
Oplossingen voor veelvoorkomende situaties.
WebContainer Uitgeschakeld
Controleer of SharedArrayBuffer beschikbaar is en of COOP/COEP-headers actief zijn.
Cache Verversen
Gebruik Ctrl+Shift+R voor een geforceerde herlaadbeurt bij verouderde assets.