Dans cet article
Qu'est-ce que l'aperçu HTML en direct ?
L'aperçu HTML en direct est un éditeur de code dans le navigateur qui affiche votre HTML, CSS et JavaScript en temps réel. Au fur et à mesure que vous tapez, le panneau de sortie se met à jour instantanément, vous offrant un retour visuel immédiat sans basculer entre un éditeur et un onglet de navigateur.
L'aperçu s'exécute dans un iframe sandboxé avec des restrictions de sécurité strictes. Cela signifie que votre code s'exécute dans un environnement isolé — il ne peut pas accéder à la page parente, aux cookies ou au stockage local. Vous disposez d'un terrain de jeu sûr pour l'expérimentation sans aucun risque pour l'application hôte.
Comment fonctionne l'aperçu en direct
L'éditeur combine votre HTML, CSS et JavaScript en un seul document et l'injecte dans un iframe sandboxé. Les mises à jour sont temporisées pour garder l'aperçu réactif sans surcharger le navigateur.
- Iframe sandboxé — l'aperçu fonctionne avec sandbox="allow-scripts" uniquement, bloquant l'accès à la page parente, aux cookies, formulaires et navigation pour une isolation complète
- Onglets de code séparés — écrivez HTML, CSS et JavaScript dans des panneaux dédiés, chacun avec une édition adaptée à la syntaxe, combinés automatiquement lors du rendu
- Mises à jour temporisées — les changements sont appliqués après une courte pause dans la saisie, gardant l'aperçu fluide et évitant les re-rendus constants à chaque frappe
Essayez gratuitement — sans inscription
Essayer l'aperçu HTML en direct →Quand utiliser l'aperçu HTML en direct
L'aperçu en direct est idéal quand vous avez besoin d'un retour visuel rapide sur le HTML et le CSS sans environnement de développement complet.
- Prototypage rapide — testez des idées de mise en page, des palettes de couleurs et des designs de composants instantanément sans configurer un outil de build
- Apprentissage du HTML et CSS — les débutants peuvent voir l'effet de chaque balise et propriété immédiatement, raccourcissant considérablement la boucle d'apprentissage
- Test de modèles d'email — prévisualisez les mises en page d'emails HTML avec styles inline pour vérifier le rendu avant l'envoi, car les clients email ont un support CSS limité
Questions fréquemment posées
L'aperçu est-il sécurisé ? Mon code peut-il accéder à la page parente ?
L'aperçu est entièrement sandboxé. L'iframe utilise sandbox="allow-scripts" sans allow-same-origin, ce qui signifie que votre code peut exécuter du JavaScript mais ne peut pas accéder au DOM de la page parente, aux cookies, au localStorage ou aux données de session. C'est le même modèle de sécurité utilisé par des plateformes comme CodePen et JSFiddle.
Pourquoi allow-same-origin n'est-il pas inclus dans le sandbox ?
Inclure allow-same-origin avec allow-scripts permettrait au code prévisualisé d'échapper complètement au sandbox — il pourrait accéder aux cookies de la page parente, modifier le DOM ou lire des données sensibles. L'omettre garantit une isolation complète. Le compromis est que localStorage et sessionStorage sont indisponibles dans l'aperçu, mais c'est un choix de sécurité délibéré.
Puis-je charger des bibliothèques CSS ou JavaScript externes dans l'aperçu ?
Oui. Vous pouvez ajouter des balises link et script référençant des URL CDN (ex. Bootstrap, Tailwind, jQuery) dans votre panneau HTML. L'iframe sandboxé permet les requêtes réseau pour charger des ressources externes. Gardez simplement à l'esprit que les scripts externes fonctionnent également sous les restrictions du sandbox — ils ne peuvent pas non plus accéder à la page parente.