1. Prise en Main
GB Coder s’exécute entièrement dans votre navigateur sans serveur distant.
Prérequis Système et Navigateurs
L’éditeur statique fonctionne sur tout navigateur moderne prenant en charge IndexedDB et ES2020. L’IDE avancé WebContainer nécessite SharedArrayBuffer et l’isolation cross-origin (Chrome, Edge, Brave, Firefox).
Créer votre Premier Espace de Travail
Rendez-vous sur /app/projects pour accéder au tableau de bord et lancer un nouveau projet statique, React, Vue ou WebContainer.
2. Prototypage Statique HTML/CSS/JS
Rendu instantané sans étape de compilation.
Édition en Trois Volets
Écrivez du HTML, appliquez du CSS et programmez en JavaScript avec mise à jour immédiate de l’aperçu.
<!-- index.html -->
<div class="card">
<h1>Bonjour GB Coder</h1>
<button id="btn">Clics : 0</button>
</div>
<script>
let n = 0;
document.getElementById('btn').onclick = () => { n++; document.getElementById('btn').textContent = `Clics : ${n}`; };
</script>Ajout de Bibliothèques CDN
Intégrez facilement Tailwind CSS, Bootstrap ou des bibliothèques d’icônes via des liens CDN fiables.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />3. Modèles de Projets et Galerie
Structures prêtes à l’emploi pour démarrer rapidement.
Sélectionner un Modèle
Choisissez parmi des modèles de pages d’accueil, de tableaux de bord ou de composants réutilisables.
Organisation Multi-Fichiers
Structurez vos projets en plusieurs fichiers avec sous-dossiers et modules ES natifs.
4. Développement React et Vue
Création de composants interactifs dans le navigateur.
Composants React 18
Développez des interfaces avec JSX, TypeScript et rechargement fluide.
import React, { useState } from 'react';
export default function App() {
const [c, setC] = useState(0);
return <button onClick={() => setC(c + 1)}>Compteur : {c}</button>;
}Composants Vue 3 (.vue)
Rédigez des fichiers .vue complets avec template, script setup et styles scopés.
5. IDE Avancé et Terminal WebContainer
Exécutez de vraies commandes Node.js et des serveurs Vite.
Terminal xterm.js Interactif
Lancez npm install et gérez vos scripts de développement directement dans votre onglet.
npm install
npm run devRedirection de Port vers l’Aperçu
Les ports locaux de vos serveurs de développement sont automatiquement mappés vers l’aperçu.
6. Stockage Local et Confidentialité
Vos données restent protégées dans IndexedDB.
Architecture IndexedDB
L’ensemble de vos fichiers est stocké en local dans la base gb-coder-projects-db.
Continuité Hors Ligne
Continuez à coder même sans connexion internet active.
7. Sauvegardes et Export ZIP
Exportez et restaurez vos projets en toute simplicité.
Export ZIP avec Hash SHA-256
Téléchargez vos projets au format ZIP avec contrôle d’intégrité automatisé.
Importation Sécurisée
Glissez-déposez une archive ZIP pour restaurer votre espace de travail.
8. Recherche Globale et Raccourcis
Naviguez efficacement dans vos projets.
Raccourcis Clavier
Ctrl+S pour sauvegarder, Ctrl+P pour changer de fichier et Ctrl+` pour le terminal.
Recherche Multi-Fichiers
Recherchez et remplacez du texte sur l’ensemble de votre code.
9. Dépannage et Compatibilité
Résolution des problèmes courants.
WebContainer Désactivé
Vérifiez la présence des en-têtes d’isolation COOP/COEP et le support de SharedArrayBuffer.
Nettoyage du Cache
Effectuez un rechargement forcé (Ctrl+Shift+R) pour actualiser les fichiers statiques.