Online HTML Editor with Live Preview — Numio

Write HTML, CSS and JavaScript and see a live preview as you type. Console messages appear below. Free and runs in your browser.

Runs in your browser · No sign-up

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/⌘ + Enter to run

Preview

Update preview automatically

Console

No output yet. Press Run to see results here.

Code runs locally in your browser; it is not uploaded.

How to use

Write HTML, with CSS in <style> and JavaScript in <script>.
Watch the preview update automatically as you type.
Check console messages below the preview.

Example

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

Details and limitations

The preview runs in a sandboxed frame. Its scripts cannot access this page or its cookies.

Prefer to refresh manually? Turn off automatic updates and press Run.

FAQ

Can I use CSS and JavaScript?

Yes. Put CSS in a <style> tag and JavaScript in a <script> tag in the same document.

Where does console.log output go?

Console messages from the preview are listed below it.

Is my code uploaded?

No. The preview is generated in your browser and nothing is sent to a server.

Format references

Tool page updated: 2026-10-22