Softonic

Penampil HTML Terender

Langkah 1 / 2
Berikutnya

Tempel HTML apa pun (template email, potongan halaman hasil scraping, atau contoh dari dokumentasi) lalu klik Render untuk melihatnya digambar di dalam iframe terisolasi. Bingkai berjalan dengan sandbox paling ketat milik peramban: skrip tidak dieksekusi, formulir tidak bisa mengirim apa pun, dan markup tidak bisa bernavigasi maupun menyentuh halaman di sekitarnya. Ini cara tercepat untuk menjawab “seperti apa sebenarnya tampilan markup ini” tanpa menyiapkan server staging.

Cara mempratinjau HTML

  1. 1

    Tempel HTML Anda

    Masukkan dokumen lengkap atau potongan lepas ke kotak sumber. Apa yang Anda tempel adalah persis yang dirender, apa adanya.

  2. 2

    Klik Render

    Penampil menulis HTML Anda ke dalam iframe terisolasi dan menampilkan hasilnya langsung di halaman.

  3. 3

    Baca pratinjau

    Bingkai menggambar markup Anda seperti yang dilakukan peramban: judul, tabel, daftar, gaya inline, dan SVG semuanya muncul.

  4. 4

    Sesuaikan dan render lagi

    Ubah sumbernya dan render sebanyak yang Anda mau untuk membandingkan tampilan tiap versi.

Mengapa bingkai diisolasi

HTML yang ditempel bisa berisi apa saja: tag <script>, trik <img onerror="...">, formulir yang mengirim data ke suatu tempat, atau <iframe> yang memuat situs lain. Agar tak satu pun dari itu menyentuh halaman, pratinjau ditulis ke dalam <iframe sandbox> dengan atribut sandbox kosong, pengaturan paling ketat yang ada. Dalam mode ini, peramban sekaligus memblokir eksekusi skrip, pengiriman formulir, pop-up, navigasi tingkat atas, dan akses same-origin. Anda melihat hasil visualnya tanpa memberi kuasa apa pun pada markup.

Karena skrip tidak pernah berjalan, apa pun yang bergantung pada JavaScript (komponen web yang terhidrasi saat dimuat, grafik yang menggambar dirinya sendiri, framework yang terpasang ke <div> kosong) hanya menampilkan markup statisnya, bukan hasil berbasis skripnya. Ini kompromi yang disengaja: pratinjau yang aman dan dapat diprediksi ketimbang yang interaktif.

Yang dirender dengan baik oleh penampil

Jenis konten Catatan
HTML email Tata letak berbasis tabel dan gaya inline tampil seperti yang digambar kebanyakan klien
Isi entri blog Judul, daftar, kutipan, dan gambar tampil tanpa skrip sama sekali
Potongan hasil scraping Menunjukkan apakah markup yang Anda ambil cukup lengkap untuk berdiri sendiri
SVG inline Tergambar pada ukuran berapa pun, praktis untuk memeriksa ikon
Markup komponen statis Markup dirender; perilakunya di JavaScript tidak

Penggunaan yang baik untuk alat ini

  • QA template email. Tempel hasil ekspor dari editor email Anda dan lihat tata letaknya tanpa mengirim pesan uji ke diri sendiri.
  • Pemeriksaan cepat data scraping. Anda mengambil sedikit innerHTML dari sebuah halaman: apakah ia dirender kembali menjadi sesuatu yang masuk akal? Jika tidak, potongan itu mungkin belum lengkap.
  • Peninjauan Markdown ke HTML. Lewatkan teks melalui konverter (alat HTML ke Markdown melakukan bolak-balik) lalu pratinjau HTML hasilnya di sini.
  • Belajar dan mengajar. Tempel contoh dari dokumentasi dan amati persis bagaimana peramban menatanya.

Hal yang perlu diperhatikan

  • URL relatif. Gambar dan lembar gaya yang dirujuk lewat jalur relatif seperti /assets/logo.png tidak punya server untuk mengurainya, jadi tidak akan termuat. Gunakan URL absolut https:// atau URI data: jika Anda butuh sebuah gambar muncul.
  • Sumber daya eksternal. Font, lembar gaya, dan gambar yang dimuat dari situs lain bergantung pada izin situs tersebut; sebagian mengirim header yang memblokir pemuatan di dalam bingkai.
  • Tanpa skrip. Jika markup Anda baru hidup dengan JavaScript, pratinjau menampilkan keadaannya sebelum skrip berjalan. Itu memang diharapkan, bukan bug.

Pertanyaan yang Sering Diajukan

Ya. Pratinjau berjalan di dalam iframe yang sepenuhnya terisolasi tanpa izin apa pun, jadi skrip tidak bisa dieksekusi dan markup tidak bisa menjangkau halaman di sekitarnya. Bahkan HTML berbahaya hanya bisa menggambar dirinya sendiri di dalam bingkai.

Tidak. Sandbox memblokir eksekusi skrip sepenuhnya, jadi tag <script> dan penangan peristiwa inline diabaikan. Anda melihat markup statis, dan justru itulah yang membuat pratinjau aman.

Jalur relatif tidak punya apa pun untuk diurai, dan sebagian host mengirim header yang mencegah gambar mereka termuat di dalam bingkai. Gunakan URL absolut https://, atau sematkan gambar sebagai URI data:.

Ya. Tempel seluruh dokumen (doctype, <head>, <body>, dan semuanya) dan ia dirender apa adanya. Potongan lepas juga berfungsi; peramban melengkapi sisanya.

Alat ini merender HTML yang Anda tempel sebagai teks; ia tidak pernah mengambil URL. Anda mengontrol persis apa yang dirender, yang berguna untuk template email, potongan hasil scraping, dan debugging cepat.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Generator EditorConfig

Buat file .editorconfig dari aturan indentasi, akhir baris, dan charset Anda, lalu tambahkan bagian yang tepat untuk tiap bahasa di repositori Anda: Python, Go, YAML, Makefile, dan lainnya.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

Alat ini tersedia dalam bahasa lain