Votre code s’exécute uniquement dans votre navigateur, dans un cadre isolé sans accès à ce site. Le code ouvert depuis un lien partagé s’exécute aussi : relisez-le si la source n’est pas sûre.
S’ouvre sur l’onglet CSS avec du HTML d’exemple à styliser : essayez sélecteurs, variables CSS, mises en page flexbox et grille, transitions, animations keyframes et media queries, et voyez l’effet immédiatement. Une fois satisfait, exportez le tout en un seul .html.
Mode d’emploi
- Écrivez HTML, CSS et JavaScript dans leurs onglets. Avec Auto activé, le résultat se recharge peu après la fin de la saisie ; sinon, touchez Exécuter.
- console.log, warn, error, info et table s’affichent dans la console sous le résultat. Les erreurs non interceptées indiquent la ligne ; touchez-la pour y aller.
- Partez d’un modèle : page simple, animation canvas ou exemple de console JavaScript.
- Copiez un lien de partage (le code est compressé dans le lien lui-même) ou téléchargez le tout dans un seul fichier .html.
- Le résultat tourne dans un iframe isolé sans accès à la même origine : il ne peut lire ni ce site, ni vos cookies, ni votre stockage, et rien n’est envoyé.
- Votre code est enregistré dans ce navigateur seulement. Ouvrir un lien de partage charge le code de ce lien.
- Les liens gardent le code après le # pour qu’il n’atteigne jamais un serveur ; un code très long donne un lien très long que certaines applications coupent.
- Si vous collez un document HTML complet, le CSS va dans son head et le JavaScript avant </body>.
À quoi il sert
Utilisez-le pour essayer une astuce CSS avant de l’intégrer à un projet, reproduire un bug en quelques lignes pour un collègue ou un forum, prototyper un composant, enseigner les bases du web ou tester une API avec fetch. Chaque onglet correspond à un langage et le résultat se recharge peu après la frappe ; désactivez l’exécution automatique pour les scripts lourds et lancez-les quand vous voulez.
console.log, info, warn, error et console.table s’affichent sous le résultat, et les erreurs non interceptées et promesses rejetées apparaissent avec leur numéro de ligne, qu’un toucher suffit à atteindre dans le code.
Comment fonctionne le bac à sable
Votre page s’exécute dans une iframe isolée sans accès à la même origine : elle ne peut lire ni le stockage ni les cookies de ce site, et une boucle infinie ou un plantage ne touchent que l’aperçu. Les requêtes réseau de votre code partent de votre navigateur comme pour n’importe quelle page ; rien d’autre n’est envoyé. Le JavaScript moderne, avec async/await et appels fetch, fonctionne comme dans une page normale.
Partager et enregistrer
L’éditeur garde votre dernier code dans ce navigateur. Le lien de partage compresse les trois onglets dans la partie de l’URL après le #, que les navigateurs n’envoient jamais au serveur ; un code très long donne des liens très longs que certaines messageries coupent. Téléchargez le .html pour garder un fichier autonome qui s’ouvre dans n’importe quel navigateur.
Questions fréquentes
Faut-il un compte pour enregistrer mon code ?
Non. Le code est enregistré automatiquement dans ce navigateur. Pour le transférer sur un autre appareil ou le partager, copiez le lien ou téléchargez le fichier .html.
D’autres personnes peuvent-elles voir mon code ?
Seulement si vous leur envoyez le lien. Le code reste dans votre navigateur et dans le lien après le #, qui n’est transmis à aucun serveur.
Puis-je utiliser des bibliothèques comme React ou jQuery ?
Oui. Ajoutez dans l’onglet HTML une balise script ou link vers un CDN, comme dans une page classique. L’aperçu la charge depuis le réseau à l’exécution.
Pourquoi localStorage ou les cookies ne marchent-ils pas dans mon code ?
L’aperçu tourne dans une iframe isolée sans accès à la même origine : stockage et cookies y sont bloqués ou séparés. C’est ce qui rend l’éditeur sûr ; testez ce genre de code dans une page normale.
Comment voir les erreurs de mon JavaScript ?
Les erreurs non interceptées et les promesses en échec apparaissent dans la console sous le résultat, avec le numéro de ligne. Touchez le message pour aller à cette ligne dans l’onglet JS.
Que se passe-t-il si je colle un document HTML complet ?
L’éditeur garde votre document et insère le CSS dans son head et le JavaScript juste avant </body> : les pages complètes fonctionnent telles quelles.