Pratinjau HTML / Tempat Bermain Kode

Tulis HTML, CSS, dan JavaScript di editor di bawah dan lihat hasilnya secara seketika di panel pratinjau.

Pratinjau

Cara kerjanya

  1. Tempel atau ketik HTML: masukkan kode HTML Anda, dokumen lengkap, fragmen, template, atau HTML email, di editor.
  2. Lihat rendering langsung: panel pratinjau menunjukkan dengan tepat bagaimana browser merender HTML Anda secara real-time.
  3. Iterasi cepat: edit dan pratinjau dalam siklus ketat tanpa beralih tab atau menyimpan file.

Mengapa menggunakan pratinjau HTML?

Saat menulis HTML untuk template, email, komponen, atau halaman statis, Anda butuh umpan balik konstan tentang bagaimana markup dirender. Membuka file di browser dan menyegarkan secara manual mengganggu alur Anda. Alat pratinjau HTML ini merender HTML Anda secara seketika saat Anda mengetik, memberikan pratinjau visual langsung di jendela yang sama, sempurna untuk iterasi cepat pada template, debugging masalah tata letak, dan menguji email HTML sebelum dikirim.

Fitur

Pertanyaan umum

Bisakah saya mempratinjau email HTML?

Ya. Tempel HTML email Anda, termasuk gaya inline dan tata letak tabel. Pratinjau merender persis seperti yang akan dilakukan klien email. Perlu dicatat bahwa font eksternal dan beberapa fitur CSS dapat berperilaku berbeda di klien email yang sebenarnya.

Apakah CSS dan JavaScript eksternal berfungsi?

Stylesheet eksternal yang dimuat melalui tag <link> mungkin tidak dimuat karena pembatasan CORS dalam pratinjau sandbox. Eksekusi JavaScript dibatasi oleh sandbox. Untuk hasil terbaik, gunakan CSS inline. Sumber daya eksternal dari CDN yang mengizinkan akses cross-origin akan dimuat secara normal.

Bisakah saya menggunakannya untuk menguji desain responsif?

Ya. Seret lebar panel pratinjau untuk mensimulasikan ukuran layar yang berbeda, atau gunakan preset viewport (mobile, tablet, desktop) untuk menguji breakpoint responsif Anda.

Bagaimana pratinjau live bekerja: iframe srcdoc

Elemen <iframe> diperkenalkan di HTML 4.0 (Desember 1997) untuk menyematkan satu dokumen di dalam dokumen lain. Selama dua dekade satu-satunya cara untuk mengisi iframe adalah melalui atribut src yang menunjuk ke URL. Atribut srcdoc, yang memungkinkan Anda meneruskan HTML iframe inline sebagai string, ditambahkan di HTML5 (W3C Rec, Oktober 2014) dan sekarang didukung oleh setiap browser modern. srcdoc adalah yang membuat alat pratinjau HTML berbasis browser mungkin tanpa unggahan server: Anda menulis HTML, alat membungkusnya dalam <iframe srcdoc="...">, browser merendernya dalam konteks terisolasi, dan tidak ada yang melintasi jaringan.

Atribut sandbox dan jebakan same-origin

<iframe sandbox> diperkenalkan di HTML5 untuk menerapkan kebijakan keamanan per-iframe. Tanpa nilai apa pun, sandbox paling restriktif berlaku: same-origin dibatasi (diperlakukan sebagai origin unik), skrip dinonaktifkan, formulir dinonaktifkan, navigasi level atas dinonaktifkan, plugin dinonaktifkan, kunci pointer dinonaktifkan, popup dinonaktifkan, autoplay media dinonaktifkan. Anda opt-in kembali dengan menambahkan token: sandbox="allow-scripts", allow-forms, allow-popups, allow-top-navigation, dll. Setiap token membuka satu kemampuan spesifik.

Kombinasi yang tidak boleh digunakan adalah sandbox="allow-scripts allow-same-origin" secara bersamaan: ini memungkinkan JavaScript memanggil document.domain dan kembali ke jendela induk, sepenuhnya mengalahkan sandbox. Browser memperingatkan ini di DevTools ketika Anda mengatur keduanya. Alat pratinjau ini mengatur allow-scripts dan secara eksplisit TIDAK allow-same-origin, sehingga JS pengguna berjalan tetapi tidak dapat membaca atau menulis DOM halaman induk, cookies, localStorage, IndexedDB, atau cache service-worker.

Content Security Policy, garis pertahanan kedua

Pertahanan terpisah tetapi terkait adalah Content-Security-Policy, header respons HTTP yang diperkenalkan di W3C CSP Level 1 (Candidate Recommendation, November 2012). CSP Level 3 adalah standar saat ini. Direktif kunci untuk alat pratinjau: frame-src (iframe mana yang dapat dimuat) dan script-src (skrip inline/eksternal mana yang dapat berjalan). Bahkan jika payload jahat lolos dari sandbox, CSP halaman host masih akan berlaku dan melarang sebagian besar jalur eksfiltrasi. Pertahanan mendalam: sandbox mengisolasi kode iframe, dan CSP host membatasi apa yang dapat dilakukan halaman host jika iframe entah bagaimana mempengaruhinya.

HTML klien email adalah dunia sendiri

