JSON Path Finder -- Click Any Value to Get Its Path

Find JSON Paths

Paste JSON below, then click any value in the tree to see its JSONPath, dot notation, and bracket notation. You can also query by path to extract values. All processing runs in your browser.

Keys

Max Depth

Arrays

Objects

JSONPath

Dot Notation

Bracket

Value

Type

Query by Path

JSON Input

Clickable Tree -- click any value

Parse JSON to see the interactive tree

Privacy: All path finding and querying runs entirely in your browser. No data is sent anywhere. Works offline.

JSONPath Syntax Reference

JSONPath is a query language for navigating and extracting data from JSON documents. Here are the most common expressions:

Expression	Description	Example
`$`	Root object	`$` -- the entire document
`.key`	Child property	`$.store.name` -- access "name" inside "store"
`[n]`	Array index (0-based)	`$.items[0]` -- first element of "items"
`['key']`	Bracket notation for keys	`$['my-key']` -- keys with special characters
`[*]`	All elements in array	`$.items[*].name` -- "name" from every item
`..`	Recursive descent	`$..price` -- all "price" fields at any depth

Notation Comparison

For the JSON {"users": [{"name": "Alice", "address": {"city": "NYC"}}]}, here are the three path notations to access the city:

Notation	Path	Used In
JSONPath	`$.users[0].address.city`	JSONPath libraries, Postman, API testing tools
Dot notation	`data.users[0].address.city`	JavaScript, TypeScript, Python
Bracket notation	`data["users"][0]["address"]["city"]`	JavaScript (for special keys), Python dicts

Dot notation is the most readable for simple keys. Bracket notation is required when keys contain spaces, hyphens, or start with numbers. JSONPath always starts with $ to represent the root.

Common Use Cases

Debugging API responses: Paste a JSON API response and click nested values to quickly find the exact path needed in your code. No more counting braces and brackets manually.
Writing data extraction code: Get the precise dot notation or bracket notation path to copy directly into JavaScript, Python, or any other language that consumes JSON.
Building JSONPath queries: Tools like Postman, jq, and many ETL pipelines use JSONPath expressions. Click the value you want and copy the JSONPath directly.
Documenting API schemas: When writing API documentation, use this tool to find and verify paths to specific fields in complex response objects.
Configuring webhooks and integrations: Many webhook services (Zapier, n8n, Make) require JSONPath expressions to map incoming data. Click the field you need and paste the path.
Learning JSON structure: For complex or unfamiliar JSON, the interactive tree view makes it easy to explore and understand the data hierarchy.

How It Works

This tool parses your JSON input using the browser's native JSON.parse() function, then builds an interactive tree representation. Each value in the tree is clickable. When you click a value, the tool walks up the tree structure to reconstruct the full path from root to that value, and presents it in three formats:

JSONPath ($.store.book[0].title) -- the standard JSONPath expression using $ as root
Dot notation (data.store.book[0].title) -- JavaScript-style property access using dots
Bracket notation (data["store"]["book"][0]["title"]) -- bracket-based access that works with any key name

The query feature lets you type a path expression and see what value it resolves to. This supports standard dot notation (e.g., store.book[0].title) and JSONPath-style expressions starting with $.

Frequently Asked Questions

What is JSONPath?

JSONPath is a query language for JSON, similar to XPath for XML. It uses expressions like $.store.book[0].title to navigate and extract data from JSON documents. The $ symbol represents the root object, dots navigate into objects, and brackets access array elements or properties with special characters.

What is the difference between JSONPath and dot notation?

JSONPath uses $ as the root and is a standardized query language used by tools like Postman, jq, and many ETL pipelines. JavaScript dot notation uses the variable name as root (e.g., data.users[0].name) and is specific to JavaScript and similar languages. Both describe the same path through the data.

When should I use bracket notation instead of dot notation?

Use bracket notation when property names contain special characters (hyphens, spaces, dots), start with numbers, or are reserved words. For example, data["my-key"] works but data.my-key does not because the hyphen is interpreted as subtraction. Bracket notation always works; dot notation only works with valid identifier names.

How do I access deeply nested JSON values in JavaScript?

Chain property accesses: data.level1.level2.level3. For optional (possibly missing) properties, use optional chaining: data?.level1?.level2?.level3. This returns undefined instead of throwing an error if any intermediate property is missing.

Is this tool safe for sensitive JSON data?

Yes. All processing runs entirely in your browser using JavaScript. No data is sent to any server. You can verify this by disconnecting from the internet -- the tool works identically offline.

Related Tools

JSON Formatter -- format and beautify JSON with indentation and syntax highlighting
JSON Validator -- validate JSON syntax with detailed error reporting
JSON Diff Viewer -- compare two JSON documents side by side
JSON to CSV Converter -- convert JSON arrays to CSV format
YAML to JSON Converter -- convert between YAML and JSON

Related Tools

View all tools

Big-O Notation Visualizer

Interactive plot of O(1) through O(n!) complexity curves with operation count comparison

JSON Formatter

Format and beautify JSON with proper indentation

JSON Validator

Validate JSON syntax and show errors

CSV to JSON Converter

Convert CSV data to JSON format with auto-detection

JSON to CSV Converter

Convert JSON arrays to CSV format with nested object handling

JWT Decoder

Decode JWT tokens and display header and payload

JSON Path Finder FAQ

What is JSONPath?

JSONPath is a query language for JSON, similar to XPath for XML. It uses expressions like $.store.book[0].title to navigate and extract data from JSON documents. The $ symbol represents the root object, dots navigate into objects, and brackets access array elements or properties with special characters.

What is the difference between JSONPath and dot notation?

JSONPath uses $ as the root and bracket notation for array indices (e.g., $.users[0].name). JavaScript dot notation starts from the variable name and uses dots for all property access (e.g., data.users[0].name). Both describe the same path through the data structure, but JSONPath is a standardized query language while dot notation is JavaScript-specific.

How do I access nested JSON values?

Chain property names with dots for objects and brackets with indices for arrays. For example, to access the city in {address: {city: 'NYC'}}, use data.address.city (dot notation) or $.address.city (JSONPath). For arrays like {users: [{name: 'Alice'}]}, use data.users[0].name or $.users[0].name.

Is this tool safe for sensitive JSON data?

Yes. All processing runs entirely in your browser using JavaScript. No data is sent to any server. You can verify this by disconnecting from the internet -- the tool works identically offline.

What is bracket notation in JSON?

Bracket notation uses square brackets and quoted strings to access properties, like data['user-name'] or data['key with spaces']. It is required when property names contain special characters, spaces, or start with numbers. Dot notation (data.userName) only works with valid JavaScript identifiers.