Trình soạn thảo HTML Online xem trước trực tiếp — Numio

Viết HTML, CSS và JavaScript và xem trước trực tiếp khi gõ. Thông báo console hiển thị bên dưới. Miễn phí, chạy ngay trên trình duyệt.

Chạy trong trình duyệt · Không cần đăng ký

Mã (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 để chạy

Xem trước

Tự động cập nhật bản xem trước

Console

Chưa có kết quả. Nhấn Chạy để xem kết quả tại đây.

Mã chạy ngay trên trình duyệt của bạn và không được tải lên.

Cách sử dụng

Viết HTML, đặt CSS trong <style> và JavaScript trong <script>.
Bản xem trước tự động cập nhật khi bạn gõ.
Xem thông báo console bên dưới bản xem trước.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 16px; }
  button { padding: 8px 16px; }
</style>
</head>
<body>
  <h1>Xin chào!</h1>
  <button id="btn">Bấm vào đây</button>
  <p id="out"></p>
  <script>
    let n = 0;
    document.getElementById("btn").onclick = () => {
      n++;
      document.getElementById("out").textContent = "Số lần bấm: " + n;
      console.log("click", n);
    };
  </script>
</body>
</html>

Chi tiết và giới hạn

Bản xem trước chạy trong một khung sandbox. Script trong đó không thể truy cập trang này hay cookie của trang.

Muốn tự làm mới? Hãy tắt tự động cập nhật rồi nhấn Chạy.

FAQ

Có dùng được CSS và JavaScript không?

Có. Đặt CSS trong thẻ <style> và JavaScript trong thẻ <script> trong cùng một tài liệu.

Kết quả console.log hiện ở đâu?

Thông báo console từ bản xem trước được liệt kê ngay bên dưới.

Mã của tôi có bị tải lên không?

Không. Bản xem trước được tạo trong trình duyệt và không có gì được gửi tới máy chủ.

Tài liệu tham khảo về định dạng

Trang công cụ được cập nhật: 2026-10-22