Collez du HTML et voyez son rendu dans le visualiseur HTML — cadres d'appareils, console en direct, export PNG et PDF, et liens de partage qui transportent le document dans l'URL elle-même. C'est tout le site.

Qu'est-ce qu'un visualiseur HTML ?

Un visualiseur HTML est un outil qui prend du code HTML brut en entrée et l'affiche sous forme de page web en direct, sans vous obliger à enregistrer le code dans un fichier et à l'ouvrir dans un navigateur. La forme la plus courante est une zone de texte « coller et afficher » sur une page web : vous collez le HTML à gauche, le résultat rendu apparaît à droite, et chaque changement met l'aperçu à jour au fil de la frappe. Les visualiseurs HTML servent surtout à prévisualiser du HTML généré par une IA, déboguer des modèles d'e-mail, vérifier le rendu d'un composant React et partager des maquettes visuelles par URL.

Comment fonctionne un visualiseur HTML

Les visualiseurs HTML modernes s'exécutent entièrement dans le navigateur. Le HTML collé par l'utilisateur est écrit dans un élément <iframe srcDoc="..."> de la page, ce qui amène le navigateur à l'afficher comme s'il s'agissait d'un document distinct chargé depuis une autre origine. L'attribut sandbox de l'iframe restreint ce que le HTML rendu peut faire : les scripts sont généralement autorisés (pour que les composants interactifs fonctionnent), mais l'iframe ne peut ni naviguer dans la page parente ni lire ses cookies.

Comme le rendu se fait côté client, le HTML source n'a jamais à quitter le navigateur de l'utilisateur. Pas d'envoi, pas d'analyseur côté serveur, et aucun risque que l'exploitant lise votre code. En contrepartie, un visualiseur dans le navigateur ne peut rien afficher qui exige des ressources serveur (vos points de terminaison d'API locaux ne sont pas joignables depuis l'iframe, par exemple), et un lien de partage doit transporter le document entier. La compression s'occupe de l'essentiel — une page de 50 KB devient un lien d'environ 5 KB — mais une page très longue donne toujours un lien très long, et au-delà un fichier voyage mieux.

Visualiseur HTML vs CodePen, JSFiddle, votre fichier local

Chaque outil excelle à une échelle différente. CodePen et JSFiddle sont le bon choix quand vous devez partager une démo complète et persistante sur plusieurs sessions : ils enregistrent votre extrait sur leur serveur, lui donnent une URL stable et proposent des fonctions de collaboration dans les offres payantes. Ils attendent que vous vous connectiez, que vous rattachiez l'extrait à votre compte et que vous le traitiez comme un petit fichier de projet. En contrepartie, votre code vit sur l'infrastructure de quelqu'un d'autre, l'éditeur ajoute de l'interface (collections, réglages, commentaires) et la page elle-même est plus lourde qu'un simple aperçu.

Ouvrir un fichier HTML directement dans votre navigateur est l'option la plus légère pour un rendu ponctuel — aucun site tiers n'entre en jeu. En contrepartie, vous devez d'abord enregistrer le fichier, votre navigateur peut le traiter comme une origine différente de localhost, et vous ne pouvez pas le partager sans envoyer le fichier ou l'héberger quelque part.

Un visualiseur HTML « coller et afficher » se situe entre les deux. Pas d'enregistrement, pas de compte, pas de fichier de projet : vous collez, vous voyez le rendu, vous partagez par un fragment d'URL si vous le souhaitez. C'est l'outil à choisir quand le HTML est éphémère : un extrait sorti d'une IA, l'aperçu d'un modèle d'e-mail, la vérification rapide d'un composant. Quand l'extrait commence à ressembler à un vrai projet — gestion de versions, collaborateurs, persistance — passez à CodePen ou à un fichier local.

Pourquoi un seul outil

Il y en avait quatre. Un éditeur Markdown, un visualiseur JSON et une page HTML vers PDF distincte côtoyaient le visualiseur ; personne n'arrivait en les cherchant, ils ont donc été retirés et l'export PDF a été intégré au visualiseur lui-même. Ce qui reste est ce pour quoi les gens viennent vraiment. Il mérite sa place : ce qui ne s'explique pas en une phrase n'est pas publié.

Comment ça marche

Trois choses comptent : la vitesse, la sécurité et des largeurs réalistes. La vitesse, c'est un aperçu qui se met à jour au fil de la frappe, pas au clic sur un bouton. La sécurité, c'est que tout ce que vous collez s'exécute dans un iframe en sandbox, qui ne peut ni lire vos cookies ni rediriger votre onglet. Les largeurs réalistes, c'est passer d'ordinateur à tablette et à mobile en un clic, au lieu de redimensionner votre navigateur.

L'éditeur est une instance CodeMirror complète, avec coloration syntaxique, appariement des parenthèses, numéros de ligne et raccourcis clavier. L'aperçu est un iframe en sandbox avec les scripts autorisés, pour que les composants interactifs se comportent vraiment. La séparation entre l'éditeur et l'aperçu se déplace à la souris et retient sa position d'une visite à l'autre. Les brouillons sont enregistrés automatiquement dans le localStorage, et le bouton Partager compresse votre HTML et l'écrit dans le fragment de l'URL — la partie après le #, que les navigateurs n'envoient jamais nulle part — de sorte que le lien lui-même transporte le contenu. Rien ne touche un serveur.

Ce qui ne changera pas

Gratuit. Sans inscription, sans compte, sans mur d'e-mail.
S'exécute dans votre navigateur. Votre HTML ne quitte pas votre machine, sauf si vous partagez un lien.
Rien n'est stocké sur votre appareil sans votre accord. Si vous refusez, la visite est quand même comptée, mais anonymement et sans cookie.
Pas d'inflation de fonctionnalités. Ce qui ne s'explique pas en une phrase n'est pas publié.

Conçu et maintenu par Axel, développeur indépendant en Norvège.