Visualiseur HTML
Colle du code HTML et vois-le rendu en direct dans un aperçu sécurisé et isolé.
Comment ça marche
Colle n'importe quel HTML dans le panneau de code et le visualiseur le rend en direct dans la page du dessous, mis à jour pendant la saisie. Fais glisser le séparateur entre le code et la page vers le haut ou le bas pour donner plus de place à l'un ou à l'autre. L'aperçu tourne dans une iframe isolée — un cadre que le contenu rendu ne peut pas quitter — donc le HTML collé ne peut pas toucher cette page, tes cookies ou tes fichiers. Un compteur affiche la taille de ton balisage en caractères et en kilooctets.
Pourquoi l'aperçu est isolé
Rendre du HTML non fiable sur une page normale serait risqué : des scripts pourraient lire les cookies, manipuler la page parente ou émettre des requêtes réseau. Le cadre d'aperçu reçoit une origine totalement isolée : ton balisage est rendu exactement comme un navigateur l'afficherait, mais confiné — il ne peut rien atteindre hors de sa boîte. JavaScript est désactivé par défaut ; coche Activer JavaScript dans l'aperçu pour tester un comportement dynamique, et le cadre se recharge avec les scripts autorisés tout en restant isolé.
À quoi ça sert
Prévisualiser un e-mail HTML avant de l'envoyer, vérifier un extrait de balisage copié depuis un tutoriel, tester l'apparence d'un bloc de page sans monter un projet, apprendre comment les balises se rendent, ou inspecter rapidement du HTML récupéré sur une page. Comme tout tourne en local, tu peux coller sans risque un travail privé ou inachevé — rien n'est transmis ni stocké.
Comment visualiser ton HTML
Colle ton balisage dans le panneau de code et l'aperçu du dessous se rafraîchit tout seul une fraction de seconde après que tu as arrêté de taper — pas de bouton à cliquer ni de page à recharger. Fais glisser la poignée horizontale entre le code et l'aperçu pour donner plus de place à l'un ou l'autre, pratique quand un bloc est haut ou que tu veux lire la source tout en regardant le résultat. Coche Activer JavaScript dans l'aperçu si ton extrait a besoin de scripts pour tourner : le cadre se recharge avec les scripts autorisés tout en restant isolé. Un compteur en direct à côté de la case indique la taille courante de ton balisage en caractères et en kilooctets, pour jauger d'un coup d'œil la lourdeur d'un document.
Un exemple concret
Imaginons que tu montes une newsletter et qu'on te confie un bloc de HTML à base de tableaux pour l'en-tête. Colle-le dans la zone de texte : l'en-tête apparaît dans le cadre du dessous exactement comme un client mail le disposerait, couleurs et marges comprises. Tu repères une cellule mal alignée, tu corriges la ligne de <table> dans le panneau de code, et le cadre se met à jour tout seul. Puis tu coches Activer JavaScript dans l'aperçu pour vérifier un pixel de suivi ou un effet au survol qui repose sur un script. Tu ne quittes jamais la page, n'ouvres aucun fichier et n'envoies rien — toute la vérification se passe dans ton navigateur.
Ce que tu peux attendre
L'outil garde volontairement une surface réduite : une simple zone de texte, un séparateur déplaçable, un aperçu en iframe, un compteur de taille et une seule case pour activer JavaScript. Tout est rendu côté client dans un cadre isolé, donc le comportement correspond à celui d'un vrai navigateur tant que le balisage ne dépend pas d'un serveur. Les styles en ligne et les blocs <style> fonctionnent normalement ; les ressources externes ne se chargent que si le navigateur peut les atteindre. Il n'y a pas de limite de taille définie, donc les très gros documents se rendent encore, simplement plus lentement. Comme l'aperçu tourne sur ta machine, rien de ce que tu colles n'est transmis ni stocké.
Problèmes courants et solutions
Mes images ou polices ne s'affichent pas. L'aperçu est isolé avec une origine séparée, donc les ressources qui demandent des permissions ou une session connectée ne se chargent pas — intègre les images ou utilise des URL publiques. Mon script ne fait rien. JavaScript est désactivé par défaut pour la sécurité ; coche Activer JavaScript dans l'aperçu pour l'autoriser. L'aperçu est vide. Vérifie une balise non fermée ou une règle CSS qui masque tout le corps — le panneau de code montre toujours ton balisage, alors un coup d'œil aux balises fermantes révèle généralement la faute. Le cadre diffère de mon site. L'aperçu montre ton HTML avec le style par défaut du navigateur, un document autonome ; le CSS de la page environnante ne s'appliquera donc pas sauf si tu le colles aussi.
Questions fréquentes
C'est sûr de coller du HTML peu fiable ?
Oui. L'aperçu est rendu dans un cadre isolé avec une origine séparée et les scripts désactivés par défaut : le contenu ne peut pas accéder à cette page, à tes cookies ni à ton appareil.
Pourquoi JavaScript est-il désactivé dans l'aperçu ?
C'est le réglage sûr pour consulter du balisage. Active-le avec la case quand tu veux spécifiquement tester des scripts — le cadre reste isolé dans tous les cas.
Il y a une limite de taille ?
Rien n'est imposé par l'outil ; les documents très volumineux sont simplement plus lents à rendre, et le compteur affiche la taille en cours.
Le CSS de mon HTML fonctionne-t-il ?
Oui — les styles en ligne et les blocs <style> du balisage collé se rendent normalement. Les feuilles de style externes ne se chargent que si le navigateur peut les atteindre et que ton balisage les référence.
Mon HTML est-il envoyé quelque part ?
Non. Le rendu se fait entièrement dans ton navigateur et rien de ce que tu colles ne quitte ton appareil.
Puis-je copier ou enregistrer le résultat ?
L'outil rend ton HTML en direct dans le cadre mais n'ajoute pas de boutons de téléchargement ou de copie d'image — copie le source depuis le panneau de code pour garder ton balisage, ou imprime le cadre avec la fonction d'impression de ton navigateur si tu veux une copie visible.