Buka File HTML Online - HTML Viewer, Editor & Live Preview

Buka dan pratinjau file HTML online gratis. Edit HTML dengan live preview real-time, format kode, dan uji halaman web dengan aman di browser Anda.

Penampil HTML

1488

Editor

Kode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Halo Dunia!</h1>
        <p>Ini adalah pratinjau langsung kode HTML Anda.</p>
        <button onclick="alert('Berhasil!')">Klik Saya</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Halo Dunia!</h1>
        <p>Ini adalah pratinjau langsung kode HTML Anda.</p>
        <button onclick="alert('Berhasil!')">Klik Saya</button>
    </div>
</body>
</html>

Pratinjau

Pratinjau Langsung

Anda mungkin juga membutuhkan

HTML ke JSON

Konversi struktur HTML menjadi pohon JSON.

Buka alat

Pemadat/Pemformat HTML

Minimalkan atau format teks HTML dengan indentasi 2/4 spasi.

Buka alat

Penampil Markdown

Pratinjau dan edit Markdown dengan visualisasi langsung.

Buka alat

Penampil XML Online

Buka, lihat, dan format file XML secara online dengan tree view dan validasi.

Buka alat

Bagaimana Menggunakan Penampil HTML?

Ketik atau tempel kode HTML Anda ke panel editor.

Panel pratinjau akan diperbarui secara otomatis untuk menampilkan hasil render.

Gunakan tombol bilah alat untuk Menyalin, Menghapus, atau Beralih Layar Penuh.

Fitur Utama

Pratinjau Real-time

Lihat secara instan bagaimana kode HTML Anda dirender saat Anda mengetik.

Privasi Terjamin

Kode Anda tidak pernah meninggalkan browser Anda. Semua pemrosesan dilakukan secara lokal.

Desain Responsif

Gunakan tampilan terpisah atau buka layar penuh untuk pengalaman pengeditan yang lebih baik.

Pertanyaan yang Sering Diajukan

Bagaimana cara membuka file HTML online dan melihat pratinjau?

Tempel kode HTML atau muat file, dan pratinjau yang dirender akan langsung diperbarui. Ini memudahkan pengecekan HTML cepat dan debugging.

Bisakah saya menguji CSS dan JavaScript eksternal di HTML viewer ini?

Ya. Resource eksternal standar dapat dimuat di pratinjau jika diizinkan oleh kebijakan keamanan browser Anda.