code_blocks Éditeur en direct HTML/CSS/JS star

Comment ça fonctionne

Tapez dans les onglets HTML, CSS et JS et le panneau d'aperçu se met à jour au fur et à mesure, en rendant le résultat combiné dans un iframe en bac à sable (sandbox). L'attribut sandbox est réglé sur allow-scripts sans allow-same-origin, et c'est précisément ce qui assure la sécurité : les scripts exécutés dans l'aperçu tournent dans une origine distincte et opaque, si bien qu'ils ne peuvent lire ni les cookies, ni le stockage local, ni le DOM de cette page — et cette page ne peut pas non plus accéder à l'iframe. Cette isolation est une frontière de sécurité imposée par le navigateur, pas un simple cadre visuel — c'est le même mécanisme que les sites utilisent pour intégrer en toute sécurité du contenu tiers non fiable (publicités, widgets, extraits soumis par des utilisateurs) sans avoir à faire confiance au code qu'il contient.

L'édition elle-même est délibérément sobre : trois zones de texte (textareas), sans coloration syntaxique, sans autocomplétion. Ce n'est pas une fonctionnalité manquante mais un compromis assumé — une véritable expérience d'édition de code (reconnaissance des mots-clés, appariement des parenthèses, autocomplétion des balises) suppose de charger une bibliothèque d'éditeur tierce conséquente, ce qui alourdit la page et impose un délai de chargement avant même de pouvoir taper un seul caractère. Cet outil optimise l'inverse : ouvrir la page et commencer à écrire immédiatement, sans aucune dépendance ni étape de build.

Chaque frappe dans l'un des trois onglets déclenche une reconstruction : le HTML actuel, le CSS actuel enveloppé dans une balise <style> et le JS actuel enveloppé dans une balise <script> sont assemblés en un seul document et écrits dans l'iframe. Il n'y a ni diff ni patch incrémental — tout le document d'aperçu est simplement remplacé, ce qui est assez rapide à cette échelle pour paraître instantané tout en gardant l'implémentation simple.

Bon à savoir

Comme tout — édition et rendu — se passe dans votre navigateur, il n'y a aucun aller-retour serveur et aucun compte n'est nécessaire. C'est bien adapté pour tester rapidement une astuce CSS, isoler un bug JavaScript d'une base de code plus vaste avant de le signaler, ou prototyper un petit composant avant de copier le résultat fonctionnel dans un vrai projet. Rien de ce que vous tapez n'est jamais sauvegardé automatiquement quelque part — traitez donc cet outil comme un brouillon : copiez tout ce que vous voulez conserver avant de fermer l'onglet.