Tempel HTML dan lihat hasilnya di penampil HTML — tampilan perangkat, konsol langsung, ekspor PNG dan PDF, serta tautan yang membawa dokumennya di dalam URL itu sendiri. Hanya itu isi situs ini.

Apa itu penampil HTML?

Penampil HTML adalah perkakas yang menerima markup HTML mentah dan merendernya menjadi halaman web yang hidup, tanpa mengharuskan kamu menyimpan markup itu ke berkas lalu membukanya di browser. Bentuk yang paling umum adalah kotak teks tempel-dan-render: kamu menempel HTML di kiri, hasilnya muncul di kanan, dan setiap perubahan memperbarui pratinjau sambil kamu mengetik. Biasanya dipakai untuk memeriksa HTML buatan AI, men-debug templat email, memastikan keluaran komponen React, dan membagikan mockup visual lewat URL.

Cara kerja penampil HTML

Penampil HTML modern berjalan sepenuhnya di browser. HTML yang ditempel pengguna ditulis ke dalam elemen <iframe srcDoc="..."> di halaman, sehingga browser merendernya seolah-olah itu dokumen terpisah yang dimuat dari asal yang berbeda. Atribut sandbox pada iframe membatasi apa yang boleh dilakukan HTML tersebut: skrip biasanya diizinkan agar komponen interaktif berfungsi, tetapi iframe tidak bisa menavigasi halaman induk atau membaca cookie-nya.

Karena proses render terjadi di sisi klien, HTML sumbernya tidak perlu keluar dari browser pengguna. Tidak ada unggahan, tidak ada pengurai di server, dan tidak ada risiko operator situs membaca kode kamu. Konsekuensinya, penampil berbasis browser tidak bisa merender apa pun yang butuh sumber daya server — endpoint API lokal kamu, misalnya, tidak bisa dijangkau dari dalam iframe — dan format berbagi lewat fragmen URL berhenti di beberapa kilobyte; lewat dari itu, lebih baik pindahkan HTML-nya ke sebuah berkas.

Penampil HTML versus CodePen, JSFiddle, atau berkas lokal

Masing-masing unggul pada cakupan yang berbeda. CodePen dan JSFiddle adalah pilihan tepat ketika kamu perlu membagikan demo lengkap dan permanen lintas sesi: potonganmu disimpan di server mereka, diberi URL yang stabil, dan ada fitur kolaborasi di paket berbayar. Mereka mengharapkan kamu masuk, mengaitkan potongan itu ke akunmu, dan memperlakukannya seperti berkas proyek kecil. Konsekuensinya, kodemu berada di infrastruktur orang lain, editornya menambah banyak antarmuka (koleksi, pengaturan, komentar), dan halamannya lebih berat daripada sekadar pratinjau.

Membuka berkas HTML langsung di browser adalah pilihan paling ringan untuk render sekali jalan — tanpa melibatkan situs pihak ketiga sama sekali. Konsekuensinya, kamu harus menyimpan berkasnya lebih dulu, browser bisa memperlakukannya sebagai asal yang berbeda dari localhost, dan kamu tidak bisa membagikannya tanpa mengirim berkas itu atau meng-hosting-nya di suatu tempat.

Penampil HTML tempel-dan-render berada di antara keduanya. Tidak ada penyimpanan, tidak ada akun, tidak ada berkas proyek — tempel, lihat hasilnya, bagikan lewat fragmen URL kalau mau. Ini perkakas yang tepat ketika HTML-nya bersifat sementara: potongan dari AI, pratinjau templat email, pemeriksaan cepat sebuah komponen. Begitu potongan itu mulai terasa seperti proyek sungguhan — kontrol versi, kolaborator, penyimpanan permanen — saatnya pindah ke CodePen atau berkas lokal.

Kenapa cuma satu perkakas

Dulu ada empat. Di sebelah penampil ada editor Markdown, penampil JSON, dan halaman terpisah untuk HTML ke PDF; tidak ada yang datang mencari ketiganya, jadi semuanya dipensiunkan dan ekspor PDF dilebur ke dalam penampil itu sendiri. Yang tersisa adalah hal yang memang dicari orang. Ia layak mendapat tempatnya: kalau tidak bisa dijelaskan dalam satu kalimat, tidak akan dirilis.

Cara kerjanya

Tiga hal yang penting: kecepatan, keamanan, dan lebar yang realistis. Kecepatan berarti pratinjau diperbarui sambil kamu mengetik, bukan setelah menekan tombol. Keamanan berarti apa pun yang kamu tempel berjalan di dalam iframe ber-sandbox, sehingga tidak bisa membaca cookie atau mengalihkan tab kamu. Lebar yang realistis berarti kamu bisa berpindah antara desktop, tablet, dan ponsel dengan sekali klik, bukan dengan menarik-narik jendela browser.

Editornya adalah instansi CodeMirror penuh dengan penyorotan sintaks, pencocokan kurung, nomor baris, dan pintasan papan ketik. Pratinjaunya adalah iframe ber-sandbox dengan skrip yang diizinkan, sehingga komponen interaktif benar-benar berperilaku semestinya. Pembatas antara editor dan pratinjau bisa digeser dan mengingat posisinya antar kunjungan. Draf tersimpan otomatis di localStorage, dan tombol berbagi menyandikan HTML kamu sebagai base64 ke dalam fragmen URL (#s=…) sehingga tautannya sendiri yang membawa isinya — tidak ada yang menyentuh server.

Yang tidak akan berubah

Gratis. Tanpa daftar, tanpa akun, tanpa dinding email.
Berjalan di browser kamu. HTML kamu tidak meninggalkan perangkatmu kecuali kamu membagikan tautan.
Tidak ada yang disimpan di perangkatmu kecuali kamu setuju. Kalau kamu menolak, kunjungan tetap kami hitung, tetapi anonim dan tanpa cookie.
Tanpa fitur yang menjalar. Kalau sesuatu tidak bisa dijelaskan dalam satu kalimat, tidak akan dirilis.

Dibuat dan dirawat oleh Axel, pengembang mandiri di Norwegia.