Éditeur HTML en ligne avec aperçu en direct — Numio

Écrivez du HTML, du CSS et du JavaScript et voyez l’aperçu se mettre à jour en direct. Les messages de console s’affichent dessous. Gratuit, dans le navigateur.

Fonctionne dans le navigateur · Sans inscription

Code (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counter</title>
  <style>
    body { font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 90vh; margin: 0; background: #f5f7fb; }
    .card { padding: 24px 32px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); text-align: center; }
    button { font: inherit; padding: 10px 20px; border: 0; border-radius: 999px; background: #2563eb; color: #fff; cursor: pointer; }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello, HTML!</h1>
    <p>Clicked <strong id="count">0</strong> times</p>
    <button id="button" type="button">Click me</button>
  </div>
  <script>
    let count = 0;
    document.getElementById("button").addEventListener("click", () => {
      count += 1;
      document.getElementById("count").textContent = count;
      console.log("Button clicked", count);
    });
    console.log("Page ready");
  </script>
</body>
</html>

Ctrl/⌘ + Entrée pour exécuter

Aperçu

Mettre à jour l’aperçu automatiquement

Console

Aucune sortie pour l’instant. Cliquez sur Exécuter pour voir le résultat ici.

Le code s’exécute dans votre navigateur ; il n’est pas envoyé en ligne.

Mode d’emploi

Écrivez du HTML, avec le CSS dans <style> et le JavaScript dans <script>.
L’aperçu se met à jour automatiquement pendant la saisie.
Consultez les messages de console sous l’aperçu.

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 16px; }
  button { padding: 8px 16px; }
</style>
</head>
<body>
  <h1>Bonjour !</h1>
  <button id="btn">Cliquez ici</button>
  <p id="out"></p>
  <script>
    let n = 0;
    document.getElementById("btn").onclick = () => {
      n++;
      document.getElementById("out").textContent = "Clics : " + n;
      console.log("click", n);
    };
  </script>
</body>
</html>

Détails et limites

L’aperçu s’exécute dans un cadre isolé (sandbox). Ses scripts ne peuvent accéder ni à cette page ni à ses cookies.

Vous préférez actualiser vous-même ? Désactivez la mise à jour automatique et cliquez sur Exécuter.

FAQ

Puis-je utiliser du CSS et du JavaScript ?

Oui. Placez le CSS dans une balise <style> et le JavaScript dans une balise <script>, dans le même document.

Où s’affiche la sortie de console.log ?

Les messages de console de l’aperçu sont listés juste en dessous.

Mon code est-il envoyé en ligne ?

Non. L’aperçu est généré dans votre navigateur et rien n’est envoyé à un serveur.

Références des formats

Page de l’outil mise à jour le : 2026-10-22