JSON viewer: explore any JSON as a tree
Explore JSON as a tree, collapse it to any level and copy the path to any value.
The tree is built on this device. Your JSON is never uploaded. How your data stays local.
Problems
JSON Mill's JSON viewer shows a document as a collapsible tree: every object and array is a row you can open or close, with its number of items next to it. You can expand everything to a chosen depth, search keys and values, and copy the path to any value, such as $.servers[0].host.
The tree reads your JSON without converting numbers, so large IDs and decimals look exactly as they do in the file. It runs in your browser.
How to view JSON as a tree
- Paste or open your JSON. Paste it, drop a file on the workspace or press Open file. This page opens in the Tree view.
- Set the depth. Use Levels 1, 2 or 3 to expand the tree to that depth, All to open everything, or Collapse all. Click a row's arrow, or use the arrow keys, to open one branch.
- Find a value. Type in Search keys and values. Step through matches with the arrow buttons, or switch on Only matches to hide the rest.
- Copy the path or the value. Select a row. The breadcrumb above the tree shows where you are; Copy path copies the path and Copy value copies the value as JSON.
Example: the paths in a config file
A small service config with an array of servers and a key that contains a space.
{
"app": "billing",
"servers": [
{ "host": "db-1.internal", "port": 5432 },
{ "host": "db-2.internal", "port": 5433 }
],
"feature flags": { "new-invoices": true }
}
$.app = "billing"
$.servers[0].host = "db-1.internal"
$.servers[0].port = 5432
$.servers[1].host = "db-2.internal"
$.servers[1].port = 5433
$["feature flags"]["new-invoices"] = true
Array items use their index, as in servers[1]. Keys that are valid identifiers use a dot; keys with spaces, dashes or other characters use brackets and quotes, as in ["feature flags"], which is the notation JSONPath uses.
Options
| Option | What it does |
|---|---|
| Levels | Expand to depth 1, 2 or 3, or all levels. |
| Search keys and values | Case-insensitive search across keys and values, with a match count. |
| Only matches | Shows only matching rows and their parents. |
| Copy path and Copy value | Copy the selected row's path, or its value as compact JSON. |
| Edit a value | Double-click a text, number, true, false or null value to change it. Only that value's text changes in the source. |
Limits
- Copy path gives one style, the JSONPath-like
$.a[0]["b c"]. JSON Pointer and jq paths are not offered. - Strings longer than 200 characters are cut short in the tree. Select the row and use Show full value to read all of it.
- Objects and arrays cannot be edited in place in the tree; edit their values one by one, or edit the source text.
- The tree shows valid JSON only. If the source has an error, the last valid tree stays dimmed until you fix it; see the JSON validator.
Questions
- How do I get the path to a value in JSON?
- Open the JSON in the Tree view, select the value and press Copy path. You get a path such as
$.servers[0].host, with array indexes in brackets and unusual keys quoted, in the notation JSONPath uses. - Can I collapse JSON to a certain level?
- Yes. Levels 1, 2 and 3 expand the tree to exactly that depth and close everything deeper, which is the quickest way to see the shape of an unfamiliar document. All expands everything.
- Does the viewer show duplicate keys?
- Yes. The tree shows every entry of an object in source order, including repeated keys, and the validator warns about each duplicate. Tables and exports use the last value of a repeated key, like
JSON.parse. - What is the difference between the tree and table viewers?
- The tree shows any JSON, nested however deeply, one value per row. The table viewer shows one array of records as a grid, which is better for comparing many similar records, sorting and filtering.
Related tools
Last updated