Hoe GB Coder werkt: complete gids voor de browser-IDE

GB Coder kun je het beste zien als twee omgevingen die één schil delen. De Statische Editor is een gerichte werkbank voor HTML, CSS en JavaScript: je typt, de preview wordt bijgewerkt en er zit geen buildstap tussen. De Geavanceerde IDE draait een echte Node.js-toolchain via WebContainer, een op WebAssembly gebaseerde runtime die binnen de browsertab draait. Beide modi gebruiken hetzelfde projectdashboard, dezelfde Monaco-editor, bestandsverkenner, previewpaneel en lokale opslaglaag, zodat wisselen aanvoelt als een andere tool kiezen en niet als een ander product. Kies de statische modus voor een landingspagina, een CSS-experiment, een lesdemo of een klein script. Kies de geavanceerde modus wanneer je npm-pakketten, een Vite-ontwikkelserver, JSX-compilatie of een terminal nodig hebt. De geavanceerde runtime vereist een moderne browser met SharedArrayBuffer en cross-origin isolation; de huidige Chromium-browsers en Firefox zijn de praktische keuzes. Er draait niets op een externe virtuele machine.

Het startpunt is het Projectdashboard. Bij Nieuw Project kies je een leeg statisch sandbox-project, een React 18-starter, een Vue 3-starter of een Node.js-omgeving met WebContainer. De sjablonengalerij voegt landingspagina’s, dashboards, hulpprogramma’s en componentprototypes toe, elk met een verstandige bestandsstructuur die al klaarstaat. Een nieuwe werkruimte wordt onmiddellijk aangemaakt in IndexedDB, de transactionele opslaglaag van de browser, zodat de eerste preview beschikbaar is zonder download, account of rondreis naar een server. Projectnamen en mappen beheer je zelf, en elke werkruimte staat los van de andere. Bestaand werk komt binnen via een ZIP-archief of een GitHub-repository; beide gaan door een controle voordat bestanden worden toegepast. Heb je het product nog nooit gebruikt, dan is dit de hele onboarding: dashboard openen, startpunt kiezen en beginnen met bewerken.

De Statische Editor verdeelt de werkruimte in panelen voor HTML, CSS en JavaScript. GB Coder wikkelt de opmaak in een document dat aan de standaarden voldoet, dus een fragment is genoeg om te beginnen; je hoeft geen doctype-sjabloon te onderhouden. Wijzigingen worden geëvalueerd in een afgeschermde iframe met een korte wachttijd, zodat een snel typtempo de renderer niet overspoelt en het toch direct aanvoelt. Een virtuele console vangt log-, warn-, error- en info-uitvoer op naast de preview, waardoor je een klein script kunt debuggen zonder de ontwikkelaarstools te openen. Externe bibliotheken voeg je toe via een CDN of via de Externe Bibliotheken-beheerder, met bekende opties zoals Tailwind, Bootstrap en iconensets. Statische projecten kunnen ook uitgroeien tot meerdere bestanden en mappen met native ES-module-imports. De afweging is bewust: deze modus installeert geen pakketten en bundelt niets, dus hij is ideaal voor leren, visuele experimenten en demo’s zonder dependencies, niet voor een grote framework-applicatie.

Onder de interface zit Monaco, de opensource-editor-engine achter VS Code. Die afkomst zie je terug in de details: IntelliSense-aanvullingen, inline typedocumentatie, syntaxvalidatie, haakjesmatchen, bewerken met meerdere cursors en configureerbare sneltoetsen. TypeScript, JavaScript, HTML, CSS en JSON krijgen taaldiensten, zodat fouten worden gemarkeerd terwijl je typt en niet pas na een build. De editor ondersteunt ook een gesplitste weergave en een diff-viewer, handig bij het vergelijken van een revisie of het beoordelen van een AI-voorstel. Rond de editor voegt GB Coder de hulpmiddelen toe die normaal aparte tools vereisen: zoeken en vervangen in het hele project met reguliere expressies en hoofdlettergevoeligheid, opmaak op basis van Prettier voor de belangrijkste webtalen, een commandopalet en een doorzoekbare sneltoetsenlijst. Automatisch opslaan loopt continu, met een statusindicator zodat je weet hoe het huidige bestand ervoor staat. Los zijn het kleine gemakken. Samen nemen ze het wisselen van context weg waardoor browsereditors beperkt aanvoelen.

