Comment fonctionne GB Coder : guide complet de l’IDE web

Le plus simple est de voir GB Coder comme deux environnements qui partagent une même interface. L’Éditeur Statique est un atelier consacré au HTML, au CSS et au JavaScript : vous tapez, l’aperçu se met à jour et aucune étape de compilation ne s’intercale. L’IDE Avancé exécute une véritable chaîne d’outils Node.js grâce à WebContainer, un environnement basé sur WebAssembly qui tourne dans l’onglet. Les deux modes utilisent le même tableau de bord de projets, le même éditeur Monaco, l’explorateur de fichiers, le panneau d’aperçu et la couche de stockage local ; passer de l’un à l’autre revient donc à changer d’outil, pas de produit. Choisissez le mode statique pour une page d’accueil, une expérience CSS, une démonstration pédagogique ou un petit script. Choisissez le mode avancé lorsque vous avez besoin de paquets npm, d’un serveur de développement Vite, de la compilation JSX ou d’un terminal. L’environnement avancé exige un navigateur moderne compatible avec SharedArrayBuffer et l’isolation cross-origin ; les navigateurs Chromium actuels et Firefox constituent les choix pratiques. Rien ne s’exécute sur une machine virtuelle distante.

Le point d’entrée est le Tableau de bord des projets. En choisissant Nouveau projet, vous obtenez un bac à sable statique vide, un modèle React 18, un modèle Vue 3 ou un environnement Node.js avec WebContainer. La galerie de modèles ajoute des pages d’accueil, des tableaux de bord, des applications utilitaires et des prototypes de composants, chacun avec une structure de fichiers cohérente déjà en place. Le nouvel espace est créé immédiatement dans IndexedDB, la couche de stockage transactionnel du navigateur : le premier aperçu est donc disponible sans téléchargement, sans compte et sans aller-retour vers un serveur. Les noms de projets et les dossiers vous appartiennent, et chaque espace est isolé des autres. Un travail existant peut entrer par une archive ZIP ou un dépôt GitHub, tous deux passant par une étape de vérification avant l’application des fichiers. Si vous découvrez le produit, voilà toute l’intégration : ouvrir le tableau de bord, choisir un point de départ et commencer à modifier.

L’Éditeur Statique divise l’espace de travail en panneaux HTML, CSS et JavaScript. GB Coder enveloppe le balisage dans un document conforme aux standards, si bien qu’un fragment suffit pour commencer ; aucun doctype de modèle n’est à maintenir. Les modifications sont évaluées dans une iframe isolée avec un léger délai, ce qui évite de saturer le moteur de rendu pendant une frappe rapide tout en conservant une impression d’immédiateté. Une console virtuelle recueille les sorties log, warn, error et info à côté de l’aperçu, ce qui permet de déboguer un petit script sans ouvrir les outils de développement. Les bibliothèques externes s’ajoutent depuis un CDN ou via le Gestionnaire de bibliothèques externes, avec des options connues comme Tailwind, Bootstrap et des jeux d’icônes. Les projets statiques peuvent aussi s’étendre à plusieurs fichiers et dossiers avec les imports natifs de modules ES. Le compromis est assumé : ce mode n’installe aucun paquet et ne regroupe rien, il convient donc à l’apprentissage, aux expérimentations visuelles et aux démonstrations sans dépendances, pas à une grande application framework.

Sous l’interface se trouve Monaco, le moteur d’édition open source qui fait fonctionner VS Code. Cet héritage se voit dans les détails : complétions IntelliSense, documentation de types en ligne, validation syntaxique, correspondance des parenthèses, édition multiligne et raccourcis configurables. TypeScript, JavaScript, HTML, CSS et JSON bénéficient de services de langage, si bien que les erreurs sont signalées pendant la frappe plutôt qu’après une compilation. L’éditeur prend aussi en charge la vue fractionnée et le comparateur de différences, utiles pour examiner une révision ou une proposition de l’IA. Autour de l’éditeur, GB Coder ajoute les outils qui exigent habituellement des applications séparées : recherche et remplacement dans tout le projet avec expressions régulières et sensibilité à la casse, formatage basé sur Prettier pour les principaux langages web, palette de commandes et référence de raccourcis avec recherche. L’enregistrement automatique fonctionne en continu, avec un indicateur d’état pour connaître la situation du fichier courant. Séparément, ce sont de petits conforts. Ensemble, ils suppriment les changements de contexte qui donnent aux éditeurs de navigateur une impression de limitation.

