JSON Navigator
Paste JSON and explore it as a collapsible tree. Click any value to select it and see its full JSONPath — perfect for finding the right path into a deeply nested API response.
Last updated: May 27, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is JSON Navigator?
When you receive a JSON response from an API, finding the path to a specific value can be tedious — especially if the document is deeply nested. JSON Navigator solves that by rendering the document as a tree where every branch can be expanded or collapsed, and every node displays its JSONPath when selected.
JSONPath is a query language for JSON, much like XPath for XML. A path like `$.users[0].name` selects the `name` field of the first user. Once you have the path, you can use it in jq, in your application code, or as input to a JSONPath query tool.
How to Use JSON Navigator
Paste JSON into the input panel.
Click any node in the tree to select it.
The selected JSONPath, type, and size appear in the details panel.
Click "Copy path" to copy the JSONPath to your clipboard.
Common Use Cases
- Finding the JSONPath to a specific value in a large API response.
- Exploring an unfamiliar JSON structure without scrolling through indented text.
- Generating JSONPath expressions for use in jq, JMESPath, or other query tools.
- Debugging which keys exist at a particular level of nesting.
Example Input and Output
Selecting a value in a nested array shows its full JSONPath.
{"users":[{"name":"Alice"},{"name":"Bob"}]}$.users[1].name → "Bob"Privacy
All JSON parsing and tree rendering happens in your browser. No data is sent to a server.
Path syntax for non-identifier keys
When a key contains characters that are not valid JavaScript identifiers (spaces, special characters), the path uses bracket notation with quotes: $["my key"] instead of $.my key.