Bac à sable HTML, CSS et JS

À quoi ça sert

Ce bac à sable est un petit éditeur de code en ligne pour vos expériences front-end. Écrivez du HTML, du CSS et du JavaScript dans trois onglets avec coloration syntaxique et l’aperçu se met à jour pendant la saisie, comme CodePen ou JSFiddle, mais sans compte. Une console intégrée affiche la sortie de console.log() et les erreurs avec le numéro de ligne dans votre JavaScript : vous pouvez déboguer sans ouvrir les outils de développement. C’est pratique sur un téléphone ou un ordinateur emprunté.

Utilisez-le pour essayer une mise en page CSS, reproduire un bug pour un collègue, tester un extrait trouvé sur Stack Overflow, enseigner à un débutant ou esquisser un prototype rapide.

Mode d’emploi

1. Saisissez du code dans les onglets HTML, CSS et JS, ou cliquez sur Exemple pour partir d’une petite démo de compteur. Un point sur un onglet indique qu’il contient du code.
2. L’aperçu s’exécute automatiquement 0,6 seconde après la fin de la saisie. Désactivez Exécution auto pour les scripts lourds et cliquez sur Exécuter ou appuyez sur Ctrl+Enter quand vous êtes prêt.
3. Surveillez la Console pour les logs, avertissements et erreurs ; la ligne la plus récente est toujours en haut. Les objets, tableaux, Maps, Sets et éléments DOM sont affichés sous une forme compacte et lisible.
4. Partager pour envoyer le code à quelqu’un. Télécharger le ZIP enregistre index.html, style.css et script.js dans des fichiers séparés, prêts pour un vrai projet ; Télécharger le HTML enregistre tout dans un seul fichier index.html qui s’ouvre dans n’importe quel navigateur.

Votre code est conservé dans ce navigateur : il est toujours là quand vous revenez. La touche Tab indente de deux espaces.

Exemple

HTML :

<button id="go">Click me</button>

JavaScript :

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Chaque clic ajoute une ligne dans la console. Si vous faites une faute dans un nom, la console affiche une ReferenceError en rouge avec la ligne de l’onglet JS où elle s’est produite.

Comment ça marche

Les trois panneaux sont combinés en un seul document HTML chargé dans une iframe avec l’attribut sandbox : le code ne peut pas lire les cookies ni le stockage de ce site. Un petit script ajouté au cadre transmet les appels de console et les erreurs non interceptées à la page, et rien ne quitte votre appareil.