Prévisualiseur HTML

Prévisualiseur HTML - Éditeur HTML CSS JavaScript en ligne

Un bac à sable professionnel pour écrire et tester vos fichiers HTML, CSS et JavaScript avec rendu instantané. Inclut éditeur à onglets, prévisualisation en direct, console, modèles prêts à l'emploi, plein écran et plus encore. Idéal pour apprendre le développement web, prototyper, partager un snippet ou reproduire un bug.

Qu'est-ce qu'un prévisualiseur HTML ?

Un prévisualiseur (sandbox ou playground) est un environnement interactif où vous tapez du HTML, du CSS et du JavaScript en profitant d'un retour visuel immédiat. Il sert à :

- Apprendre le développement web
- Tester des extraits de code
- Prototyper des interfaces
- Corriger des soucis HTML/CSS
- Partager des exemples
- Expérimenter de nouvelles APIs
- Réaliser des démos express

Comparable à CodePen, JSFiddle ou StackBlitz, mais entièrement local dans votre navigateur.

Comment utiliser ce prévisualiseur ?

Mode d'emploi :

1. Choisissez un onglet : HTML, CSS ou JavaScript
2. Écrivez votre code dans l'éditeur
3. Cliquez sur "Exécuter le code" ou activez "Exécution auto" pour un rendu direct
4. Consultez le panneau Aperçu
5. Inspectez l'onglet Console pour les logs et erreurs
6. Chargez un modèle pour démarrer plus vite
7. Passez en plein écran pour un espace de travail maximal

Astuces :
- Activez l'exécution auto pour un feedback en temps réel
- Inspirez-vous des modèles pour apprendre des patterns
- Vérifiez la console pour les erreurs JavaScript
- Téléchargez le résultat lorsque vous avez terminé

Quelles sont les capacités de l'éditeur ?

L'éditeur privilégie un flux de travail rapide et sans friction :

Édition :
- Onglets HTML, CSS et JavaScript séparés
- La touche Tab insère une indentation de 4 espaces
- Ctrl/Cmd+Entrée exécute le code
- Sauvegarde automatique dans le navigateur (localStorage) pour conserver le travail après rechargement

Prévisualisation :
- Rendu en direct dans un iframe isolé et sandboxé
- Mode auto ou exécution manuelle
- Console en direct qui capture les logs et erreurs d'exécution
- Barre de fenêtre responsive (Mobile 375px, Tablette 768px, Bureau ou largeur personnalisée)
- Prévisualisation plein écran

Disposition :
- Split horizontal (éditeur et aperçu côte à côte)
- Split vertical (éditeur en haut, aperçu en bas)

Autres :
- Modèles prédéfinis
- Bibliothèques externes via CDN (CSS et JavaScript)
- Téléchargement en un seul fichier HTML complet

Comment tester les points de rupture responsives / changer la largeur de la fenêtre ?

Utilisez la barre de fenêtre au-dessus de l'aperçu. Cliquez sur Mobile (375px), Tablette (768px) ou Bureau (pleine largeur), ou saisissez une largeur personnalisée en pixels puis cliquez sur Appliquer. L'iframe d'aperçu est contraint à cette largeur et centré, pour vérifier vos points de rupture responsives et media queries sans redimensionner tout le navigateur. La largeur choisie est mémorisée pour la prochaine fois.

Puis-je utiliser des bibliothèques externes ?

Oui, ajoutez-les dans votre HTML :

CSS :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

JavaScript :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

CDN populaires :
- jsDelivr : cdn.jsdelivr.net
- cdnjs : cdnjs.cloudflare.com
- unpkg : unpkg.com

Intégrez :
- Frameworks CSS (Bootstrap, Tailwind, Bulma)
- Librairies JS (jQuery, Vue, React)
- Icônes (Font Awesome)
- Toute ressource publique disponible sur CDN

Différence entre exécution auto et manuelle ?

Deux modes :

Auto-run :
- Le code est exécuté pendant la frappe
- Aperçu instantané
- Idéal pour les expérimentations rapides
- Léger délai pour éviter le spam
- Peut ralentir avec du code lourd
- Parfait pour HTML/CSS

Exécution manuelle :
- Le code tourne uniquement après avoir cliqué sur "Exécuter le code"
- Contrôle total
- De meilleures performances pour les scripts complexes
- Évite les boucles infinies accidentelles
- Recommandé pour JavaScript
- Idéal pour l'apprentissage

Basculez à tout moment via la case "Exécution auto".

Comment fonctionne la console ?

L'onglet Console capture la sortie JavaScript :

Affichage :
- console.log()
- console.error()
- console.warn()
- console.info()
- Erreurs d'exécution

Fonctionnalités :
- Couleurs distinctes pour logs, erreurs, avertissements
- Horodatage
- Bouton Effacer
- Historique conservé pendant la session
- Numéros de ligne pour les erreurs

