JSON Visualizer
Visualize JSON data as an interactive tree. Format, minify, and analyze your JSON with statistics. Embeddable on developer blogs.
A JSON visualizer parses a JSON document and draws it as an indented, colour-coded tree instead of a wall of text. Paste into Input JSON and the right pane reparses 300 ms after you stop typing, with strings green, numbers blue, booleans yellow and null grey, and every array or object labelled with its item count. A strip of eight counters underneath reports keys, strings, numbers, booleans, nulls, arrays, objects and maximum nesting depth.
JSON Visualizer
The JSON Visualizer lets you paste, format, and explore JSON data in an interactive tree view. Instantly see statistics about your data structure including key counts, value types, and nesting depth. Perfect for developers debugging APIs or exploring data.
Popular Tools
About JSON Visualizer
Everything happens in the page. Your JSON is handed to the browser's own JSON.parse, so what you see is exactly what a JavaScript runtime would accept — no server round trip, no upload, and no size ceiling other than the memory of the tab. Parsing is debounced by 300 milliseconds, so the tree follows your typing without re-rendering on every keystroke.
The right pane has two modes. Tree draws each key in purple followed by its value in a type colour, with arrays shown as [n] and objects as {n} so you can see the shape of a payload before reading any of it. Raw shows the same parsed data re-serialised with two-space indentation, which is useful when you want to copy a normalised version rather than explore it. The label above the pane also prints the size of what is in the input box, in bytes below 1 KB and in kilobytes above.
The toolbar holds Format, which rewrites the input with two-space indentation, Minify, which strips every space and newline into one line, and Copy, which puts the two-space formatted version on the clipboard. Four sample buttons — Simple Object, Nested Data, Array of Objects and API Response — replace the input with a small worked example, which is the quickest way to see what the counters mean. Note that Format, Minify and Copy do nothing at all while the input is invalid.
When parsing fails the input box turns red and the exact message from JSON.parse is printed underneath it, naming the position of the problem. That is the whole diagnostic: this is a viewer and a formatter, not a validator against a JSON Schema, not a JSONPath query tool and not an editor — you cannot collapse branches, search the tree or edit values in the right pane. It also expects strict JSON, so trailing commas, single quotes, comments and unquoted keys are all rejected.
Use Cases
How to use
Paste your JSON into the Input JSON box on the left, or press one of the sample buttons: Simple Object, Nested Data, Array of Objects or API Response.
Watch the right-hand pane, which reparses about 300 ms after you stop typing and draws a colour-coded tree with strings, numbers, booleans and nulls in different colours.
If the input box turns red, read the error line underneath it; it repeats the message from the browser's own JSON parser and names the position of the problem.
Press Format to re-indent the input with two spaces, or Minify to strip every space and newline into a single line.
Switch between the Tree and Raw buttons to swap the tree for pretty-printed text, and read the counts of keys, strings, numbers, arrays, objects and depth below.
Press Copy in the toolbar to put the two-space indented JSON on the clipboard.
Pro Tips
- Format, Minify and Copy silently do nothing while the JSON is invalid, because each one starts with its own JSON.parse inside a try block. If a button seems dead, look at the red error line under the input first.
- The Depth counter starts at 0 for a scalar and counts one level per nesting step, so a flat object reads 1. It is the fastest way to spot a payload that will need a recursive walk rather than a simple loop.
- The size shown next to Tree View or Formatted measures what is in the input box, not the parsed data. Press Minify and it drops immediately, which is a quick way to see how much of a payload is whitespace.
- Keys counts every key in every object, including repeated names in an array of objects, so a three-element array of three-key objects reports 9 keys and 1 array, not 3.
- Load Array of Objects when you want to see how the tree marks collections: the root shows [3] and each element shows {3}, so the counts in brackets tell you the shape without expanding anything.
Troubleshooting
The Format, Minify and Copy buttons do nothing when clicked.
All three parse the input before acting and swallow the error when it fails, so an invalid document makes them silent. Look at the input box: if it has a red border there is an error message under it naming the position to fix.
The tree does not update straight away while typing.
Parsing is debounced by 300 milliseconds so the tree is not rebuilt on every keystroke. Stop typing for a moment and it catches up; if it still does not, the document is invalid and the right pane keeps the last valid parse.
A config file that my editor accepts is rejected here.
Editors often accept JSON with Comments or JSON5, which allow comments, trailing commas and unquoted keys. This page uses strict JSON.parse. Remove the comments and the trailing comma, and put double quotes around every key, or paste only the strict-JSON part of the file.
The page becomes unresponsive for a moment after pasting a big payload.
Parsing, tree rendering and the statistics walk all run on the main thread, so a multi-megabyte document blocks the interface while it works. Wait for it to finish, or paste a representative slice rather than the whole export.
Frequently Asked Questions
It is a reader for JSON: it parses the text and shows the structure as an indented tree rather than one long line. Paste your JSON into the Input JSON box on the left and the tree appears on the right about a third of a second later. Nothing else is needed — there is no run button, no account and no file upload.
Yes, it runs in the browser tab with nothing to install or sign up for. The parsing, the tree, the statistics and the Format, Minify and Copy actions are all JavaScript executing on your own machine, so there is no API key, no quota and no per-request cost behind it.
No. The document is passed to your browser's built-in JSON.parse and rendered locally; no request carries the input off the page. That makes it usable for API responses containing tokens or personal data, although anything genuinely secret is safest redacted before it goes into any browser tool.
There is no fixed limit, only what the tab can hold. Parsing and re-rendering a multi-megabyte document will visibly stall the interface for a moment because it happens on the main thread. If a payload is that large, minify a sample of it or split it into the parts you actually need to inspect.
No. The right pane offers a Tree view and a Raw view of the formatted text, and there is no table or grid mode, no column picker and no export to CSV. For an array of records, the tree marks the array as [n] and each record as {n}, which gives you the row and field counts without a table.
Because JSON.parse enforces strict JSON. Trailing commas after the last item, single quotes instead of double, unquoted keys, comments and NaN or Infinity are all rejected even though JavaScript object literals allow several of them. The red line under the input names the position, which is usually one character past the real mistake.
Format reparses the input and writes it back with two-space indentation and one value per line, which is what you want for reading or committing to a repository. Minify writes the same data with no spaces or newlines at all, which is what you want for a payload you are about to send. Both replace the contents of the input box.
Press Copy in the toolbar. It parses whatever is in the input box and writes the two-space indented version to the clipboard, so you get the tidy form even if the box currently holds a minified line. The button reads Copied for two seconds to confirm; if nothing happens, the input is not valid JSON.
Not as an extension — this is a web page, not an editor plugin. It does keep working once loaded, because the parsing and rendering are local, so a dropped connection mid-session does not stop you. Reopening the tab from scratch, however, needs the page to load first.
Keys is every object key in the document; Strings, Numbers, Booleans and Nulls count values of each type; Arrays and Objects count containers; Depth is the deepest nesting level reached. Together they describe the shape of a payload in one line, which is handy for spotting an unexpectedly deep or unexpectedly empty response.