← Hashito System Home 日本語 Tools Blog Posters
Loading
100%
Horizontal axis = JSON level
How to use: paste into the JSON data panel on the left and press Draw. The root becomes level 0, and elements are stacked by nesting depth. Click an element to see its details on the right (path, level, number of children, number of siblings, value); the relationship is color-coded in both the diagram and the text. Drag to move, use the wheel to zoom, and double-click to center on an element. On narrow screens, the JSON and Details buttons open each panel. All parsing happens in your browser, and nothing you enter is transmitted.
If you only need formatting or a syntax check, try the JSON Formatter & Validator; to compare two JSON documents, see JSON Diff. We also offer free learning posters that illustrate how data and the web work.
Related tools: JSON Formatter & Validator CSV ⇄ JSON Converter JSON Diff YAML / JSON Converter

Frequently asked questions

What does "level" mean here?

It is the nesting depth counted from the root of the JSON. The root is level 0, the keys directly inside it are level 1, the keys inside those are level 2, and so on. This tool maps the level to a horizontal position, so the further right an element sits, the more deeply nested it is.

Does it work with large JSON?

The more elements there are, the more work the drawing and the automatic tidy-up require. By default, JSON with more than 2000 elements is not drawn; the tool reports the element count instead. Above 600 elements the overlap-resolving tidy-up is skipped so that drawing stays fast. For very large JSON, paste only the part you want to inspect.

Is the JSON I paste sent to a server?

No. Parsing, drawing, and searching all happen in JavaScript inside your browser. The JSON you enter is never sent to or stored on a server, so you can safely inspect configuration files or API responses that must not leave your machine.

Why does the text change when I press Draw?

To link every node in the diagram to a line of text, the JSON is re-serialized with a standard two-space indent when you draw it. That link is what lets the matching line light up in the same color when you select an element in the diagram. The values themselves are unchanged. If you need to keep the original formatting, save your text elsewhere before drawing.