Exemples :
console.log('Hello World');
console.error('Erreur détectée');
console.warn('Message d'avertissement');

Pratique pour comprendre ce que fait votre code.

Pourquoi mon console.log ne s'affiche-t-il pas ?

Désormais il s'affiche. L'aperçu injecte un hook de console avant l'exécution de tout votre JavaScript, donc même un simple console.log('x') de premier niveau sans setTimeout est capturé et affiché dans l'onglet Console. Si rien n'apparaît encore : assurez-vous que votre code est dans l'onglet JavaScript (non commenté), cliquez sur Exécuter le code (ou activez l'exécution auto), puis ouvrez l'onglet Console. Les erreurs non interceptées s'affichent en rouge avec leur numéro de ligne.

Comment déboguer les erreurs JavaScript avec les numéros de ligne ?

Toute erreur non interceptée ou rejet de promesse non géré est signalé dans l'onglet Console en rouge, précédé du numéro de ligne où il s'est produit (par exemple, 'Error at line 12: ...'). Écrivez votre script dans l'onglet JavaScript, exécutez-le, puis passez à la Console. Le badge d'erreur sur l'onglet Console indique aussi combien d'erreurs la dernière exécution a produites, et il s'efface automatiquement à la prochaine exécution propre.

Prend-il en charge les modules ES, async/await et fetch ?

Oui. async/await, les Promises et l'API fetch() fonctionnent car votre code s'exécute dans un véritable iframe de navigateur. Les requêtes réseau sont soumises à la politique CORS du serveur cible, comme toute page web. Pour les modules ES, ajoutez type="module" à votre propre balise script dans le panneau HTML (le panneau JavaScript injecté automatiquement s'exécute comme un script classique). Les modules ES externes peuvent être chargés depuis un CDN proposant des builds +esm, comme jsDelivr.

Quelles fonctionnalités et limites faut-il connaître ?

Pris en charge :
- HTML, CSS et JavaScript en direct avec aperçu instantané
- Console en direct (logs, avertissements, erreurs avec numéros de ligne)
- Bibliothèques CSS et JavaScript externes depuis tout CDN public
- Largeurs de fenêtre responsives (Mobile, Tablette, Bureau, px personnalisé)
- Téléchargement du résultat en un seul fichier HTML autonome
- Sauvegarde automatique dans le localStorage

Limites :
- L'aperçu s'exécute dans un iframe sandboxé (drapeaux sandbox : allow-scripts, allow-modals, allow-forms, allow-popups, allow-same-origin). Certaines API du navigateur exigeant une origine de premier niveau complète peuvent être restreintes.
- Les requêtes cross-origin respectent toujours CORS.
- Pas de sauvegarde dans le cloud ni d'URL de partage ; utilisez Télécharger pour conserver ou partager votre extrait.

Puis-je sauvegarder ou partager mon code ?

Options disponibles :

Sauvegarde :
- Télécharger un fichier HTML complet (inclut CSS et JS)
- Copier le code
- Sauvegarder manuellement (Ctrl/Cmd+S)
- Profiter du stockage local : le code persiste après rechargement

Partage :
- Copier/coller dans un mail ou chat
- Joindre le fichier téléchargé
- Ajouter à votre documentation
- Coller dans d'autres outils

Note : pas d'hébergement cloud intégré. Pour partager via URL, utilisez CodePen, JSFiddle ou GitHub Gist.

À quoi servent les modèles ?

Les modèles sont des exemples préconçus :

Disponibles :
- Vide : point de départ neutre
- HTML de base : squelette HTML5
- Starter Bootstrap : configuration Bootstrap 5
- Flexbox : démo Flexbox
- Grille CSS : layout moderne
- Animation CSS : démo interactive

Intérêt :
- Apprendre un nouveau concept
- Gagner du temps au démarrage
- Comprendre un pattern
- Tester un framework
- Trouver de l'inspiration

Chargez un modèle et adaptez-le à votre besoin.

Mon code est-il privé ?

Absolument :

- Tout reste dans votre navigateur
- Aucun envoi vers un serveur
- Pas de stockage ni de journalisation
- Pas de base de données cachée
- Pas d'analyse du contenu
- Fonctionnement hors ligne après chargement

Sécurité :
- Aperçu isolé dans un iframe sandbox
- Pas d'accès à votre disque
- JS exécuté dans un contexte restreint

Bonnes pratiques :
- Évitez les clés d'API réelles
- Utilisez des données de test
- Vérifiez et nettoyez les entrées utilisateur

L'outil est pensé pour des tests sûrs.

Quels sont les raccourcis clavier ?

Raccourcis utiles :

Édition :
- Tab : insérer une indentation de 4 espaces
- Ctrl/Cmd+A : tout sélectionner
- Ctrl/Cmd+C : copier
- Ctrl/Cmd+V : coller
- Ctrl/Cmd+Z : annuler
- Ctrl/Cmd+Y : rétablir

Exécution :
- Ctrl/Cmd+Entrée : exécuter le code (lorsque le focus est dans un éditeur)

Selon le navigateur et le système, certains raccourcis de navigateur peuvent varier.

Fonctionnalités clés

• Écrire HTML, CSS et JavaScript dans des onglets dédiés
• Prévisualisation en direct avec mises à jour instantanées
• Mode auto-run pour un rendu temps réel
• Mode manuel pour contrôler l'exécution
• Disposition double écran (horizontale ou verticale)
• Aperçu de fenêtre responsive (Mobile 375px, Tablette 768px, Bureau, largeur personnalisée)
• Mode aperçu plein écran
• Console en direct capturant logs, avertissements et erreurs avec numéros de ligne
• Nombreux modèles prêts à l'emploi
• Bibliothèques externes via CDN (CSS et JavaScript)
• Téléchargement du projet en un seul fichier HTML complet
• Sauvegarde automatique dans le localStorage du navigateur
• Iframe sandboxée pour un rendu sécurisé
• Mode sombre
• 100% côté client - aucun serveur requis
• Fonctionne hors ligne après chargement
• Design responsive pour tous les écrans
• Sans inscription ni connexion