Le visualiseur HTML réunit l’éditeur et l’aperçu dans un même espace. Ouvrez un fichier, collez du code, vérifiez la console, puis téléchargez ou partagez la source.

Qu'est-ce qu'un visualiseur HTML ?

Un visualiseur HTML affiche du HTML sous forme de page web. Celui-ci se met à jour pendant la saisie, pour vérifier un extrait sans créer de projet. Le CSS dans <style> et le JavaScript dans <script> fonctionnent ; JSX et les langages serveur doivent d’abord être convertis en HTML.

Comment fonctionne un visualiseur HTML

Le document est rendu dans un iframe isolé. Les scripts peuvent s’exécuter, mais l’aperçu ne peut ni lire la page parente ni rediriger son onglet. Les images, styles, scripts et requêtes externes peuvent toujours contacter leurs propres serveurs.

Le rendu ne nous transmet pas votre code source. Les requêtes du document restent soumises aux règles du navigateur, comme CORS. Les liens contiennent du HTML compressé ; leur longueur dépend du document. Un fichier convient mieux qu’un lien très long.

Visualiseur HTML vs CodePen, JSFiddle, votre fichier local

CodePen et JSFiddle proposent des espaces de test hébergés. Comparez leurs options de sauvegarde et leurs panneaux de code si vous avez besoin de plus qu’un document HTML.

Ouvrir un fichier HTML local convient si vous avez déjà le fichier. Les images et styles relatifs doivent être disponibles aux chemins indiqués. Pour un projet avec compilation ou API, utilisez son serveur de développement.

HTML Viewer Cat sert à modifier et prévisualiser rapidement. Aucun compte n’est nécessaire. Un brouillon local conserve votre travail dans ce navigateur ; le téléchargement HTML permet d’en garder une copie ailleurs.

L’espace de travail

L’éditeur et l’aperçu occupent la fenêtre. Ouvrez la console pour lire les messages et les erreurs, ou choisissez un exemple dans la barre du bas.

Modifier et tester

Gardez le mode Live actif pour voir les modifications pendant la saisie, ou mettez-le en pause et cliquez sur Exécuter quand le script est prêt. Sur écran large, les cadres testent différentes largeurs ; ils n’émulent ni un autre navigateur ni un client de messagerie.

L’éditeur propose coloration syntaxique, recherche, repli du code et annulation. Le formatage utilise Prettier. Faites glisser le séparateur pour ajuster les panneaux. Les liens contiennent la source HTML ; ils n’enregistrent ni les valeurs des formulaires ni l’état JavaScript de l’aperçu.

Utilisation et stockage

Gratuit, sans compte.
Le rendu se fait dans votre navigateur ; les ressources externes peuvent émettre des requêtes.
Les brouillons et préférences restent dans le stockage local. Les statistiques fonctionnent sans cookies par défaut ; accepter le bandeau active un cookie de mesure.
Les imports sont limités à 10 Mo. Téléchargez le HTML pour conserver une copie séparée.

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