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.
8. Workspace Search & Keyboard Navigation
Speed up navigation and code manipulation across your files.
Keyboard Shortcuts
Use standard VS Code shortcuts: Ctrl+S (Cmd+S) to save, Ctrl+P (Cmd+P) to switch files, Ctrl+F (Cmd+F) for find and replace, and Ctrl+` (Cmd+`) to toggle the terminal shell.
Global Project Search
The Workspace Search panel lets you search across all files in your project with case matching, whole-word filtering, and regular expressions.
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.