L’IDE Avancé est la partie qui surprend. WebContainer fournit un petit système d’exploitation compilé en WebAssembly et exécute de véritables binaires Node.js dans la page. Ainsi, npm install résout de vrais paquets, les scripts npx s’exécutent et un serveur de développement Vite démarre sur un port local redirigé vers l’aperçu intégré. Le terminal est un véritable shell xterm.js avec styles ANSI et historique des commandes, pas un panneau de sortie simulé. Comme l’environnement est local à l’onglet, l’installation des paquets et les opérations sur les fichiers ne consomment pas de conteneur distant. Les contraintes sont tout aussi réelles : la fonction dépend de SharedArrayBuffer et de l’isolation cross-origin, la mémoire est limitée par le navigateur et les binaires natifs ou images Docker sortent de son périmètre. Pour une application React ou Vue avec des dépendances npm ordinaires, le flux de travail reste cependant celui d’un ordinateur portable. La différence, c’est que l’environnement arrive avec le projet au lieu d’être reconstruit sur chaque machine.

npm install
npm run dev
# Vite affiche une URL locale ; GB Coder redirige ce port vers l’aperçu

Chaque projet dispose d’un aperçu, et cet aperçu est bien plus qu’une miniature statique. Il s’exécute dans une iframe isolée, peut être détaché dans sa propre fenêtre pour une configuration à deux écrans et propose des formats d’affichage pour téléphone, tablette et bureau. Un QR code ouvre l’aperçu sur un vrai téléphone, ce qui révèle les problèmes de mise en page que le redimensionnement d’une fenêtre de bureau ne montre pas. Pour obtenir un retour rapide, GB Coder peut encoder un projet simple à fichier unique dans une URL de partage via le fragment d’URL. Ce fragment n’atteint jamais un serveur : le lien est autonome. La contrepartie est une limite de taille pratique, et les projets multifiches sont refusés plutôt que tronqués. Ces projets se partagent sous forme d’archive ZIP ou via le flux du bac à sable. La distinction compte : un lien de partage est une commodité pour une petite démonstration, tandis qu’une archive ou un dépôt constitue la transmission durable d’un vrai travail.

L’IA de GB Coder est optionnelle et conçue pour être relue. GB Assist est un panneau de discussion pour les questions, l’explication d’erreurs et les modifications envisagées ; il peut proposer des éditions de fichiers, mais celles-ci apparaissent sous forme de diff avant toute application. L’assistant exige de connecter un fournisseur et un modèle, et les messages ainsi que le code sélectionné sont envoyés à ce fournisseur lorsque vous l’utilisez. Build with AI va dans l’autre sens : vous décrivez une interface en langage courant et recevez un projet structuré HTML, CSS et JavaScript, validé avant de remplacer le contenu de l’éditeur. Screenshot to Code accepte une image, y compris collée depuis un outil de capture, et génère une première version du balisage et des styles. Les commandes vocales utilisent la reconnaissance vocale du navigateur pour lancer des actions comme exécuter, formater, expliquer, corriger, construire, exporter, ouvrir un panneau ou changer de fichier ; Chrome et Edge offrent actuellement le meilleur support, et un champ de commande écrite reste disponible. Pour ces quatre fonctions, le schéma est identique : la génération est rapide, mais l’acceptation vous revient.

