What path formats does this generate?

Three at once for every node you click: a JavaScript dot/bracket accessor (data.store.books[0].title), a JSONPath expression ($.store.books[0].title), and an equivalent jq query (.store.books[0].title).

Can I filter the tree to a sub-path?

Yes. Enter a path like $.store.books[0] or .address.city in the filter input and click Filter, the tree re-renders scoped to whatever that path resolves to.

Does it support full JSONPath syntax like wildcards or filters?

No. The filter box resolves a concrete key/index path (dot or bracket notation), not wildcard (*) or predicate ([?(...)]) expressions.

Is my JSON uploaded anywhere?

No. Parsing, tree rendering, and path extraction all run in your browser; nothing is sent to a server.

Can I load JSON from a file?

Yes, use the Upload button or drag and drop a .json or .txt file onto the input panel.

JSONPath & Visual Tree Explorer

Navigate complex JSON payloads with an interactive tree. Click any key or property to inspect its exact path.

Private by architecture: All processing is 100% client-side memory. Your data never leaves this browser tab.

Click any key in tree to copy path.

JSON Input

0 lines · 0 charsJSON

Interactive Node Tree

Paste JSON on the left to render the interactive tree.

About This Tool

JSONPath Finder renders JSON as a clickable tree so you can find the exact accessor for any value without counting brackets by hand. Click a key and it fills in the JS dot/bracket path, the JSONPath expression, and the equivalent jq query at the same time, each with its own copy button.

It's built for locating and copying a path, not for general-purpose viewing or editing, for that, use JSON Formatter to pretty-print or minify the same JSON instead.

Key Features

Three path formats at once: JS dot/bracket, JSONPath, and jq, generated from a single click.
Color-coded value types: strings, numbers, booleans, and nulls are visually distinct in the tree.
Live status bar: line and character counts update as you type in the input pane.
File upload & drag-and-drop: load a .json or .txt file directly instead of pasting.
Sample payload: one click loads a working nested example to try the tree and path extraction on.
Keyboard-driven: Cmd/Ctrl+Enter rebuilds the tree from the current input.

Example

Load the sample payload, then click the title key on the first book:

{
  "store": {
    "books": [
      { "id": 1, "title": "Clean Code", "price": 29.99 }
    ]
  }
}

the extracted paths panel fills in instantly:

JavaScript: data.store.books[0].title
JSONPath:   $.store.books[0].title
jq query:   .store.books[0].title

Typing $.store.books[0] into the filter box and clicking Filter re-renders the tree scoped to just that book object.

FAQ

What path formats does this generate?: Three at once for every node you click: a JavaScript dot/bracket accessor (data.store.books[0].title), a JSONPath expression ($.store.books[0].title), and an equivalent jq query (.store.books[0].title).
Can I filter the tree to a sub-path?: Yes. Enter a path like $.store.books[0] or .address.city in the filter input and click Filter, the tree re-renders scoped to whatever that path resolves to.
Does it support full JSONPath syntax like wildcards or filters?: No. The filter box resolves a concrete key/index path (dot or bracket notation), not wildcard (*) or predicate ([?(...)]) expressions.
Is my JSON uploaded anywhere?: No. Parsing, tree rendering, and path extraction all run in your browser; nothing is sent to a server.
Can I load JSON from a file?: Yes, use the Upload button or drag and drop a .json or .txt file onto the input panel.