How is this different from the JSON Formatter?

The formatter produces readable text; the viewer produces an interactive tree with expand/collapse, per-node types, and children counts. Use the formatter to share/edit text, the viewer to understand structure.

What do the counts next to nodes mean?

For objects, the number of keys; for arrays, the number of elements. They let you verify sizes (items: 100) without expanding anything.

Why do I see one giant string instead of a tree?

Your JSON is double-encoded — a string containing JSON text. Run it through JSON Unescape first. If it originates in your system, fix the producer to serialize once.

How large a document can it handle?

Up to 10 MB, parsed in the browser with a debounce so typing stays smooth. Beyond that, use command-line tools (jq, python -m json.tool) — no browser DOM enjoys a million nodes.

No — parsing and rendering are fully client-side.

JSON Viewer | JSON Tools

About JSON Viewer

A JSON viewer renders a document as a collapsible tree instead of a wall of brackets. For deeply nested payloads — a Kubernetes manifest, a GraphQL response, an analytics event with forty nested objects — a tree with expand/collapse is the difference between understanding the structure in seconds and counting braces by hand. Formatting helps you read values; a viewer helps you grasp shape.

This viewer parses locally in your browser (up to 10 MB, with a 300 ms debounce as you type) and shows each node's type and children count, expanding the first two levels by default so you see the top-level shape immediately.

How to use JSON Viewer

Use the input area to enter or paste your data.
Use the main action button to run the tool.
Copy or download the output as needed.

Example

Input

Your input or data here

Output

Result will appear here after running the tool

Reading structure like a map

Treat the tree as a map, not a page: collapse everything, then drill only into the branch you care about. Object nodes show how many keys they hold, array nodes how many elements — those counts answer common questions without expanding at all ('did the API return 0, 1, or 500 items?'). Types are visually distinct, which makes the two most damaging silent data bugs — the string "42" where the number 42 should be, and null where an object should be — visible at a glance.

The expand-first-two-levels default reflects how JSON payloads are usually designed: an envelope (status, data, meta) wrapping the interesting content one level down.

Viewer, formatter, or path extractor?

The three tools answer different questions. Formatter: 'let me read this text' — best for copying readable JSON into a doc or diff. Viewer: 'what is the shape of this data?' — best for exploration and spotting structural anomalies. Path Extractor: 'give me exactly data.items[3].price' — best once you already know the shape and want one value. A typical debugging session flows viewer → path extractor: explore, then extract.

What the tree reveals that raw text hides

Inconsistent array elements: expanding a few items of a list quickly shows if element #7 is missing keys the others have.
Double-encoded JSON: a value rendered as one long string starting with {\" is JSON trapped inside a string — run it through JSON Unescape.
Unexpected nesting depth: a branch that keeps expanding (config.settings.overrides.custom…) signals data modeled deeper than any consumer will enjoy.
Empty structures: {} and [] leaf nodes stand out in a tree; in raw text they vanish into the noise.
Type drift between records: id as number in one element and string in another — the classic pagination bug source.

Common errors and how to fix them

Nothing renders / parse error shown

Cause: The input is not valid JSON — the viewer needs a parseable document.

Fix: Check the reported line/column (the Validator gives the most precise message). Common causes: trailing commas, single quotes, truncated payload.

The whole document is one string node

Cause: Double-encoded JSON: the payload is a JSON string whose content is JSON.

Fix: JSON Unescape once, then view. If you produce this data, remove the redundant stringify — double encoding wastes space and breaks tooling.

Tree is unusably deep

Cause: Heavily nested data model (often auto-generated or EAV-style).

Fix: Collapse all and expand only the branch under investigation; consider the JSON Flattener to review the full key inventory as flat dot-paths.

Large file is slow to expand

Cause: Rendering tens of thousands of DOM nodes at once.

Fix: Keep top levels collapsed and drill down selectively; for multi-hundred-MB files, command-line jq is the right tool.

Tips and best practices

Children counts are a free integrity check: if the API says total: 250 but the items array node shows 100, you've found the pagination boundary already.
Use the viewer before writing extraction code — confirming the exact nesting once saves a cycle of undefined-property errors.
Arrays of heterogeneous objects (mixed shapes) are the #1 producer of downstream bugs; scan a handful of elements' key counts for drift.
Screenshots of an expanded relevant branch make excellent bug-report attachments — structure plus values, no noise.

Frequently asked questions

How is this different from the JSON Formatter?: The formatter produces readable text; the viewer produces an interactive tree with expand/collapse, per-node types, and children counts. Use the formatter to share/edit text, the viewer to understand structure.
What do the counts next to nodes mean?: For objects, the number of keys; for arrays, the number of elements. They let you verify sizes (items: 100) without expanding anything.
Why do I see one giant string instead of a tree?: Your JSON is double-encoded — a string containing JSON text. Run it through JSON Unescape first. If it originates in your system, fix the producer to serialize once.
How large a document can it handle?: Up to 10 MB, parsed in the browser with a debounce so typing stays smooth. Beyond that, use command-line tools (jq, python -m json.tool) — no browser DOM enjoys a million nodes.
Is my JSON uploaded?: No — parsing and rendering are fully client-side.

Embed this tool

Add JSON Viewer to your own site, blog post, or internal docs — free, no signup. The widget runs entirely in your visitors' browsers, same as it does here.