View JSON as a tree

Display nested JSON as a readable tree with node types, values, and depth control.

freeworks offlinenothing uploaded
ToolJSON Tree Viewer
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The parsed value is traversed recursively, objects become branches, arrays show length and indexed children, and primitive nodes can include type and value text. Traversal stops at the selected maximum depth while a node counter records visited values.

  • A depth limit of ten keeps deeply nested displays bounded.
  • Types and primitive values are visible by default.

Worked example

Nested Object
View a nested JSON object as an indented tree
Input
											{"user":{"name":"Alice","roles":["admin","editor"]}}
Output
												Object{1}
└── user: Object{2}
    ├── name: "Alice" (string)
    └── roles: Array[2]
        ├── "admin" (string)
        └── "editor" (string)

When to use this

API debugging, configuration reviews, and JSON teaching examples use tree views.

Edge cases

  • Deep documents show a truncation marker at the depth limit.
  • Empty objects and arrays are labelled rather than omitted.
  • A primitive root is rendered as one leaf without an artificial wrapper.

References