Browsing JSON or XML as a tree
A tree viewer turns nested data into an outline you can fold. Each object, array or element becomes a branch that you can open or close, so a 2,000-line API response reduces to the dozen top-level keys you care about. This viewer handles both JSON and XML, colours the parts of each value, and shows how many children every branch has.
Choose the format first, then click View. JSON is parsed with the browser's JSON.parse (the syntax in RFC 8259) and XML with DOMParser, so input must be strictly valid in either case.
What a JSON tree looks like
For this input:
{"id":7,"name":"Ada","tags":["x","y"],"meta":{},"ok":true,"n":null}
the viewer draws:
Object{6}
id: 7
name: "Ada"
tags: Array(2)
0: "x"
1: "y"
meta: {}
ok: true
n: null
Branch labels carry counts: Object{6} has six keys, Array(2) two items. Array items are labelled with their index. Empty objects and arrays show as {} and [] with nothing to expand.
Reading the colours
| Part | Colour | Example |
|---|---|---|
| Key, attribute name or array index | Blue | name, id, 0 |
| String, attribute value | Green, in quotes | "Ada" |
| Number or boolean | Amber | 7, true |
| Null | Grey | null |
| Branch summary | Default text | Array(2), Object{6} |
The colour split is useful for spotting type mistakes at a glance: a price shown in green quotes is a string, not a number, which often explains why a sort or sum misbehaves downstream.
What an XML tree looks like
In XML mode each element with children becomes a branch whose label shows its start tag, attributes included, followed by the number of child elements. Elements with no children are shown on one line with their text:
<catalog version="2"> (2)
<book id="1"> (1)
<title> Dune</title>
<book id="2"></book>
A few XML details are simplified. Comments, processing instructions and the XML declaration aren't shown. In mixed content such as <p>Hi <b>there</b> you</p>, only the child element appears; the loose text "Hi" and "you" isn't displayed in the tree. The text is still in your input and in what Copy returns, since XML mode copies your original document.
Quick start
- Pick JSON or XML in the Format menu.
- Paste the data and click View.
- Click summary lines to fold the branches you don't need.
- Click Copy if you want the text: JSON comes back neatly indented, XML comes back unchanged.
Errors are short ("Enter valid JSON." or "Enter valid XML.") and don't include a position. For that, run the input through the JSON validator or the XML validator, fix the reported spot, and view again.
When a tree beats formatted text
Formatted text is better for copying and diffing; a tree is better for orientation. Use the tree to answer "where is this value and what's around it?", for example finding which nested array holds the field you need. Once you know the path, write it as a query in the JSONPath tester or the XPath evaluator to extract the values.
Very large documents render every branch expanded at the start, which can mean a lot of scrolling and a slow page for multi-megabyte input. Collapse the top level first, or trim the data before pasting. If you only need readable text, the JSON formatter is lighter, and in Chrome and Edge its error messages include a line and column.
Last updated