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.
Frequently Asked Questions
What is JSONPath?
JSONPath is a query syntax for JSON, like XPath for XML. $ refers to the root, .key accesses an object field, and [N] accesses an array index. $.users[0].name selects the name of the first user.
How is this different from JSON Editor?
JSON Editor focuses on editing and prettifying. JSON Navigator focuses on path discovery — clicking a node shows you the full JSONPath, which you can copy and use in a query tool or your code.
Can I edit JSON here?
You can edit the input text, but the navigator itself is read-only. For editing values directly, use the JSON Editor.
Does this send my JSON anywhere?
No. All parsing and navigation happens locally in your browser.
Related Tools
JSON Editor
Edit JSON in a textarea with an interactive tree view, formatting controls, key sorting, and instant validation. Copy or download the result.
JSON Path Tester
Test JSONPath expressions against your JSON.
JSON Formatter
Format, validate, and beautify JSON instantly — with clear error messages, Tree View, Diff mode, and Schema validation.
JSON Validator
Validate JSON syntax online. Shows valid/invalid status, error location (line and column), and structure stats including type, key count, and depth.
JSON Sorter
Sort JSON object keys alphabetically in ascending or descending order, with deep or shallow sorting and optional array sorting.
JSON Fixer
Fix broken or invalid JSON automatically. Repairs trailing commas, single quotes, bare keys, Python literals, and JavaScript comments.