HTML Görüntüleyici

HTML kaynağını yapıştırın; izole, sandbox'lı bir çerçevede anında canlı önizlenir. İçerik tamamen tarayıcınızda işlenir, sunucuya gönderilmez. Güvenlik için script'ler çalıştırılmaz — yalnızca HTML ve CSS render edilir.

Son güncelleme: 2026-08-09

Canlı Önizleme

Önizleme, script çalıştırmaya izin vermeyen sandbox'lı bir iframe içinde yüklenir: script'ler, formlar ve üst sayfaya erişim engellidir. Yalnızca HTML ve CSS değerlendirilir.

Bu görüntüleyici ne zaman işe yarar

E-posta şablonunu gönderim döngüsüne sokmadan görürken

Şablonu düzenle, test maili gönder, gelen kutusunu bekle: bu döngü tur başına dakikalar yer. İşaretlemeyi buraya yapıştırıp satır içi stili değiştirmek aynı turu saniyelere indirir; gerçek istemci testi en sona kalır.

Yabancı bir snippet'i siteye taşımadan denerken

İnternetten kopyalanan hazır bileşenler bazen fazladan etiket, bazen de istenmeyen script taşır. Script'lerin çalışmadığı izole bir çerçevede önce görmek, temizleme işini canlı sayfaya taşımaktan iyidir.

Bir düzen fikrini proje kurmadan yoklarken

Grid mi flex mi tartışması için dosya açmak, sunucu başlatmak gerekmez. İki dakikalık bir deneme buraya, kalıcı hâli projeye.

Çalışılmış örnek: bu aracın kendi sandbox hikâyesi

Önizleme çerçevesinin bugünkü hâli bir masa başı kararı değil; bu sitenin commit geçmişinde duran bir hata ayıklamanın sonucu.

İlk sürümde çerçeve en katı hâliyle kuruldu: boş sandbox özniteliği, tüm izinler kapalı.
Beklenti kısıtlı ama görünür bir önizlemeydi; gerçekte Chrome srcdoc içeriğini hiç çizmedi, çerçeve boş kaldı.
Spesifikasyon okumasına göre boş sandbox srcdoc'u engellememeliydi; tarayıcının fiili davranışı farklıydı.
Çözüm tek iznin eklenmesi oldu: allow-same-origin. Script çalıştırma izni verilmedi.
Bugün gördüğünüz önizleme bu bileşimle çalışıyor: render var, script yok.

Güvenlik öznitelikleri spesifikasyondan değil hedef tarayıcıdan doğrulanır. "Çalışmayan güvenli çerçeve" ile "çalışan güvenli çerçeve" arasındaki fark tek bir izindi ve bunu ancak gerçek Chrome'da denemek gösterdi. Kendi projenizde iframe sandbox bileşimlerini hedeflediğiniz tarayıcılarda tek tek test edin.

Sık yapılan dört hata

JavaScript'e dayanan parçadan çıktı beklemek

Bir SPA bileşeninin HTML'i çoğu zaman boş bir kabuk div'idir; içerik script'le sonradan kurulur. Script'ler burada bilinçli olarak kapalı olduğundan böyle bir parça boş görünür — bu bir hata değil, aracın tasarımıdır.

Göreli yolların yüklenmesini beklemek

Önizleme belgesinin taban adresi yoktur; ./style.css veya ../img/logo.png hiçbir yere çözümlenemez. Stilleri <style> bloğuna alın, görselleri mutlak URL ile verin; boş görsel kutularının açıklaması budur.

Önizlemeyi uyumluluk testi sanmak

Burada gördüğünüz, kendi tarayıcınızın motorunun yorumudur. Öteki motorlar ve e-posta istemcileri aynı işaretlemeyi farklı çizebilir; önizleme iterasyonu hızlandırır, son kontrolü ortadan kaldırmaz.

Burada zararsız olanı temiz saymak

Script'i çalıştırmayan çerçevede sorunsuz görünen bir snippet, script'e izin veren bir CMS alanına yapıştırıldığında aynı masumiyette olmayabilir. Önizleme riski göstermez, sadece izole eder; yapıştırmadan önce işaretlemedeki script ve olay özniteliklerini temizleyin.

Bu araçla birlikte kullanılanlar

HTML / Entity Kodlayıcı-Çözücü Metni HTML entity'lerine kodlayın veya geri çözün. XSS önleme için özel karakterleri kaçışlayın; tarayıcıda, kayıt gerektirmez.
JWT Çözücü Bir JSON Web Token'ın header ve payload bölümlerini çözün, standart claim'leri ve geçerlilik süresini görün. Token tarayıcıdan çıkmaz.
Kubernetes Kaynak Bütçesi Hesaplayıcısı Pod istekleri ve düğüm boyutuna göre kaç düğüme ihtiyacınız olduğunu, paketleme verimliliğini ve tahmini aylık maliyeti hesaplayın.
UUID Üretici Kriptografik olarak güvenli UUID v4 ve zaman-sıralı v7 üretin. Toplu üretim ve biçim seçenekleri.
Base64 Kodlayıcı-Çözücü Metni Base64'e kodlayın veya geri çözün. Standart ve URL-güvenli (base64url) varyant; UTF-8 uyumlu, tarayıcıda.

Sık Sorulan Sorular

Yapıştırdığım HTML sunucuya gönderiliyor mu?

Hayır. HTML tamamen tarayıcınızda, bir iframe'in srcdoc'una yazılarak önizlenir; sunucuya gönderilmez ve hiçbir yerde saklanmaz. Sayfayı kapattığınızda hiçbir iz kalmaz.

Önizlemede neden JavaScript çalışmıyor?

Önizleme, sandbox özniteliği kısıtlanmış bir iframe'de yüklenir. Bu, scriptçalıştırmayı, form göndermeyi ve üst sayfaya erişimi bilinçli olarak engeller. Böylece bilmediğiniz bir HTML'i yapıştırmak güvenli olur — araç bir görüntüleyicidir, kod çalıştırıcı değil.

Bu araç ne için kullanışlı?

E-posta şablonlarını, HTML snippet'lerini, CSS düzenlerini ve statik bileşenleri hızlıca görmek için. İşaretlemeyi düzenleyip sonucu anında görür, tam bir proje kurmadan denersiniz.

Dış CSS dosyaları ve görseller yüklenir mi?

Mutlak (https://) URL'lerle verilen stil ve görseller, tarayıcının ve sayfanın güvenlik politikaları izin verdiği ölçüde yüklenir. Göreli yollar (./style.css) çalışmaz, çünkü önizlemenin bir taban adresi yoktur — stilleri satır içi <style> ile vermek en güvenilir yoldur.

Önizleme neden her zaman beyaz zeminde?

Önizleme çerçevesi izole bir belgedir; sitenin açık/koyu temasından etkilenmez. Böylece HTML'iniz kendi stilleriyle, tarayıcı varsayılanlarıyla (beyaz zemin) görünür — gerçek dağıtımdaki hâline en yakın sonuç budur.