JSON Path Visualizer

What is a JSON path?

A JSON path is a short string that pinpoints one exact value inside a nested JSON document — the same way a file path pinpoints a file inside folders. Instead of manually counting brackets and quotes to write data.users[0]["user-id"] by hand, this tool renders your JSON as a clickable tree: click any value and it hands you the ready-to-paste path, in both JS bracket notation and standard JSONPath (RFC 9535) syntax.

How to use JSON Path Visualizer

1. Paste your JSON into the Input panel, or click Paste / Example.
2. Browse the resulting Tree, using Expand all / Collapse all as needed.
3. Click any key or value in the tree to generate its path.
4. Copy the JS bracket-notation or JSONPath string with the copy icon next to it.

How JSON path generation works

Every node in the tree carries the list of keys and array indices ("segments") needed to reach it from the root, collected while the tree is built. Clicking a node, or its small copy icon, turns that segment list into a ready-to-paste path in two conventional notations:

// Given
{
  "users": [
    { "full name": "Ada Lovelace", "user-id": "u-001" }
  ]
}

// Clicking "user-id" of the first user generates:
Bracket / JS:  data.users[0]["user-id"]
JSONPath:      $.users[0]['user-id']

Both strings are built from the same underlying segment array by two small, independent rendering functions, each following its own naming rules — a key becomes .key when it's a valid JavaScript identifier for the bracket/JS path, or the RFC 9535 member-name-shorthand for the JSONPath side (very similar, but RFC 9535 doesn't allow $ in an unquoted name the way JS identifiers do — a key like "$ref" renders as ['$ref'] in JSONPath, never as invalid unquoted dot notation). Anything outside those rules — a space, a hyphen, a leading digit — falls back to ["key"] / ['key'], so the generated path always works when pasted into real code, a JSONPath library, or a jq expression. Array items always use bracket-index notation, e.g. [0], regardless of the key style around them.

The search box filters the tree by key name or, toggled to "Values", by the actual value content — useful for finding which node holds a specific value before copying its path.

Frequently asked questions

What's the difference between the two path formats?

Bracket/dot notation (e.g. data.users[0].zip) matches how you'd access the value directly in JavaScript. JSONPath (e.g. $.users[0].zip) is the standard notation defined in RFC 9535, used by JSONPath libraries, jq-style tools and JSON query testers.

How do I copy a path?

Click any node in the tree, or its small copy icon, to copy its bracket-notation path instantly. Selecting a node also shows both notations in the path bar above the tree, each with its own copy button.

What happens with keys that aren't valid JavaScript identifiers?

Keys with spaces, hyphens, or that start with a digit are automatically wrapped in bracket notation with quotes, for example data["user-id"] instead of the invalid data.user-id. The JSONPath side applies RFC 9535's own (slightly stricter) name rules — for example a key like "$ref" is valid in JS dot notation but not in JSONPath's unquoted shorthand, so it renders as $['$ref'] there.

Is it safe to paste sensitive data into this tool?

Yes. All parsing and rendering happens in your browser using native JavaScript; no data is ever sent to a server.