Apa itu Pratinjau HTML Langsung?

Pratinjau HTML Langsung adalah playground kode interaktif yang memungkinkan Anda menulis HTML, CSS, dan JavaScript serta melihat hasilnya secara instan. Anggap saja sebagai CodePen ringan langsung di browser Anda — tidak perlu mendaftar.

Baik Anda pemula yang sedang belajar pengembangan web atau pengembang berpengalaman yang membuat prototipe ide cepat, alat ini memberikan umpan balik cepat tanpa perlu menyiapkan lingkungan lokal.

Sempurna untuk: Pembuatan prototipe cepat, pembelajaran pengembangan web, pengujian cuplikan kode, dan berbagi contoh langsung — semuanya tanpa perlu pengaturan atau instalasi.

Sorotan Utama

Editor Tiga Tab

Tab terpisah untuk HTML, CSS, dan JavaScript dengan penyorotan sintaks lengkap yang didukung oleh CodeMirror untuk pengalaman pengkodean profesional.

Pratinjau Langsung

Kode Anda dirender di iframe terisolasi saat Anda mengetik, dengan debouncing cerdas untuk menjaga performa tetap lancar.

Konsol Bawaan

Lihat keluaran console.log, warn, error, dan info tanpa membuka DevTools browser — debug langsung di antarmuka.

Unduh Pekerjaan Anda

Ekspor file HTML lengkap dan mandiri dengan CSS dan JS tertanam inline — siap digunakan di mana saja.

Cara Menggunakan

Menulis Kode

Pilih Tab

Pilih antara tab HTML, CSS, atau JS di bagian atas panel editor untuk mulai mengkode dalam bahasa pilihan Anda.

Ketik Kode Anda

Tulis kode Anda di editor. Panel pratinjau di sebelah kanan diperbarui secara otomatis setelah jeda singkat, memberikan umpan balik visual instan.

Beralih dan Bangun

Pindah antar tab untuk membangun struktur HTML Anda, gaya dengan CSS, dan tambahkan interaktivitas dengan JavaScript — semuanya dalam alur kerja yang mulus.

Menggunakan Template

Klik tombol Template di toolbar untuk memilih template pemula dan mempercepat proyek Anda. Pilih dari:

Kosong

Mulai dari lembaran kosong tanpa kode yang sudah ditulis — sempurna untuk membangun dari awal.

Hello World

Halaman dasar dengan tombol dan penghitung klik untuk mendemonstrasikan interaksi HTML, CSS, dan JavaScript.

Tata Letak Flexbox

Kisi kartu responsif menggunakan Flexbox — pelajari teknik tata letak CSS modern.

Animasi CSS

Animasi pemuatan dengan keyframe yang mendemonstrasikan transisi CSS yang mulus dan efek.

Catatan: Memilih template menggantikan kode saat ini di ketiga editor. Pastikan untuk mengunduh pekerjaan Anda terlebih dahulu jika Anda ingin menyimpannya.

Menyesuaikan Tata Letak

Ubah ukuran — Seret pegangan antara editor dan pratinjau untuk membuat salah satu panel lebih besar atau lebih kecil sesuai kebutuhan Anda
Alihkan tata letak — Klik tombol tata letak untuk beralih antara tampilan berdampingan (horizontal) dan bertumpuk (vertikal)
Pratinjau layar penuh — Klik tombol perluas untuk melihat pratinjau dalam layar penuh. Tekan Escape atau klik tombol tutup untuk kembali

Menggunakan Konsol

Klik tombol Konsol (ikon terminal) untuk membuka panel konsol. Setiap panggilan console.log(), console.warn(), console.error(), atau console.info() dalam JavaScript Anda akan muncul di sini dengan ikon dan gaya yang sesuai.

Tanpa Konsol

Debugging Tradisional

Buka DevTools browser
Navigasi ke tab Konsol
Beralih antar jendela
Kehilangan fokus pada kode

Dengan Konsol Bawaan

Alur Kerja yang Disederhanakan

Akses konsol sekali klik
Lihat keluaran inline
Tetap di editor
Hapus dengan ikon tempat sampah

