Reference & Guides

GB Coder Developer Documentation

Learn how to build, test, and export web applications in your browser. Detailed guides covering editor workflows, terminal commands, storage persistence, and browser compatibility.

1. Getting Started

GB Coder runs entirely inside your browser without remote compute or account creation.

System Requirements & Browser Support

GB Coder is built for modern standards-compliant web browsers. For Static HTML/CSS/JS prototyping, any browser supporting ES2020 and IndexedDB works. For the Advanced WebContainer IDE, your browser must support SharedArrayBuffer and cross-origin isolation (COOP/COEP headers). Chromium-based browsers (Google Chrome, Microsoft Edge, Brave, Opera) and Mozilla Firefox provide full WebContainer support.

Launching Your First Workspace

Navigate to /app/projects to open the Projects Dashboard. From there, click "New Project" to choose between a Static HTML/CSS/JS sandbox, a React 18 template, a Vue 3 template, or a full WebContainer Node.js environment. Your project is created immediately in local memory.

2. Static HTML/CSS/JS Workflow

Instant feedback without compilation steps or local tooling.

Three-Panel Prototyping

The Static Editor organizes your workspace into HTML, CSS, and JavaScript panes with a real-time preview iframe below or beside them. Every keystroke evaluates in a debounced sandbox, updating the DOM instantly while preserving scroll position.

<!-- index.html -->
<div class="card">
  <h1 id="headline">Hello GB Coder</h1>
  <button id="counterBtn">Clicks: 0</button>
</div>

<script>
  let count = 0;
  const btn = document.getElementById('counterBtn');
  btn.addEventListener('click', () => {
    count++;
    btn.textContent = `Clicks: ${count}`;
  });
</script>

Injecting External Libraries via CDN

You can include popular libraries such as Tailwind CSS, Bootstrap, Lucide icons, or Lodash by referencing their official CDN distributions directly in the HTML head or using the External Libraries Manager.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

3. Project Creation & Template Gallery

Preconfigured starter architectures for frontend development.

Selecting a Starter Template

The Template Gallery provides optimized structures for landing pages, multi-page static websites, component prototypes, and responsive dashboards. When selected, the template assets are initialized into an isolated IndexedDB record.

Multi-File Static Organization

Beyond simple single-file experiments, GB Coder supports multi-file project trees. You can create subdirectories, split CSS into modules, and import ES modules using native browser import syntax.

4. React and Vue Starters

Component-driven workflows directly in your browser.

React 18 Component Prototyping

GB Coder supports React 18 with JSX and TypeScript. In the Advanced IDE, Vite compiles JSX on the fly. In the Static Editor, React components can also be run via Babel standalone or pre-bundled CDN modules.

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div className="p-4 bg-white rounded shadow">
      <h2 className="text-xl font-bold">React Counter: {count}</h2>
      <button 
        onClick={() => setCount(c => c + 1)}
        className="mt-2 px-4 py-2 bg-blue-600 text-white rounded"
      >
        Increment
      </button>
    </div>
  );
}

Vue 3 Single-File Components (.vue)

Vue starters support template, script setup, and scoped style blocks. The compiler transforms your SFC into reactive JavaScript and renders it in the live preview window with full reactivity.

5. Advanced IDE & WebContainer Terminal

Run real Node.js packages and development servers inside your browser tab.

The xterm.js Terminal Shell

The Advanced IDE includes an interactive shell powered by WebContainers and xterm.js. You can execute standard POSIX shell commands, run node scripts, install npm dependencies, and inspect files using standard terminal utilities.

# Install dependencies
npm install

# Run the local development server
npm run dev

# Check Node.js runtime version
node -v

Port Forwarding to Live Preview

When Vite or Express listens on a port (e.g. 5173 or 3000), WebContainers automatically captures the server event and maps the stream directly to the integrated preview iframe. No external network requests leave your computer.

6. Browser Storage, Privacy & Offline Capability

How GB Coder keeps your code private, secure, and resilient.

IndexedDB Storage Architecture

Every project file, folder hierarchy, and editor preference is stored in IndexedDB under the database name gb-coder-projects-db. Because data is stored in the browser origin, your proprietary code is never sent to external servers.

Offline Continuity & Storage Limits

Once loaded, GB Coder continues to run without active internet access. Browsers typically allocate up to several gigabytes of IndexedDB storage based on available disk space. We recommend taking regular ZIP backups of mission-critical projects.

7. Importing, Exporting & Tamper-Proof Backups

Complete data portability with zero vendor lock-in.

Exporting ZIP Archives with Integrity Hashes

From the project toolbar, select Export to download a standard ZIP archive containing your full project structure. GB Coder computes a SHA-256 hash across the archive files, ensuring your backup is exact and verifiable.

Importing Projects & Safety Validation

To restore a backup, drag and drop the ZIP archive into the Projects Dashboard or click Import Project. The import engine scans the file tree, rejects malicious path traversals (such as ../), and reconstructs the workspace in IndexedDB.

9. Troubleshooting & Browser Compatibility

Diagnosing common issues with browser environments and runtime headers.

WebContainer Disabled or Not Supported

If the WebContainer option is disabled, verify that your browser supports SharedArrayBuffer and that you are accessing GB Coder over HTTPS. Some browser extensions (such as aggressive ad blockers or script modifiers) can strip the COOP/COEP headers required for cross-origin isolation.

Clearing Browser Cache & Service Worker Reset

If you encounter stale assets after an update, perform a hard refresh (Ctrl+Shift+R or Cmd+Shift+R). GB Coder includes an automatic migration guard that cleans up outdated root-scope Service Workers.