Online HTML Editor mit Live-Vorschau — Numio

HTML, CSS und JavaScript schreiben und die Vorschau live mitverfolgen. Konsolenmeldungen erscheinen darunter. Kostenlos, direkt im Browser.

Läuft im Browser · Ohne Registrierung

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>

Strg/⌘ + Enter zum Ausführen

Vorschau

Vorschau automatisch aktualisieren

Konsole

Noch keine Ausgabe. Klicke auf „Ausführen“, um hier das Ergebnis zu sehen.

Der Code läuft lokal in deinem Browser und wird nicht hochgeladen.

Anwendung

HTML schreiben, CSS in <style> und JavaScript in <script>.
Die Vorschau aktualisiert sich beim Tippen automatisch.
Konsolenmeldungen unter der Vorschau prüfen.

Beispiel

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

Details und Einschränkungen

Die Vorschau läuft in einem abgeschotteten Frame (Sandbox). Ihre Skripte haben keinen Zugriff auf diese Seite oder deren Cookies.

Lieber selbst aktualisieren? Automatische Aktualisierung ausschalten und auf „Ausführen“ klicken.

FAQ

Kann ich CSS und JavaScript verwenden?

Ja. Schreibe CSS in ein <style>-Tag und JavaScript in ein <script>-Tag im selben Dokument.

Wo erscheint die Ausgabe von console.log?

Konsolenmeldungen aus der Vorschau werden direkt darunter aufgelistet.

Wird mein Code hochgeladen?

Nein. Die Vorschau entsteht in deinem Browser, und es wird nichts an einen Server gesendet.

Formatreferenzen

Tool-Seite aktualisiert: 2026-10-22