Les projets sont enregistrés automatiquement dans IndexedDB, mais l’enregistrement automatique ne constitue pas un historique de versions. Les instantanés créent des points de contrôle nommés de l’état courant, et le comparateur affiche les changements avant une restauration. Pour le travail qui doit quitter le navigateur, l’export ZIP emballe toute l’arborescence et enregistre un hash d’intégrité ; l’import accepte une archive déposée et montre un aperçu structurel avant d’écrire les fichiers. La synchronisation GitHub boucle le parcours avec un chemin bidirectionnel : connectez un jeton d’accès personnel, choisissez un dépôt existant ou créez-en un, puis poussez ou tirez. Les envois sont assemblés en un commit atomique unique, les fichiers inchangés sont ignorés et une branche déplacée entre-temps produit un conflit au lieu d’écraser silencieusement le travail d’autrui. Les fichiers récupérés passent par le même flux de vérification et d’application qu’une archive. Les jetons restent limités à la session par défaut ; leur mémorisation sur l’appareil est une option qui les stocke chiffrés, et le trafic GitHub va directement du navigateur à api.github.com. LadeStack n’a pas besoin de conserver l’identifiant.

Un projet n’est pas terminé tant que quelqu’un ne peut pas l’ouvrir. GB Coder permet un déploiement en un clic vers Vercel et Netlify avec le jeton de votre propre compte. Le service détecte s’il s’agit d’un site statique ou d’une application Vite, envoie les fichiers appropriés et renvoie une URL publique. Comme le jeton vous appartient, le déploiement atterrit dans votre compte et peut y être géré ensuite. Les projets statiques peuvent aussi être exportés en ZIP et envoyés vers n’importe quel hébergeur, tandis que la synchronisation GitHub relie l’espace de travail à un dépôt capable d’alimenter une chaîne d’intégration continue. Aucune de ces routes n’enferme le projet dans GB Coder : les fichiers restent du HTML, du CSS, du JavaScript et de la configuration standards. Cette portabilité est l’objectif. Le navigateur est le lieu du travail, pas sa prison.

GB Coder est gratuit, ne demande ni connexion ni inscription et ne contient aucune publicité. Sa posture par défaut est local-first : les projets vivent dans le stockage du navigateur et l’application n’a pas besoin d’un compte LadeStack pour les ouvrir. Les données ne quittent l’appareil que lorsque vous choisissez une capacité connectée, comme un fournisseur d’IA, la synchronisation GitHub, un déploiement ou un CDN tiers présent dans votre propre code. Cette nuance mérite d’être précisée, car local-first ne signifie pas uniquement hors ligne. Le produit convient aux apprenants qui veulent voir HTML et CSS réagir immédiatement, aux enseignants qui ont besoin d’une salle de classe sans installation, aux développeurs qui prototypent une interface avant de la confier à un dépôt, et à toute personne qui doit publier rapidement un petit utilitaire ou une démonstration. Il convient moins aux monorepos gigantesques, aux chaînes d’outils natives, aux services fondés sur Docker ou aux organisations qui interdisent le stockage du navigateur. L’usage de l’IA peut entraîner des frais chez le fournisseur choisi, et le déploiement dépend de votre offre Vercel ou Netlify. L’application reste gratuite ; les services externes restent votre choix.

Une routine fiable ressemble à ceci. Ouvrez le Tableau de bord des projets et créez un espace dans le mode adapté à la tâche. Construisez d’abord la plus petite version visible, puis utilisez la console et l’aperçu pour la corriger. N’ajoutez des paquets que lorsque l’éditeur statique ne peut réellement pas faire le travail. Testez à la largeur d’un téléphone ou scannez le QR code avant de peaufiner les détails bureau. Prenez un instantané à chaque jalon important. Poussez vers GitHub ou exportez un ZIP lorsque le travail a besoin d’un emplacement durable. Déployez lorsqu’il y a quelque chose qui mérite d’être montré. Aucune de ces étapes n’exige une installation locale, et chacune peut être répétée sur une autre machine avec le même stockage de navigateur ou un nouveau clone. Si vous découvrez le produit, commencez par un projet statique vide et un seul titre ; le premier aperçu apparaîtra avant même que l’installation autrefois nécessaire n’ait eu le temps de se terminer. Le Tableau de bord des projets se trouve à l’adresse /app/projects.