Free Online JSON Visualizer

What a JSON visualizer does

A JSON visualizer draws a document as a picture of its structure instead of showing it as text. Every object and array becomes a box, every nested object or array becomes a child box with a line to its parent, and the plain values inside an object are listed in the box itself. The result is a map of the data that you can take in at a glance.

Formatting helps when a document is small. For the JSON you meet at work, a long API response or a config file nested eight levels deep, formatting only turns an unreadable line into an unreadable page. You end up counting brackets to work out which closing brace belongs to which opening one. A diagram puts depth on the horizontal axis and siblings on the vertical one, so the whole shape fits on one screen. The story behind this tool goes into the problems it was built to solve.

How to read the diagram

Three kinds of box and one kind of line are all there is to learn.

• Blue boxes are objects. The lines inside list each key and its plain value, with long strings cut to a readable length. An object with more than twelve plain values shows the first twelve and a count of the rest.
• Orange boxes are arrays. Plain items are listed with their index in front, so [2] "editor" is the third item. An array whose items are all objects shows only its item count, and the items fan out as child boxes.
• Grey boxes are single values. They only appear when the whole document is one value, such as a bare string or number.
• Lines are labelled with the key. The label on a line is the key or index that leads from the parent to the child, which is the path you would write in code.
• Depth runs along the layout direction. Left to right suits deep documents. Top to bottom suits shallow documents with many siblings, such as a flat list of records.

Copy the diagram as Mermaid

Under the hood the page converts your JSON into a Mermaid flowchart and renders that. Mermaid is a text based diagram language that GitHub, GitLab, Notion, Obsidian and most Markdown tools render natively. Click Copy Mermaid and paste the text into a Markdown file inside a code fence marked mermaid. It shows up as the same diagram, with no image file to maintain, and it diffs cleanly when the structure changes. That makes it a quick way to document what an API returns in a README or a pull request.

For a document with one user who has two roles, the copied text looks like this:

```mermaid
flowchart LR
  n0["{ 1 field }"]:::obj
  n0 -- "user" --> n1["id: 1
name: "Ada""]:::obj
  n1 -- "roles" --> n2(["[0] "admin"
[1] "editor""]):::arr
```

Limits and how it stays fast

Input is capped at 500 lines for now, and the diagram draws at most 300 boxes. The converter walks the document breadth first, so when a document goes past the box limit the top of the tree is complete and only the deepest levels are missing. The page tells you when that happens. If your document is bigger, paste one branch of it, or format it with the JSON formatter and copy the part you care about.

The Mermaid library is only downloaded the first time you click View, so the page itself loads as fast as every other tool here. Everything runs in your browser. Nothing you paste is sent to our server, and there is no copy to delete.

How it fits with the JSON formatter

The two JSON tools are meant to be used in order. The JSON formatter is the right choice when a document may be broken, when you want to sort keys or minify it, or when you need the line and column of a syntax error. Once the document is valid and the question is what is in it, the visualizer takes over.

If you are new to the format, start with what JSON is. If you need to check the shape of a document against a contract, read our introduction to JSON Schema. For the command line side, see how to pretty print JSON in the terminal, and the diagram is a good way to work out which path to feed jq.

Frequently asked questions

Is my JSON uploaded anywhere?

No. The page converts your JSON to a diagram with JavaScript running in your browser. Nothing is sent to our server and there is no copy to delete. You can paste production data or a config file with secrets in it.

Why is there a 500 line limit?

Laying out a diagram is slow for very large documents, and a diagram with thousands of boxes is not readable anyway. The 500 line limit keeps the page fast on every machine. If your document is bigger, paste one branch of it, or format it with the JSON formatter and copy the part you care about.

What is the Mermaid text for?

Mermaid is a text based diagram language that GitHub, GitLab, Notion, Obsidian and most Markdown tools render natively. Paste the copied text into a Markdown file inside a mermaid code fence and it shows up as the same diagram, with no image file to maintain.

What do the box colors mean?

Blue boxes with square corners are objects, and they list the plain values inside them. Orange boxes with rounded ends are arrays, and they list their plain items with the index in front. A grey box is a single value with nothing inside it, which only happens when the whole document is one value.