🌳 JSON Viewer & Tree Explorer

Explore and navigate JSON data with an interactive tree view. Expand/collapse nodes, search keys and values, copy paths, and validate structure instantly. Free JSON tree viewer.

JSON Input

Tree View

How to Use

Paste your JSON

Paste any valid JSON — objects, arrays, or nested structures — into the input area on the left. Press Ctrl+Enter or click Parse.

Explore the tree

Click the ▾ toggle arrows to collapse or expand any node. Use Expand All / Collapse All to control the entire tree at once.

Search and copy paths

Type in the search box to filter keys and values in real time. Hover any key and click ⎘ to copy its full dot-notation path.

Frequently Asked Questions

What is a JSON tree viewer? +

A JSON tree viewer renders JSON data as a collapsible hierarchy of nodes, making it easy to navigate objects and arrays without reading raw text. You can expand only the parts you need and search across the entire structure.

How do I copy a key path? +

Hover over any key and click the ⎘ (copy path) icon that appears. The full dot-notation path — like user.address.city — is copied to your clipboard.

Can I search inside the JSON? +

Yes. The search bar at the top filters all keys and values in real time. Non-matching rows are hidden, and all parent nodes stay expanded so matches remain visible.

Is my JSON sent to a server? +

No. Everything runs in your browser. Your JSON data never leaves your device.

Tam Rehber: JSON Görüntüleyici — Daraltma, Arama ve Yol Kopyalama

JSON Görüntüleyici Nedir ve Neden Kullanmalısınız?

JSON Görüntüleyici, herhangi bir JSON belgesini düz metin yerine etkileşimli, katlanabilir bir ağaç yapısında gösteren tarayıcı tabanlı bir araçtır. JSON formatlayıcı ham yapıyı girintili metin olarak gösterirken, görüntüleyici o yapıda gezinmenizi sağlar: ilgisiz dalları kapatın, belgenin herhangi bir yerindeki anahtarı arayın, herhangi bir değerin tam dot-notation yolunu kopyalayın ve derin iç içe nesneleri bağlamı kaybetmeden anlayın.

Modern API'ler giderek daha karmaşık payload'lar döndürmektedir. Bir GitHub deposu nesnesi 100'den fazla anahtar içerir. Bir Stripe ücretlendirme nesnesi müşteri, ödeme yöntemi, meta veri ve satır öğesi dizilerini birkaç seviye derinliğe kadar iç içe geçirir. Bir Kubernetes pod spec yüzlerce satır olabilir. Bunların herhangi birini düz biçimli metin dökümü olarak okumak dakikalar alır. Etkileşimli bir ağaçla kök seviyesine kadar her şeyi daraltır, yalnızca ihtiyaç duyduğunuz dalları açar ve aradığınız değeri saniyeler içinde bulursunuz.

JSON Görüntüleyici şunlar için vazgeçilmezdir: tanımadık API yanıtlarını hata ayıklayan frontend mühendisleri, üçüncü taraf webhook payload'larını denetleyen backend mühendisleri, ham pipeline çıktılarını keşfeden veri mühendisleri ve 500 satırlık bir JSON belgesini metin editörüne yapıştırıp belirli bir iç içe geçmiş anahtarı bulmaya çalışan herkes.

Temel Özellikler

Katlanabilir Ağaç Gezintisi

Her nesne ({}) ve dizi ([]) düğümünün bir geçiş oku vardır. Tüm alt ağacı tek özet satırına daraltmak için tıklayın — örneğin ▶ metadata {5 anahtar} veya ▶ öğeler [12 öğe]. Bu, 300 anahtarlı bir belgeyle yalnızca gerçekten ihtiyaç duyduğunuz on dalı gösteren bir pencerede çalışmanıza olanak tanır. Daraltılmış herhangi bir düğüme çift tıklayarak onu ve tüm alt öğelerini tek seferde genişletebilirsiniz.

Tüm Anahtar ve Değerlerde Gerçek Zamanlı Arama

Arama çubuğu, siz yazarken ağacı gerçek zamanlı olarak filtreler. Hem anahtarları hem de değerleri eşleştirir, her oluşumu vurgular ve eşleşen sonuçların her zaman bağlamda görünür olması için üst düğümleri otomatik genişletir. email için arama yapın; email adlı her anahtar ve "email" içeren her dize değeri anında aydınlanır. Sayfalandırılmış bir yanıtta belirli bir sipariş kimliğini bulmak, bir bayrağın doğru ayarlandığını onaylamak veya beklenen yolda bir zaman damgası alanının var olduğunu doğrulamak için kullanın.

Panoya Yol Kopyalama

Herhangi bir değerin üzerine geldiğinizde bir kopyalama simgesi belirir. Tıklayın ve tam dot-notation yolu — data.user.address.city veya results[0].metadata.tags[2] gibi — panonuza kopyalanır. Bu, girintileme seviyelerini okuma ve elle bir JavaScript özellik yolu oluşturmanın yorucu egzersizini ortadan kaldırır. Doğrudan kodunuza özellik erişimcisi olarak yapıştırın.

