Stax
Tools

JSON Tree Viewer

Visualise JSON as an interactive collapsible tree.

▾{
name: "Stax"string
version: "1.0"string
▾features: [
0: "JSON"string
1: "XML"string
2: "CSV"string
]
▾meta: {
author: "Harshil"string
year: 2025number
open: trueboolean
}
count: 42number
active: nullnull
}

Click any object or array node to expand/collapse.

การทำงานของ JSON Tree Viewer

JSON tree viewer แปลงข้อความ JSON แบบ flat เป็นต้นไม้ collapsible แบบ interactive พร้อมการระบายสีประเภท, breadcrumbs ของเส้นทาง และการค้นหา node จัดการ API responses ที่ซ้อนกันลึก, เอกสาร Elasticsearch, Kubernetes manifests และไฟล์ JSON ขนาดใหญ่ การประมวลผลทั้งหมดเกิดขึ้นฝั่ง client

การตอบสนอง API ที่ซับซ้อนอาจลึกหลายสิบระดับ tree view แสดงคู่ key-value แต่ละคู่เป็น expandable node เส้นทางจาก root ไปยัง node ที่เลือกแสดงเป็น dot-notation breadcrumb (เช่น response.data[0].user.address.city) ซึ่งใช้ได้โดยตรงใน JavaScript หรือ Python

JSON arrays (เรียงลำดับ เข้าถึงตาม index) แสดงด้วย bracket notation [0], [1] JSON objects (แผนที่ key-value) แสดงด้วย brace notation การแยกแยะทางสายตานี้ทำให้ชัดเจนทันทีว่าคุณกำลัง iterate รายการหรือเข้าถึงฟิลด์ที่มีชื่อ

viewer ใช้การระบายสีโดดเด่นสำหรับแต่ละประเภทข้อมูล JSON: strings (เขียว), numbers (น้ำเงิน), booleans (ส้ม), null (เทา) JSON ที่ไม่ถูกต้องจะแสดง error แบบ inline พร้อมหมายเลขบรรทัดและคอลัมน์ของ parse error แรก

เบราว์เซอร์มีปัญหาในการแสดง tree สำหรับไฟล์ JSON ที่ใหญ่กว่า 1 MB viewer ใช้ virtual rendering — มีเพียง nodes ที่มองเห็นได้เท่านั้นที่อยู่ใน DOM ซึ่งช่วยให้สำรวจไฟล์ JSON 10 MB+ ได้อย่างสบาย

คำถามที่พบบ่อย

How do I expand and collapse nodes?
Click any object {…} or array […] node to toggle its children. The ▸ icon means collapsed; ▾ means expanded. Nodes at the top two levels are expanded by default.
How are data types shown?
Strings appear in green, numbers in blue, booleans in purple, and null in red. The type label appears on hover to the right of each value.
Is there a size limit for JSON input?
There is no hard limit, but very large JSON (millions of nodes) may slow down the browser. For huge payloads consider using a desktop tool like VS Code.
Can I edit the JSON in the tree view?
Not directly in the tree — edit the raw JSON in the text area above and the tree updates automatically.

เครื่องมือที่เกี่ยวข้อง