De Geavanceerde IDE is het onderdeel dat mensen verrast. WebContainer levert een klein besturingssysteem dat naar WebAssembly is gecompileerd en draait echte Node.js-binary’s in de pagina. Dat betekent dat npm install echte pakketten resolveert, npx-scripts worden uitgevoerd en een Vite-ontwikkelserver start op een lokale poort die naar de ingebouwde preview wordt doorgestuurd. De terminal is een volledige xterm.js-shell met ANSI-opmaak en opdrachtgeschiedenis, geen gesimuleerd uitvoervenster. Omdat de runtime lokaal in de tab draait, verbruiken pakketinstallaties en bestandsbewerkingen geen externe container. De beperkingen zijn net zo echt: de functie leunt op SharedArrayBuffer en cross-origin isolation, het geheugen wordt door de browser begrensd en native binary’s of Docker-images vallen buiten de scope. Voor een React- of Vue-applicatie met gewone npm-dependencies is de werkwijze echter dezelfde als op een laptop. Het verschil is dat de omgeving met het project meekomt in plaats van op elke machine opnieuw te worden opgebouwd.

npm install
npm run dev
# Vite print een lokale URL; GB Coder stuurt die poort door naar de preview

Elk project heeft een preview, en die preview is meer dan een statische miniatuur. Hij draait in een afgeschermde iframe, kan in een eigen venster worden losgekoppeld voor een opstelling met twee monitoren en biedt viewportformaten voor telefoon, tablet en desktop. Een QR-code opent de preview op een echte telefoon, wat layoutproblemen aan het licht brengt die het aanpassen van een desktopvenster mist. Voor snelle feedback kan GB Coder een eenvoudig project met één bestand in een deel-URL coderen via het URL-fragment. Dat fragment bereikt nooit een server, dus de link is zelfstandig; de keerzijde is een praktische groottelimiet, en projecten met meerdere bestanden worden geweigerd in plaats van afgekapt. Die projecten deel je als ZIP-archief of via de sandbox-workflow. Het onderscheid is belangrijk: een deel-link is een gemak voor een kleine demo, terwijl een archief of repository de duurzame overdracht voor echt werk is.

AI in GB Coder is optioneel en bewust beoordeelbaar. GB Assist is een chatpaneel voor vragen, uitleg bij fouten en geplande wijzigingen; het kan bestandsbewerkingen voorstellen, maar die worden als diff getoond voordat er iets wordt toegepast. De assistent vereist dat je een provider en model verbindt, en prompts plus geselecteerde code worden naar die provider gestuurd wanneer je hem gebruikt. Build with AI gaat de andere kant op: je beschrijft een interface in gewone taal en krijgt een gestructureerd HTML-, CSS- en JavaScript-project terug, gevalideerd voordat het de inhoud van de editor vervangt. Screenshot to Code accepteert een afbeelding, ook een die je vanuit een knipselprogramma plakt, en genereert een eerste versie van de opmaak en stijlen. Spraakbesturing gebruikt de spraakherkenning van de browser voor opdrachten zoals uitvoeren, formatteren, uitleggen, repareren, bouwen, exporteren, een paneel openen of van bestand wisselen; Chrome en Edge bieden momenteel de beste ondersteuning, en een tekstvak voor getypte opdrachten blijft beschikbaar. Bij alle vier functies geldt hetzelfde patroon: genereren gaat snel, maar accepteren is aan jou.