Değer Türü Renklendirmesi

Dizeler, sayılar, boolean'lar, null'lar, nesneler ve diziler farklı renklerde gösterilir. Bir alanın "active" string mi yoksa boolean true mu olduğunu, bir sayı alanının sayı mı yoksa yanlışlıkla stringe dönüştürülmüş "42" mi olduğunu bir bakışta anlarsınız.

Adım Adım Kullanım Kılavuzu

JSON'unuzu yapıştırın — sol panele. Araç sıkıştırılmış, kısmen biçimlendirilmiş veya tam girintili JSON'u kabul eder. Geçersiz JSON, yanlış ağaç oluşturmak yerine konum bilgisiyle birlikte net bir hata gösterir.
"Görüntüle"ye tıklayın (veya Ctrl+Enter). Sağ panel etkileşimli ağacı oluşturur. Büyük belgeler (10.000+ düğüm) arayüzü duyarlı tutmak için aşamalı olarak oluşturulur.
İhtiyaç duymadığınız üst düzey dalları daraltın — kök anahtarların yanındaki oka tıklayarak. Belgenin üst düzey şeklini görmek için her şey daraltılmış şekilde başlayın.
Arama kutusunu kullanın — herhangi bir anahtar veya değere atlamak için. En az 2 karakter yazın, ağaç anında filtreler ve vurgular.
Bir yolu kopyalayın — hedef değerin üzerine gelerek ve kopyalama simgesine tıklayarak. Dot-notation yolu panonuza düşer ve yapıştırmaya hazır olur.
Tümünü Genişlet / Tümünü Daralt düğmeleri araç çubuğunda — bir tıklamayla görünümü tamamen genişletilmiş veya tamamen daraltılmış olarak sıfırlamanıza olanak tanır.

Pratik Kullanım Senaryoları

API yanıtını hata ayıklamak: Bir REST endpoint çağırdınız ve yanıt nesnesi kodunuzda beklendiği gibi davranmıyor. Ham yanıtı görüntüleyiciye yapıştırın, üst düzey anahtarları daraltın, ardından yalnızca sorguladığınız alt ağacı genişletin. Alanın var olup olmadığını, türünün ne olduğunu ve yolun ne olması gerektiğini hemen görün — ardından kodunuzu düzeltin.

Stripe webhook denetimi: Stripe payment_intent.succeeded olayının 60'tan fazla üst düzey anahtarı vardır. Payload'ı yapıştırın, her şeyi daraltın, amount için arama yapın; her miktarla ilgili alan (amount, amount_capturable, amount_received) yollarıyla birlikte vurgulanır — kaydırma gerekmez.

Kubernetes konfigürasyonu okumak: kubectl get pod mypod -o json ile dışa aktarılan bir pod spec 150'den fazla satır üretir. Görüntüleyicide metadata, status ve spec.volumes'ü daraltın, ardından yalnızca spec.containers'ı genişleterek ortam değişkenlerini ve kaynak limitlerini izole şekilde inceleyin.

Yaygın Hatalar ve İpuçları

Görüntüleyici ile formatlayıcıyı karıştırmayın: Görüntüleyici gezinti ve keşif içindir. JSON'u düzenlemek, sözdizimi hatalarını düzeltmek veya yeniden biçimlendirilmiş çıktı üretmek istiyorsanız JSON Formatlayıcı'yı kullanın.
Arama varsayılan olarak büyük/küçük harfe duyarsızdır: Email araması email, EMAIL ve userEmail ile eşleşir.
Diziler index yolları gösterir: Dizi öğeleri için yol köşeli parantez notasyonu kullanır — items[0].sku. Bu geçerli JavaScript'tir.
Çok büyük belgeler: JSON'unuzun 50.000'den fazla düğümü varsa, daha akıcı performans için önce jq veya JSON Formatlayıcı ile ilgili alt ağaca filtrelemeyi düşünün.

Sık Sorulan Sorular

JSON verilerim sunucuya gönderilir mi?
Hayır. Tüm işlemler JavaScript kullanılarak tamamen tarayıcınızda gerçekleşir. JSON'unuz hiçbir zaman makinenizden ayrılmaz.

Görüntüleyicinin işleyebileceği maksimum belge boyutu nedir?
Kesin bir sınır yoktur, ancak yaklaşık 2 MB'ın (≈50.000 düğüm) üzerindeki belgeler cihazınıza bağlı olarak yavaş oluşturulabilir.

"Yolu kopyala" tam olarak ne kopyalar?
Dot-notation yol dizesi kopyalar: örneğin order.lineItems[2].product.sku. Bu, ayrıştırılmış bir nesneden değeri okumak için geçerli JavaScript'tir.

Doğrudan bir URL'den JSON görüntüleyebilir miyim?
Görüntüleyici yapıştırılan JSON metnini kabul eder. Bir URL'den yüklemek için tarayıcının DevTools konsolunda fetch('https://api.example.com/data').then(r=>r.text()).then(console.log) ile yanıtı alın, çıktıyı kopyalayın ve görüntüleyiciye yapıştırın.