Canlı Önizlemeli Online HTML Düzenleyici — Numio

HTML, CSS ve JavaScript yazın, önizlemeyi yazarken canlı görün. Konsol mesajları altta görünür. Ücretsiz, doğrudan tarayıcınızda.

Tarayıcınızda çalışır · Üyelik gerekmez

Kod (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>

Çalıştırmak için Ctrl/⌘ + Enter

Önizleme

Önizlemeyi otomatik güncelle

Konsol

Henüz çıktı yok. Sonucu burada görmek için Çalıştır'a basın.

Kod tarayıcınızda yerel olarak çalışır; hiçbir yere yüklenmez.

Nasıl kullanılır?

HTML yazın; CSS'i <style>, JavaScript'i <script> içine koyun.
Önizleme siz yazarken otomatik olarak güncellenir.
Önizlemenin altındaki konsol mesajlarını kontrol edin.

Örnek

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

Ayrıntılar ve sınırlamalar

Önizleme, korumalı (sandbox) bir çerçevede çalışır. İçindeki betikler bu sayfaya veya çerezlerine erişemez.

Elle yenilemeyi mi tercih edersiniz? Otomatik güncellemeyi kapatıp Çalıştır'a basın.

FAQ

CSS ve JavaScript kullanabilir miyim?

Evet. Aynı belgede CSS'i bir <style> etiketine, JavaScript'i bir <script> etiketine yazın.

console.log çıktısı nerede görünür?

Önizlemeden gelen konsol mesajları hemen altında listelenir.

Kodum yükleniyor mu?

Hayır. Önizleme tarayıcınızda oluşturulur ve sunucuya hiçbir şey gönderilmez.

Biçim kaynakları

Araç sayfasının güncellenme tarihi: 2026-10-22