Utanç duymadan yapıştırabileceğiniz JSON'dan HTML'ye
Yapılandırma dosyaları, webhook yükleri ve analitik dışa aktarmaları genelde JSON gelir. Geliştiriciler iç içe nesneleri okur; paydaşlar okuyamaz. Bu sayfa veriyi tarayıcıda, wiki'de veya CMS kod bloğunda açılabilecek HTML tablolarına veya listelere çevirir: JSON yapıştırın veya içe aktarın, düzen seçin, bilinçli işaretlemeyle çıkın — debug dökümü değil. Birçok dönüştürücü JSON'u HTML'ye yalnızca dar anlamda çevirir: nokta yolu başlıklı tek geniş satır, varsayılan kenarlıklar, gerçek tipografi yok. Teknik olarak doğru, paylaşması zor. «Bunu müşteriye göndermem» diye düşündüyseniz boşluğu bilirsiniz. Burada yapı ve sunum bir arada: nesne dizileri için tablo modu, iç içe veri için ağaç ve tanım listesi, eski araçların tek satırlı düzeni için geniş düz tablo. Tam belge dışa aktarımı hafif tema ekleyebilir — Clean, Minimal veya Compact — kopyalamadan önce önizlemede boşluk ve yazı doğru görünsün. Dönüşüm tarayıcıda yerelde çalışır; JSON yüklenmez. Ham HTML etiketleri gösterir, HTML önizleme ana sayfa playground'unu açar, JSON biçimlendir günlükten gelen minify çıktıyı düzeltir.
JSON'u HTML'ye çevirin — okunaklı tablolar, hücre duvarı değil
JSON HTML tablo araması çoğu zaman «dizimi tablo olarak göster» demektir. Tablo modu bunu yapar: ortak anahtarlar sütun, her öğe satır, `<thead>` ve taranabilir hücreler. Tek nesne iki sütunlu özellik tablosu olur; iç içe değerler gerektiğinde alt tablo olabilir. Eski tek satır forma mı ihtiyacınız var? Geniş düz tablo `items.0.name` gibi anahtarları tek başlık satırına koyar — birçok üst sıra dönüştürücü gibi, güzel değil ama sonraki araçlar için öngörülebilir. Ağaç modu iç içe nesne ve dizileri hata ayıklama için listeler. Tanım listesi modu sözlük tarzı belgeler içindir. Elle `<tr>` yazmanız veya şablon yamamanız gerekmez.
E-postada gömülü ve satır içi stiller ayrılır — çoğu kişi burada takılır. Düzgün tam belge dışa aktarımı tipografi ve tablo kurallarını head'deki `<style>` bloğunda tutar. Gmail, Outlook ve çoğu ESP bu blokları atar; gönderi gider, boşluklar kaybolur. Çıktı panelinde tasarlarken Gömülü bırakın; bülten veya işlemsel şablona yapıştırmadan önce Satır içi'ye geçin. CSS Inliner sayfamızdakiyle aynı motor kuralları `style` özniteliklerine yazar, gereksiz `<style>` etiketlerini kaldırır. Keyframe, `:hover` ve bazı sözde öğeler satır içi olamaz — Notlar'da listelenir, gelen kutusunda neyin kalmayacağını bilirsiniz.
Dönüştürücüyü açVarsayılan olarak stilili tablolar
Tam belge dışa aktarımda temalar ve boşluk — minimal araçların çıplak border="1" dökümleri değil.
Gömülü → Satır içi tek tık
`<style>` içinde CSS ile tasarlayın, e-postaya hazır `style` öznitelikleri için geçiş.
Dört düzen modu
Tablo, geniş düz tablo, ağaç ve tanım listesi — JSON biçimine göre seçin.
JSON HTML tablo seçenekleri ve dışa aktarma yolları
API dizisinden yapıştırmaya hazır işaretlemeye — önizleme, temalar ve e-posta için isteğe bağlı satır içi CSS.
Rapor gibi tablolar, debug ızgarası değil
Nesne dizileri sütun başlığı ve satır ayrımı alır; temalar tam dışa aktarımda okunaklı yazı ve kenarlık ekler. Kopyalamadan önce önizlemede görürsünüz — yapıştırdıktan sonra çirkin işaretleme keşfi yok.
- Okunaklı tablolar ve temalar — çirkin tek satır değil
- Çıktı panelinde e-posta için Gömülü → Satır içi
- Tablo, düz, ağaç ve tanım düzenleri
- Tarayıcıda yerelde çalışır
JSON'u HTML'ye pratikte nasıl dönüştürülür
JSON yapıştırın veya içe aktarın
Minify API çıktısını sol panele bırakın veya `.json` içe aktarın. JSON biçimlendir tek satırlık günlükleri düzeltir. Düzen seçmeden önce ayrıştırma hatalarını giderin.
Düzen ve önizleme teması seçin
Nesne dizileri için tablo; iç içe belgeler için ağaç veya tanım listesi; nokta yolu sütunları yalnızca gerektiğinde geniş düz tablo. İndirmede parça veya tam belge ve tema — önizleme kaydedeceğiniz dosyayla aynı olsun.
Önizlemeyi, sonra ham HTML'i kontrol edin
Önizleme işlenmiş çıktıyı gösterir. Ham HTML kopyalayacağınız etiketleri gösterir. Hedef tarayıcı veya CMS ise tam belgede gömülü CSS çoğu zaman yeter. Gelen kutusu için sonraki adım.
E-posta için Satır içi'ye geçin, sonra dışa aktarın
Çıktı başlığında Satır içi kuralları `<style>`'dan öğelere taşır. Atlanan seçiciler için Notlar'ı okuyun. HTML kopyalayın, `.html` indirin veya playground'da HTML önizleme — diğer araçlarla aynı.
SSS: JSON'dan HTML'ye
JSON'u şimdi HTML'ye dönüştürün
Okunaklı tablolar, temalı önizleme ve hedef gelen kutusu olduğunda satır içi CSS.
JSON'dan HTML'ye
- Stilili tablo çıktısı — çıplak kenarlık dökümü değil
- Çıktı panelinden Gömülü veya Satır içi CSS
- Yerel dönüşüm, kopya veya indirme
- No signup; use the tool in the browser
E-posta için Satır içi sonrası test gönderin — istemciler hâlâ farklıdır.
Gerçekten göndereceğiniz JSON'dan HTML'ye
Gerçek tipografili tablolar — e-posta için tek tık satır içi stiller.