JSON Visualizer
Explore JSON data as an interactive tree or table
Raw JSON is designed for machines, and a real API response can bury one useful value five levels deep. The JSON Visualizer turns any payload into an interactive, collapsible tree or a flat, scrollable table, and reports structural statistics alongside. It accepts standard JSON only and runs entirely in the browser, which makes it convenient for pasting unfamiliar API responses or exported configuration files while you work out their shape.
Tree View vs Table View
Tree View preserves hierarchy. Objects and arrays become expandable branches labeled with their type and child count, and clicking a branch collapses or expands it. This is the view to use when you do not yet know the schema, because it shows nesting as it really is.
Table View flattens the same data into rows of keypath, value, and type. It discards the shape in exchange for a list you can read straight down. It is the better choice once you know roughly what you are looking for and need to compare many values, or when you want to check for nulls and type mismatches across records.
Statistics are computed once per parse and stay the same as you switch views.
How to Visualize a Payload
- Paste JSON into the input box and press Visualize, or paste and click the button if the panel is already open.
- If the text parses, the results panel appears with the Tree View selected by default.
- Expand the branches you care about, or switch to Table View for a flat listing.
- Read the stats row at the top right: max depth, key count, and the type distribution.
- Re-paste and visualize again whenever the source changes.
Nothing is sent to a server. Parsing, flattening, and rendering all happen in the page, so internal or sensitive payloads never leave your machine.
Reading the Statistics Panel
- Max Depth is the deepest nesting level, which flags schemas that are more layered than expected.
- Key Count totals object keys plus array indices, giving a rough sense of payload size.
- Type Distribution counts how many leaves are strings, numbers, booleans, or null, plus arrays and objects. A sudden run of nulls in a field that should hold strings is an easy signal that an upstream change broke the data.
Worked Example
Take this input:
{
"user": { "id": 7, "admin": false, "tags": ["a", "b"] },
"lastLogin": null
}
Tree View shows user as an object with three keys, including tags as an Array[2] that expands to "a" and "b", and lastLogin as null.
Table View produces five rows:
| Keypath | Value | Type |
|---|---|---|
| user.id | 7 | number |
| user.admin | false | boolean |
| user.tags.0 | a | string |
| user.tags.1 | b | string |
| lastLogin | null | null |
The statistics read max depth 3, key count 7, and a type distribution of number: 1, boolean: 1, string: 2, null: 1. The key count of seven counts user, id, admin, tags, both array indices, and lastLogin.
Valid JSON Only
The parser is JSON.parse, which is strict. It rejects single quotes, unquoted property names, trailing commas, comments, and the JavaScript-only values NaN, Infinity, and undefined. Numbers with a leading plus sign or a leading zero (other than 0 itself) are also invalid. If a document fails, the error message reports the position of the first problem, which is usually the fastest way to find an otherwise invisible trailing comma. Running the text through a formatter first often fixes the issue before it reaches this tool.
When to Reach for a Different Tool
The visualizer is for understanding shape, not for editing or comparing. Once you know what the payload contains, other tools do the next job better.
- Use a formatter when you need consistent indentation or a quick syntax fix.
- Use a diff tool when you have two versions of the same document and need to see exactly which fields changed between environments.
- Use a JSON-to-CSV converter when the structure is flat enough to load into a spreadsheet.
- Use a schema generator when you want to turn a representative response into a contract you can validate against.
The statistics panel is a natural hand-off point: note the max depth and any fields showing unexpected nulls or wrong types, then switch tools to fix or validate them. Keeping the payload in the visualizer while you work in another tab also means you never lose sight of the original structure.
Large Payloads and Practical Limits
The viewer keeps the data in memory and builds the display from it, so a few megabytes is comfortable and tens of megabytes is not. Tree View is the heavier option because every container becomes a clickable element; Table View is lighter but still renders one row per leaf value. The results area is capped at 600 pixels high and scrolls, which keeps the page usable but means you search by eye rather than with a filter box. For very large files, extract a representative object or array and inspect that slice.
Related Tools
Frequently Asked Questions
What exactly does the key count include?
It counts every object key and every array index as one entry. A payload with one object property, three sub-keys, and a two-item array reports six keys, because the two array positions count as well. The number measures structural entries, not distinct field names.
Why does Table View show headings like orders.0.total?
Table View flattens the hierarchy into dot-separated keypaths. Object keys are joined with dots and array positions use their numeric index, so the first order's total in an orders array appears as orders.0.total. This makes deeply nested values scannable in a single list at the cost of hiding the surrounding structure.
Why was my JSON rejected when it looked fine in my editor?
The tool uses the browser's strict JSON parser, which refuses the conveniences some editors allow: single-quoted strings, unquoted keys, trailing commas, comments, NaN, Infinity, and undefined are all invalid JSON. Paste the output of JSON.stringify if you are unsure. The error message from the parser points at the first offending character.
What does the Max Depth number tell me?
It is the deepest nesting level reached by any value. A root object starts at depth 0, its direct properties are depth 1, and each further nesting adds one. A root-level array is counted differently because its items begin at depth 1. Use it to spot schemas that are nested more deeply than your code expects.
Can the tool handle a 50 MB export?
It is practical up to a few megabytes. Tree View creates an element for every object and array, so a very large document can make the browser sluggish even though the panel scrolls. For big data, use Table View, which renders one row per leaf value, or visualize a representative sample and process the full file with a command-line tool.
Why is an empty object missing from Table View?
Flattening only records leaf values. An object with no keys has no leaves, so it produces no rows even though Tree View still shows it as an empty object. If a field must appear in the flat list, represent the absence explicitly with null rather than an empty object.
Reviewed by the HandyTools Hub team · Last updated