Penampil HTML

Tulis atau tempel HTML dan lihat hasil render secara instan di browser.

Tata Letak:Script dalam sandbox dan tidak dapat berjalan.

Kode HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

Pratinjau

Tentang alat ini

Penampil HTML memungkinkan Anda menulis atau menempelkan kode HTML dan segera melihat bagaimana ia dirender di browser. Pratinjau ditampilkan dalam iframe terisolasi dengan script dinonaktifkan, sehingga Anda dapat mempratinjau HTML dari sumber tidak tepercaya dengan aman.

Alat ini mendukung dokumen HTML lengkap (dengan head, CSS inline, dan blok style) serta fragmen HTML. Semua pemrosesan terjadi secara lokal di browser Anda.

Cara penggunaan

Ketik atau tempel HTML ke editor kode di sebelah kiri.
Klik Render untuk memperbarui pratinjau.
Beralih ke tata letak Ditumpuk untuk area pratinjau yang lebih tinggi.
Gunakan Tab untuk mengindentasi baris di editor.

Kasus penggunaan

Pengembang frontend menguji cuplikan HTML dengan cepat. Pengembang email mempratinjau template HTML. Pelajar HTML bereksperimen dengan tag dan melihat hasilnya seketika. Pengulas kode memverifikasi output render secara visual.

Pertanyaan umum

Mengapa script dinonaktifkan? — iframe pratinjau menggunakan sandbox="allow-same-origin" untuk memblokir eksekusi JavaScript, memungkinkan pratinjau HTML dari sumber tidak dikenal dengan aman.
Bisakah saya mempratinjau CSS? — Ya. Sertakan tag style di HTML atau gunakan inline styles. Stylesheet eksternal dari origin lain mungkin diblokir oleh CSP.
Apakah mendukung dokumen HTML lengkap? — Ya. Anda dapat menempelkan dokumen HTML lengkap termasuk tag DOCTYPE, head, dan body.