Visualiseur HTML
Prévisualisez le HTML.
À propos de cet outil
L'outil affiche un fragment HTML dans un iframe en bac à sable pour que vous voyiez sa structure sans ouvrir un autre fichier. Les scripts restent isolés : il s'agit d'un aperçu du balisage, pas de l'exécution d'une application complète.
Comment l’utiliser
Collez le fragment, lancez l'aperçu et examinez le cadre. C'est pratique pour un bloc d'e-mail ou une esquisse de composant statique que vous voulez vérifier en quelques secondes.
Exemple
L'exemple utilise des styles en ligne pour afficher immédiatement quelque chose.
Entrée
<article style="font-family:system-ui;padding:1rem">
<h1 style="margin:0 0 .5rem">Preview card</h1>
<p style="margin:0;color:#334155">Sandboxed HTML viewer example.</p>
</article>Sortie
(rendered in the preview frame)Conseil
Si le rendu paraît nu, le fragment dépendait probablement d'une feuille de styles externe absente du cadre.
Bon à savoir
Les scripts s'exécutent-ils dans l'aperçu ?
Non. Le cadre est isolé sans autorisation de script : il n'affiche que le balisage et le CSS. Testez le comportement dans une vraie page.
Les classes Tailwind apparaissent-elles dans l'aperçu ?
Pas par défaut : le cadre n'a pas de feuille de style, donc les classes utilitaires ne font rien tant que vous n'ajoutez pas un <link> vers du CSS compilé ou ne le collez pas dans un bloc <style>. Le script Play CDN de Tailwind ne peut pas s'exécuter, car les scripts sont bloqués.