Projecten worden automatisch opgeslagen in IndexedDB, maar automatisch opslaan is geen versiegeschiedenis. Snapshots maken benoemde controlepunten van de huidige projectstatus, en de diff-viewer laat zien wat er is veranderd voordat je er een herstelt. Voor werk dat de browser moet verlaten, verpakt ZIP-export de volledige mappenstructuur en registreert een integriteitshash; import accepteert een gesleept archief en toont een structurele preview voordat bestanden worden geschreven. GitHub-synchronisatie sluit de cirkel met een tweerichtingsroute: verbind met een persoonlijke toegangstoken, kies een bestaande repository of maak er een en push of pull vervolgens. Pushes worden als één atomische commit opgebouwd, ongewijzigde bestanden worden overgeslagen en een branch die ondertussen is verschoven levert een conflict op in plaats van stil andermans werk te overschrijven. Opgehaalde bestanden gaan door dezelfde controle-en-toepassen-stroom als een archief. Tokens leven standaard alleen in de sessie; ze op het apparaat onthouden is een opt-in die ze versleuteld opslaat, en GitHub-verkeer gaat rechtstreeks van de browser naar api.github.com. LadeStack hoeft de credential niet te bewaren.

Een project is pas af wanneer iemand het kan openen. GB Coder ondersteunt deployment met één klik naar Vercel en Netlify met het token van je eigen account. De dienst herkent of het project een statische site of een Vite-applicatie is, stuurt de juiste bestanden en geeft een live URL terug. Omdat het token van jou is, komt de deployment in jouw account terecht en beheer je hem daar verder. Statische projecten kun je ook als ZIP exporteren en naar elke host uploaden, terwijl GitHub-synchronisatie de werkruimte verbindt met een repository die een CI-pijplijn kan aansturen. Geen van deze routes sluit het project op in GB Coder: de bestanden blijven standaard HTML, CSS, JavaScript en configuratie. Die overdraagbaarheid is het punt. De browser is waar het werk gebeurt, niet waar het gevangen zit.

GB Coder is gratis, vereist geen login of registratie en bevat geen advertenties. De standaardhouding is local-first: projecten staan in de browseropslag en de applicatie heeft geen LadeStack-account nodig om ze te openen. Gegevens verlaten het apparaat alleen wanneer je een verbonden mogelijkheid kiest, zoals een AI-provider, GitHub-synchronisatie, deployment of een externe CDN in je eigen code. Die nuance is belangrijk, want local-first betekent niet alleen offline. Het product past bij lerenden die HTML en CSS meteen willen zien reageren, docenten die een klaslokaal zonder installatie nodig hebben, ontwikkelaars die een interface prototypen voordat ze die aan een repository toevertrouwen, en iedereen die snel een klein hulpprogramma of demo online wil zetten. Het is minder geschikt voor enorme monorepo’s, native toolchains, Docker-services of organisaties die browseropslag verbieden. AI-gebruik kan kosten van je gekozen provider met zich meebrengen, en deployment valt onder je Vercel- of Netlify-abonnement. De applicatie zelf blijft gratis; de externe diensten kies je zelf.

Een betrouwbare routine ziet er zo uit. Open het Projectdashboard en maak een werkruimte in de modus die bij de taak past. Bouw eerst de kleinste zichtbare versie en gebruik daarna de console en preview om die te corrigeren. Voeg pas pakketten toe wanneer de statische editor het echt niet kan oplossen. Test op telefoonbreedte of scan de QR-code voordat je desktopdetails gaat verfijnen. Maak bij elke betekenisvolle mijlpaal een snapshot. Push naar GitHub of exporteer een ZIP wanneer het werk een duurzame plek nodig heeft. Deploy wanneer er iets is dat het tonen waard is. Geen van deze stappen vereist een lokale installatie, en elke stap is op een andere machine te herhalen met dezelfde browseropslag of een nieuwe clone. Ben je nieuw met het product, begin dan met een leeg statisch project en één kop. De eerste preview staat op het scherm voordat de installatie die je vroeger nodig had klaar zou zijn. Het Projectdashboard vind je op /app/projects.