DeveloTools

JSON Path Visualizer

Click any value in a JSON tree to get its JSONPath and JS bracket-notation path, ready to copy into your code.

100% client-side

Input

0 characters

Tree

Click a node (or its copy icon) to see and copy its path.

Bracket / JS
JSONPath

Paste some JSON on the left to see the tree.

—

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 — a key becomes .key when it's a valid JavaScript identifier, or ["key"] / ['key'] when it isn't (it contains a space, a hyphen, starts with a digit, or has any other character outside /^[A-Za-z_$][A-Za-z0-9_$]*$/), 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 $-prefixed standard notation 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.

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.

Related tools