JSON Tree Viewer

What is a JSON tree viewer?#

A JSON tree viewer parses a JSON document and draws it as an outline you can fold, the way a file explorer shows a directory tree. Instead of reading one long wall of indented text and counting braces to figure out what is nested inside what, you see the structure at a glance: objects and arrays are branches you can click to open or close, and the leaf values — strings, numbers, booleans, null — sit at the tips.

That matters most when the document is deep or unfamiliar. A single API response can easily run to hundreds of lines; a config file can have settings nested four or five levels deep under names that look similar. In a flat formatter you scroll and lose your place. In a tree you collapse everything except the branch you care about, and the rest stops competing for your attention.

This page parses your JSON in the browser and renders a collapsible tree node by node, using plain text content rather than interpreting the input as HTML — so even a document that contains <script> tags or HTML-looking strings is shown inert, not executed.

How to use it#

1. Paste your JSON into the Input pane on the left. Parsing happens as you type.
2. The tree appears on the right. Each object or array shows a ▼ toggle, its opening bracket ({ or [), the number of entries inside, and its closing bracket. Click the toggle — or the brackets themselves — to fold or unfold that branch.
3. Use Expand all to open every branch down to its leaves, and Collapse all to shrink the whole document back to just the root. Collapsing is how you get a one-line overview of a sprawling payload before drilling in.
4. The header on the right shows a count of the root’s top-level entries (for example 5 items), so you can tell at a glance how big the document is.
5. Sample loads a nested demonstration document; Clear empties both panes.

Key features#

• Fold any branch independently. Each container opens and closes on its own, so you can keep one sub-object expanded for reference while the rest stays collapsed.
• Depth guides. Children are indented under a vertical guide line, making it obvious which brace an entry belongs to even in dense documents.
• XSS-safe rendering. Every label and value is written as plain text content — the input is never parsed as HTML. A malicious-looking string simply displays as text.
• Faithful leaf values. Strings keep their surrounding quotes and numbers render exactly as JSON.stringify would write them, so true (boolean) is visually distinct from "true" (string).
• Live count. The header reports how many entries the root holds, updated as you edit.

Worked example#

Load Sample and the parsed tree shows a root object with five top-level entries:

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

Two of those entries are themselves containers. Unfolding tags shows the three-element array ("json", "encoding", "crypto"), and unfolding features reveals that static is true while backend is null — a distinction the tree renders explicitly instead of leaving you to guess from a flat dump.

If you only care about the features sub-object, click every other ▼ on the top level to fold them away. The count 5 on the root stays accurate, and the depth guide makes it obvious that static and backend belong to features, not to the root.

FAQ#

Does this modify or reformat my JSON?#

No. The tree is a read-only view of the parsed value. Your input text is never rewritten, re-indented, or emitted. If you want the document pretty-printed as text, use the formatter instead; this tool is for navigating, not normalizing.

Why do strings still have quotes in the tree?#

Because that is how JSON itself distinguishes a string from a bare keyword. Without the quotes, true and "true" would look identical, and so would null and the string "null". Keeping the quotes (exactly as JSON.stringify produces them) preserves that distinction at a glance.

How does it handle very large documents?#

Parsing and rendering happen entirely in your browser, so there is no upload and no server round-trip. For typical configs and API responses it is instant. For a multi-megabyte document the tree has to create a node for every value, which can get sluggish — collapse branches you do not need to keep the visible node count manageable.

Will a string containing HTML be rendered as HTML?#

Never. The tool writes every value as text content, which the browser treats as inert characters. A string that happens to contain <script> or <img onerror=...> is displayed verbatim as text — it is not parsed as markup and cannot run.