Mengunduh Kode Anda

Klik tombol Unduh untuk menyimpan pekerjaan Anda sebagai file preview.html tunggal. File yang diekspor mencakup HTML Anda di body, CSS di tag <style>, dan JavaScript di tag <script> — siap dibuka di browser apa pun.

Tip pro: File yang diunduh sepenuhnya mandiri tanpa dependensi eksternal. Anda dapat membagikannya, menghosting, atau menggunakannya sebagai titik awal untuk proyek yang lebih besar.

Fitur

Editor Kode dengan Penyorotan Sintaks

Editor didukung oleh CodeMirror dan menyediakan penyorotan sintaks untuk HTML, CSS, dan JavaScript. Ini juga mencakup kurung dan tag penutup otomatis, pencocokan kurung, dan indentasi yang tepat dengan tab lembut.

Penyorotan Sintaks

Sintaks berkode warna untuk HTML, CSS, dan JavaScript membuat kode lebih mudah dibaca dan dipahami.

Penutupan Otomatis

Secara otomatis menutup kurung, tanda kutip, dan tag HTML saat Anda mengetik untuk pengkodean yang lebih cepat.

Indentasi Cerdas

Indentasi yang tepat dengan tab lembut membuat kode Anda tetap bersih dan terformat dengan baik.

Pratinjau Langsung

Kode Anda berjalan di dalam iframe terisolasi yang diperbarui secara otomatis saat Anda mengetik. Pratinjau mendukung dokumen HTML lengkap dengan CSS dan JavaScript tertanam, memberikan Anda representasi akurat tentang bagaimana kode Anda akan terlihat di browser nyata.

Iframe terisolasi untuk keamanan
Pembaruan otomatis saat Anda mengetik
Dukungan dokumen HTML lengkap
CSS dan JavaScript tertanam
Rendering browser nyata

Konsol Bawaan

Tidak perlu membuka DevTools browser Anda. Panel konsol bawaan menangkap semua keluaran konsol dari JavaScript Anda — termasuk pesan log, warn, error, dan info. Lencana pada tombol konsol menunjukkan berapa banyak pesan yang telah dicatat.

Metode Konsol	Ikon	Kasus Penggunaan
`console.log()`	Info	Keluaran debugging umum
`console.warn()`	Peringatan	Masalah potensial atau penghentian dukungan
`console.error()`	Kesalahan	Kesalahan runtime dan pengecualian
`console.info()`	Info	Pesan informasi

Panel yang Dapat Diubah Ukurannya

Seret pembagi antara editor dan pratinjau untuk mengalokasikan lebih banyak ruang ke panel mana pun yang Anda butuhkan. Pengubah ukuran mendukung tata letak horizontal dan vertikal serta membatasi antara 20% dan 80% untuk menjaga kedua panel tetap dapat digunakan.

Lebar Editor Minimum 20%

Lebar Editor Maksimum 80%

Pengalihan Tata Letak

Beralih antara tata letak horizontal (editor kiri, pratinjau kanan) dan tata letak vertikal (editor atas, pratinjau bawah) dengan sekali klik. Tata letak vertikal bekerja dengan baik di layar yang lebih sempit atau ketika Anda menginginkan pratinjau yang lebih lebar.

Horizontal

Tata letak berdampingan untuk layar lebar

Vertikal

Tata letak bertumpuk untuk layar sempit

Pratinjau Layar Penuh

Perluas pratinjau untuk mengisi seluruh layar Anda untuk tampilan bebas gangguan dari pekerjaan Anda. Keluar dengan menekan Escape atau mengklik tombol tutup di sudut kanan atas.

Pintasan keyboard: Tekan Escape untuk dengan cepat keluar dari mode layar penuh dan kembali ke editor.

Ekspor HTML

Unduh kreasi Anda sebagai file HTML mandiri. Dokumen yang diekspor mencakup doctype yang tepat, tag meta, dan CSS dan JavaScript Anda tertanam inline — tidak ada dependensi eksternal yang diperlukan.

