CodesBeautify

JSON Parser

Parse a document and read its shape as an indented outline where every key shows its type, size and value.

JSON
Parse tree
Runs locally in your browser

About the JSON Parser

A parser answers a different question from a formatter: not "how should this look" but "what is actually in here". The outline on the right names every key once, marks whether it holds an object, an array, a string, an integer, a decimal number, a boolean or a null, and shows the length of strings and the item count of arrays. Branch lines connect children to parents so you can follow a path down the page without counting brackets.

Integers and decimals are reported separately because they behave differently once the data reaches a typed language, and a field that is an integer in one sample and a decimal in the next is a common source of runtime surprises. Strings longer than sixty characters are shortened in the preview so a base64 blob or a long description does not push the tree off screen.

Set a maximum depth when you only care about the top of a large document; deeper branches collapse into a single line that says how many children were hidden. Untick "Show values" to get a pure type map you can paste into a design note or a ticket.

The footer counts every node by type and reports the deepest level reached, which is useful when a recursive serialiser has produced more nesting than you expected. For a clickable version of the same data, open the JSON Viewer; to turn the shape into real code, try JSON to TypeScript.

How to use

  1. Paste JSON on the left or load a file with Upload.
  2. Read the outline: each line is key: type followed by the value or the child count.
  3. Set Max depth to 2 or 3 to see only the upper levels of a big document.
  4. Untick Show values if you want the types alone, then copy the outline into your notes.

Common questions

Why does the parser separate integers from numbers?
Because a value like 59 and a value like 34.5 map to different types in Java, Go, C# and Swift. Seeing which is which prevents a field being typed too narrowly.
What does the depth figure at the bottom mean?
It is the number of levels between the root and the deepest value. A flat object of scalars has depth 2: the object itself, then its values.
Can I parse newline delimited JSON here?
Not directly, since this tool expects one document. Convert it first with JSON Lines to JSON, then paste the array.
The tree is very wide. How do I shorten it?
Set Max depth to a small number, or untick Show values so only key names and types are printed.