1. React 18 Starter Architecture in the Browser
When you initialize a React 18 project from the Template Gallery, GB Coder populates a standard project directory containing package.json, vite.config.ts, and standard src/App.tsx source files. You can immediately edit TSX files with complete Monaco IntelliSense support.
// src/App.tsx
import React, { useState } from 'react';
export function App() {
const [metrics, setMetrics] = useState({ requests: 120, latency: 42 });
return (
<main className="container mx-auto p-6">
<h1 className="text-2xl font-bold text-gray-900">Application Dashboard</h1>
<div className="grid grid-cols-2 gap-4 mt-4">
<div className="bg-white p-4 rounded shadow border">
<p className="text-sm text-gray-500">Processed Requests</p>
<p className="text-3xl font-semibold text-indigo-600">{metrics.requests}</p>
</div>
<div className="bg-white p-4 rounded shadow border">
<p className="text-sm text-gray-500">Average Latency (ms)</p>
<p className="text-3xl font-semibold text-emerald-600">{metrics.latency}ms</p>
</div>
</div>
</main>
);
}2. Vue 3 Single File Component (SFC) Compilation
Vue 3 starters compile .vue files directly in browser memory using the official @vue/compiler-sfc engine. You can leverage the Composition API with <script setup>, scoped CSS styles, and reactive state without configuring external loaders.
<!-- src/App.vue -->
<template>
<div class="vue-container">
<h2>{{ title }}</h2>
<p>Current count: <strong>{{ count }}</strong></p>
<button @click="increment" class="btn">Add Click</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const title = ref('Vue 3 in GB Coder');
const count = ref(0);
const increment = () => count.value++;
</script>
<style scoped>
.vue-container {
padding: 1.5rem;
border: 1px solid #e6dfd8;
border-radius: 8px;
background: #ffffff;
}
.btn {
background: #cc785c;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
}
</style>3. Executing Commands in the xterm.js Shell
Open the integrated terminal in the Advanced IDE by pressing Ctrl+`. You can run npm install to pull new utility packages from the public npm registry, run custom scripts, or rebuild your Vite production bundles seamlessly inside the WebContainer micro-OS.