JSON Tree Viewer

How to use this JSON tree viewer

1. Paste any JSON object or array.
2. Click the arrows to expand or collapse nested fields.
3. Click the copy icon next to any field to get its exact path, ready to use in your own code.

How does this work?

Your JSON never leaves your device. It's parsed locally and rendered as an interactive tree. Copying a field gives you valid JavaScript bracket notation, for example data["users"][0]["name"], so you can paste it directly into your own script.

Bracket notation versus dot notation — why this tool always uses brackets

JavaScript actually supports two ways to access an object property: dot notation (data.users) and bracket notation (data["users"]), and while dot notation is generally shorter and more familiar to read, it has a real, hard limitation bracket notation doesn't share — it only works when a key is a valid JavaScript identifier, meaning it can't contain spaces, hyphens, or start with a digit, and can't be one of JavaScript's reserved words. Bracket notation, in contrast, works universally for absolutely any string key at all, including keys with spaces ("full name"), keys with special characters ("user-id"), and keys that are purely numeric strings. This is exactly why this tool's copied paths always use bracket notation rather than dot notation — it's the one form guaranteed to work correctly and safely regardless of what a specific JSON document's key names actually happen to look like.

JSONPath — a different, more powerful path syntax worth knowing about

The bracket-notation paths this tool generates are valid, directly pasteable JavaScript, but they represent just one specific path syntax among several that exist for referencing locations within JSON. JSONPath, a separate and more powerful query-oriented syntax (commonly written as $.users[0].name), supports genuinely more expressive queries beyond simply naming one exact static field — wildcards to select every element in an array at once, filter expressions to select only elements matching some given condition, and recursive descent to search for a specific key at any depth throughout an entire document without needing to know its exact nesting level in advance. JSONPath is worth knowing specifically if you're working with tools like jq, various API query parameters, or JSON-based configuration systems that expect this particular query syntax rather than plain, directly executable JavaScript.

Why visually exploring nested JSON beats scrolling through formatted text

Even perfectly formatted JSON with proper indentation becomes genuinely hard to navigate once nesting gets more than a few levels deep — you end up scrolling up and down repeatedly just to keep track of which closing brace or bracket actually belongs to which opening one, especially in a large API response with many array elements. A collapsible tree view solves this directly by letting you collapse away entire branches you don't currently care about, keeping only the specific part of the structure you're actually investigating visible on screen at once. This is exactly the specific advantage a tree viewer offers over a plain JSON formatter — it's a genuinely more effective way to navigate and understand a large or deeply nested document's actual structure, and it's the difference between the two tools mentioned in the FAQ above.

How the tool decides quotes versus no quotes for a given key

The copied paths this tool generates correctly distinguish between object keys and array indices, and getting this distinction right matters for producing genuinely valid, directly runnable JavaScript. An object's string keys are always wrapped in quotes inside the brackets, like ["users"], since JavaScript object property names are fundamentally strings. Array indices, in contrast, are numbers and appear without any quotes at all, like [0], since JavaScript specifically distinguishes between accessing an array by numeric position versus accessing an object by a string key name — mixing these up (quoting an array index, or leaving an object key unquoted) would produce code that either fails outright or, worse, silently does something entirely different from what was actually intended, which is exactly the kind of subtle mistake this tool's correct, automatic path generation avoids for you.

Limitations of this tool

This tool renders valid JSON as an interactive, collapsible tree and generates JavaScript bracket-notation paths for any field you select — it doesn't generate JSONPath, jq syntax, or other alternative path formats described above, only directly pasteable JavaScript bracket notation. It requires syntactically valid JSON to parse at all, so use the JSON Formatter tool first if your input has a syntax error you need help locating. For extremely large JSON documents, rendering every single node as an interactive tree element can become noticeably slower than working with the same content as plain formatted text, since a large, fully expanded tree means a correspondingly large number of individual interactive DOM elements for your browser to manage.