Struktur HTML yang Diekspor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" c>
    <title>HTML Live Preview</title>
    <style>
        /* Your CSS here */
    </style>
</head>
<body>
    <!-- Your HTML here -->
    
    <script>
        // Your JavaScript here
    </script>
</body>
</html>

Template Pemula

Mulai dengan cepat dengan template bawaan yang mendemonstrasikan pola umum: halaman Hello World, tata letak kartu Flexbox, dan animasi keyframe CSS. Setiap template mengisi ketiga tab editor dengan kode contoh yang berfungsi.

Contoh kode yang sudah ditulis dan berfungsi
Pelajari dengan memeriksa implementasi nyata
Modifikasi template agar sesuai dengan kebutuhan Anda
Pahami praktik terbaik melalui contoh

Pertanyaan yang Sering Diajukan

Apakah kode saya dikirim ke server?

Tidak. Semua pengeditan kode, rendering pratinjau, dan keluaran konsol terjadi sepenuhnya di browser Anda. Tidak ada yang diunggah atau disimpan di server mana pun.

Privasi terjamin: Kode Anda tetap berada di perangkat Anda. Alat ini bekerja sepenuhnya offline setelah dimuat.

Bisakah saya menggunakan perpustakaan eksternal seperti Bootstrap atau jQuery?

Ya. Tambahkan tag <link> atau <script> di tab HTML yang menunjuk ke URL CDN, dan perpustakaan akan dimuat di dalam iframe pratinjau.

Contoh: Memuat Bootstrap dari CDN

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Mengapa JavaScript saya tidak berfungsi?

Pratinjau berjalan di iframe terisolasi dengan izin allow-scripts dan allow-modals. Sebagian besar JavaScript bekerja secara normal, tetapi beberapa API browser yang memerlukan izin tambahan mungkin dibatasi.

Periksa konsol bawaan untuk pesan kesalahan
Verifikasi sintaks Anda benar
Pastikan perpustakaan eksternal dimuat dengan benar
Beberapa API (clipboard, geolocation) mungkin dibatasi di iframe terisolasi

Masalah umum: API yang memerlukan izin pengguna (seperti akses clipboard atau geolocation) mungkin tidak berfungsi di lingkungan pratinjau terisolasi.

Bisakah saya menyimpan pekerjaan saya?

Gunakan tombol Unduh untuk mengekspor kode Anda sebagai file HTML mandiri. Anda dapat membuka kembali file ini di browser apa pun atau menempel kode kembali ke editor nanti.

Klik Unduh untuk menyimpan sebagai preview.html
File mencakup semua HTML, CSS, dan JavaScript
Tidak ada dependensi eksternal yang diperlukan
Buka di browser apa pun atau editor teks
Salin kode kembali ke editor kapan saja

Apakah editor mendukung perangkat mobile?

Ya. Di layar yang lebih kecil, tata letak secara otomatis beralih ke tampilan bertumpuk vertikal. Pengubah ukuran mendukung acara sentuh untuk seret-ubah ukuran di perangkat mobile dan tablet.

Jenis Perangkat	Tata Letak	Fitur
Desktop	Horizontal (default)	Fitur lengkap, seret-ubah ukuran
Tablet	Horizontal atau Vertikal	Pengubahan ukuran yang diaktifkan sentuh
Mobile	Vertikal (otomatis)	Antarmuka yang dioptimalkan sentuh

Panel konsol untuk apa?

Panel konsol menangkap keluaran dari console.log(), console.warn(), console.error(), dan console.info() dalam kode JavaScript Anda. Ini juga menangkap kesalahan runtime dan penolakan janji yang tidak ditangani.

Ini memungkinkan Anda untuk debug tanpa membuka alat pengembang browser Anda, menjaga alur kerja Anda tetap efisien dan fokus pada kode.

Lihat semua keluaran konsol di satu tempat
Jenis pesan berkode warna (log, warn, error, info)
Lencana penghitung menunjukkan total pesan
Hapus semua pesan dengan ikon tempat sampah
Menangkap kesalahan runtime secara otomatis