Editor HTML Online dengan Pratinjau Langsung — Numio

Tulis HTML, CSS, dan JavaScript lalu lihat pratinjaunya langsung saat mengetik. Pesan konsol tampil di bawahnya. Gratis, di browser.

Berjalan di browser Anda · Tanpa pendaftaran

Kode (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 untuk menjalankan

Pratinjau

Perbarui pratinjau otomatis

Konsol

Belum ada output. Tekan Jalankan untuk melihat hasilnya di sini.

Kode berjalan di browser Anda dan tidak diunggah.

Cara penggunaan

Tulis HTML, dengan CSS di <style> dan JavaScript di <script>.
Pratinjau diperbarui otomatis saat Anda mengetik.
Periksa pesan konsol di bawah pratinjau.

Contoh

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

Detail dan batasan

Pratinjau berjalan di frame sandbox. Skrip di dalamnya tidak dapat mengakses halaman ini atau cookie-nya.

Ingin memperbarui manual? Matikan pembaruan otomatis lalu tekan Jalankan.

FAQ

Bisakah saya memakai CSS dan JavaScript?

Bisa. Letakkan CSS di tag <style> dan JavaScript di tag <script> dalam dokumen yang sama.

Di mana output console.log muncul?

Pesan konsol dari pratinjau ditampilkan di bawahnya.

Apakah kode saya diunggah?

Tidak. Pratinjau dibuat di browser Anda dan tidak ada yang dikirim ke server.

Referensi format

Halaman alat diperbarui: 2026-10-22