Pratinjau yang merender HTML browser modern tidak merender HTML email. Klien email utama menggunakan mesin yang sangat berbeda: Gmail web menggunakan renderer berbasis WebKit dengan class-stripping dan dukungan tag <style> terbatas (ditambahkan 2016). Apple Mail / iOS Mail menggunakan WebKit, renderer paling permisif. Outlook desktop (2007 hingga 2019) merender HTML email melalui mesin rendering Microsoft Word: tidak ada dukungan blok <style>, tidak ada flex/grid, tidak ada elemen yang diposisikan, tidak ada animasi; gambar latar belakang memerlukan komentar kondisional VML. Keanehan Outlook ini adalah masalah terbesar dalam pengembangan email. Outlook 365 web adalah WebKit modern. «Outlook baru» yang diluncurkan 2023-2024 menggunakan Edge WebView2. Untuk pratinjau klien email nyata, gunakan layanan berbayar seperti Litmus atau Email on Acid.

Breakpoint responsif untuk diuji

Konvensi breakpoint CSS media-query berasal dari artikel «Responsive Web Design» Ethan Marcotte Mei 2010 di A List Apart. Dua framework dominan memilih batas yang berbeda:

Silsilah standar HTML

Referensi cepat untuk standar yang dirender pratinjau Anda: HTML 2.0 (RFC 1866, November 1995), spesifikasi resmi pertama dari Tim Berners-Lee, menetapkan set tag dasar. HTML 4.01 (W3C Rec, Desember 1999) menambahkan <script>, <style>, <table>, frame. XHTML 1.0 (W3C Rec, Januari 2000) mencoba serialisasi XML yang ketat, sebagian besar ditinggalkan pada 2010. HTML5 (W3C Rec, Oktober 2014) menambahkan elemen semantik (<article>, <section>, <nav>), canvas, video/audio, web storage. Pada Mei 2019, WHATWG mengambil alih pengelolaan dari W3C, dan HTML sekarang dipelihara sebagai Living Standard di html.spec.whatwg.org, diperbarui terus-menerus.

Kasus penggunaan umum

Kesalahan umum

  1. Mencoba membaca konten iframe dari induk. Dengan sandbox diatur, pembatasan cross-origin memblokirnya. Iframe dapat postMessage keluar, tetapi induk tidak dapat menjangkau ke dalam.
  2. Menempelkan CSS yang menargetkan body dan terkejut bahwa gaya body alat itu sendiri tidak terpengaruh. Iframe adalah dokumen terpisah dengan DOM sendiri.
  3. Sumber daya eksternal yang diblokir oleh CSP. <img src="https://example.com/x.png"> mungkin memuat dengan baik di pratinjau Anda tetapi diblokir ketika Anda menyalin kode yang sama ke situs produksi yang terkunci CSP.
  4. Lupa bahwa DOMContentLoaded menyala di iframe, bukan di induk. Skrip di dalam iframe melihat document mereka sendiri, bukan milik alat.
  5. Mengatur kedua allow-scripts dan allow-same-origin dalam alat sandbox, sepenuhnya mengalahkan tujuan. Browser memperingatkan kombinasi ini di DevTools.

Lebih banyak pertanyaan yang sering diajukan

Mengapa localStorage saya tidak berfungsi di pratinjau?

localStorage dan sessionStorage memerlukan allow-same-origin dalam atribut sandbox. Karena menggabungkan itu dengan allow-scripts akan mengalahkan sandbox, pratinjau ini memblokir penyimpanan secara sengaja. Kode Anda akan melempar SecurityError pada localStorage.setItem pertama. Untuk menguji kode yang bergantung pada penyimpanan, jalankan di origin nyata (server dev lokal, misalnya).

Versi JavaScript apa yang didukung pratinjau?

Apa pun yang didukung browser Anda. Iframe menjalankan mesin JS yang sama dengan halaman induk, jadi pengguna Chrome mendapatkan V8, pengguna Firefox SpiderMonkey, pengguna Safari JavaScriptCore. Fitur modern (optional chaining, top-level await, kelas, async/await, sintaks ES2024) berfungsi jika browser Anda mendukungnya. Untuk pengujian target-browser-lebih-lama, tempel output yang ditranspilasi dari Babel atau swc.

Bisakah saya memuat skrip dan stylesheet eksternal?

Ya untuk sebagian besar CDN publik. <script src="https://cdn.jsdelivr.net/..."> dan <link href="https://cdn.tailwindcss.com" rel="stylesheet"> biasanya berfungsi karena CDN tersebut mengatur header CORS permisif. Sumber daya yang memerlukan kredensial atau origin-locked akan gagal. Panel Network di DevTools browser Anda menunjukkan dengan tepat sumber daya mana yang dimuat dan mana yang diblokir.

Apa bedanya dari CodePen / JSFiddle / StackBlitz?

Itu adalah layanan hosting kode lengkap dengan fitur simpan / bagikan / fork / kolaborasi dan memerlukan akun. Alat ini adalah scratchpad satu halaman: tanpa akun, tanpa penyimpanan, tanpa berbagi, tanpa analitik. Tempel, pratinjau, iterasi, tutup tab. Untuk sesuatu yang ingin Anda simpan atau bagikan, CodePen masih opsi yang lebih baik.

Apakah kode saya diunggah ke mana pun?

Tidak. HTML / CSS / JS yang Anda tempel dibungkus dalam <iframe srcdoc="..."> pada halaman yang sama dan dirender dalam origin unik yang disandbox di browser Anda. Tidak ada panggilan jaringan yang membawa konten Anda. Sumber daya eksternal yang dirujuk HTML Anda (gambar, skrip, stylesheet) diambil oleh browser Anda dengan cara yang sama seperti di halaman web mana pun, tetapi kode sumber itu sendiri tidak pernah meninggalkan halaman.

Alat terkait

Kode ke Gambar Konverter Minifier HTML Gratis Markdown Previewer Online HTML Tabel Generator