devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Audit du site

Éditeur HTML, CSS et JavaScript en ligne

Un bac à sable de code léger : modifiez HTML, CSS et JavaScript côte à côte, voyez le résultat instantanément, consultez la console et téléchargez votre page dans un seul fichier HTML.

Mis à jour le
Modèle
Console

Votre code est sauvegardé automatiquement dans ce navigateur. L’aperçu s’exécute dans un cadre isolé, sans accès à ce site.

Vos données ne quittent jamais votre ordinateur. Tout le traitement se fait localement dans votre navigateur.

Comment utiliser : Éditeur HTML en ligne

  1. Écrivez le balisage dans HTML, les styles dans CSS et les scripts dans JavaScript.
  2. L’aperçu se met à jour pendant la saisie (désactivez Exécution automatique pour les scripts lourds, puis cliquez sur Exécuter ou appuyez sur Ctrl+Entrée).
  3. Vérifiez la sortie de console.log et les erreurs sous l’aperçu.
  4. Cliquez sur Télécharger .html pour enregistrer l’ensemble dans un seul fichier.

Un bac à sable HTML rapide

Vous avez parfois simplement besoin de tester un extrait : vérifier le comportement d’une propriété CSS, déboguer une mise en page, prototyper un composant ou essayer le code d’un tutoriel. Cet éditeur vous offre les trois volets classiques et un aperçu en direct, sans compte, sans projet ni étape de compilation. Votre travail est stocké dans votre navigateur (stockage local) : il est donc toujours là à votre retour.

Comment l’aperçu est isolé

Le résultat s’exécute dans un <iframe sandbox> sans l’autorisation allow-same-origin. La page dispose ainsi de sa propre origine unique : les scripts peuvent s’exécuter, utiliser les alertes et les formulaires, mais ne peuvent pas lire les cookies ni le stockage de ce site. C’est la même approche que celle de CodePen et JSFiddle.

Astuces

  • Tabulation insère deux espaces au lieu de quitter l’éditeur.
  • Chargez des bibliothèques depuis un CDN avec une balise classique dans le volet HTML, par exemple <script src="https://cdn.jsdelivr.net/npm/…"></script>.
  • Les erreurs d’exécution et les promesses rejetées apparaissent dans le panneau de console avec leur numéro de ligne.
  • Le fichier téléchargé contient votre HTML, CSS et JS dans un seul document, prêt à être ouvert localement ou mis en ligne.

Au-delà du bac à sable

Mettez votre code en forme avec le formateur HTML, le formateur CSS et le formateur JavaScript, ou réduisez-le pour la production avec le minificateur HTML et le minificateur JavaScript.

Aussi recherché comme : aperçu html en ligne, éditeur html css js en ligne, prévisualisation html css, visualiseur html, tester code html en ligne, éditeur html en direct, bac à sable html, rendu html en ligne.

Outils complémentaires : Éditeur HTML en ligne

  • Markdown vers HTML — Rédigez ou collez du Markdown et obtenez instantanément du HTML propre, avec un aperçu en direct nettoyé, des tableaux GFM, des listes de tâches et des blocs de code délimités.
  • Minifieur CSS — Collez une feuille de style pour la réduire instantanément.
  • Formateur SQL — Collez une requête ou une migration complète pour obtenir un SQL lisible, avec une clause par ligne, des jointures alignées et une casse des mots-clés cohérente, selon la grammaire de votre base de données.
  • Testeur d’expressions régulières — Saisissez un modèle et observez les correspondances s'afficher en temps réel dans votre texte de test.

Questions fréquentes

Mon code est-il sauvegardé ?
Oui, automatiquement dans le stockage local de ce navigateur. Il n’est pas envoyé sur un serveur ; effacez les données du site ou cliquez sur un modèle pour repartir de zéro.
Puis-je utiliser des bibliothèques externes ?
Oui : ajoutez des balises <script> ou <link> pointant vers un CDN dans le volet HTML.
Est-il sûr d’exécuter du code non fiable ici ?
L’aperçu s’exécute dans un iframe sandbox avec sa propre origine, il ne peut donc pas accéder à ce site. Il s’exécute tout de même dans votre navigateur : n’exécutez que du code que vous acceptez de lancer.
Prend-il en charge TypeScript, SCSS ou React JSX ?
Non : l’aperçu n’exécute que du HTML, du CSS et du JavaScript standard. Compilez d’abord les autres langages.
Puis-je installer Éditeur HTML en ligne en tant qu’application web et l’utiliser hors ligne ?
Oui. Éditeur HTML en ligne est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.

Outils similaires

localFormateur HTMLCollez du balisage minifié ou désordonné et obtenez un HTML propre, indenté de manière cohérente, y…localFormateur JavaScriptRendez lisible du JavaScript, JSON ou JSX avec l'indentation et le style d'accolades de votre choix, ou…localFormateur CSSTransformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media…localMinifieur HTMLAllégez vos pages et modèles HTML en supprimant les commentaires et les espaces superflus, en minifiant…localMarkdown vers HTMLRédigez ou collez du Markdown et obtenez instantanément du HTML propre, avec un aperçu en direct nettoyé,…localMinifieur CSSCollez une feuille de style pour la réduire instantanément. Vous verrez la taille d’origine et la taille…