Browse JSON as a tree instead of scrolling through text

When a document has dozens of nested objects, reading it line by line is slow. The JSON Viewer draws your data as an expandable tree. Objects and arrays become folders you can open or close, each showing how many items it holds, and simple values are colored by type. That makes it much easier to find one field inside a large response or to understand how sections relate to each other.

Steps to explore a document

1. Paste JSON into the Data Source box, or press Load Sample to get a project record with nested owner, stats and history sections.
2. Click Visualize JSON Tree. If the JSON is invalid, an Invalid JSON dialog explains the parser error.
3. Click the small arrow next to a name, or the name itself, to collapse or expand that branch.
4. Use Expand All or Collapse All, which appear above the tree after it is drawn, to open or close every level at once.
5. Type into Search keys or values to highlight matches in yellow. Branches containing matches open automatically.

The Nodes counter in the header shows how many entries were drawn, counting the root, every object and array, and each simple value.

How the tree reads

• Each object or array row displays a summary like the number of items in braces or brackets, which lets you gauge size without opening it.
• Strings are shown in green with their quotes, numbers in orange, booleans in pink and null in grey italics.
• The top level is labeled root, and array entries are labeled by their index number.

When it is useful

• Finding a specific field in a large API response, such as a nested address or permission list.
• Walking a colleague through the shape of a payload without sending a screenshot of raw text.
• Checking that an array contains the expected number of records before you write code against it.
• Locating every place a certain value appears, by searching for it and scanning the highlighted rows.

Points to keep in mind

The search is a plain text match, case-insensitive, and runs against the visible text of each row, so it can match keys, values and even the item-count labels. Clearing the search box removes highlights but does not collapse the branches it opened. Despite the tool's name, the tree is read-only: you cannot change values in it, so edit the source text and press the visualize button again. Everything is drawn in your browser with JavaScript. Very large documents create a lot of page elements, so expect the page to slow down with files of many thousands of entries. Keys are inserted into the page as written, so if a document contains unusual characters in key names, the display may look odd.

Related Tools

• Add Line Breaks
• Add Prefix
• Add Suffix
• Add Watermark