JSONPathHubEvery field, pinpointed.
Paste an API response, type a JSONPath expression, and watch matching values light up — live syntax checks, recursive descent, code-style autocomplete. Nothing leaves your browser.
- 100% client-side — zero uploads
- Live error highlighting
- Smart path autocomplete
// Results are always a JSON array, one entry per match.
Built for deep JSON terrain
The tools you reach for when an API returns more structure than you expected.
Syntax Pre-Check
JSON is parsed before evaluation. The moment a bracket goes missing, the exact line and column light up — with the offending source shown inline.
Recursive Descent Engine
A hand-written recursive-descent evaluator walks your tree: dots, brackets, wildcards, unions, slices and [?(@…)] filters — computed locally, instantly.
Live Autocomplete
Type $. and the next level of keys appears — objects suggest properties, arrays suggest [*], indices and slices. It reads your actual data, not a static list.
Normalized Results
One match or one thousand — output is always a clean JSON array with index, type tag and value preview. Copy the whole set, or a single station, in one click.
JSONPath syntax cheat sheet
Every operator the engine supports, with a copy-ready example.
$Root node$.storethe store object@Current node in filter[?(@.price > 10)]filter context.nameChild member$.store.bicycleone level down..nameRecursive descent$..authorall authors, any depth.* / [*]Wildcard$.store.book[*]every element[n] / [-n]Index (neg = from end)$.store.book[-1]last element[a,b]Union$.store.book[0,2]elements 0 and 2[a:b:s]Slice$.store.book[1:3]elements 1–2[?(cond)]Filter expression$..book[?(@.isbn)]books that have isbn== != < >Comparisons[?(@.total >= 100)]numeric compare=~ /re/Regex match[?(@.name =~ /Turing$/)]pattern match&& ||Logic[?(@.a && @.b || !@.c)]combine conditionsWhen your payload won't cooperate
API responses arrive nested five levels deep, and you need one specific field from a thousand records. JSONPathHub lets you paste raw JSON, run a query, and see matched values instantly—no local script, no Postman setup. Backend engineers validating webhook structures, frontend developers debugging nested API data, and QA testers verifying response shapes all benefit. Use it to confirm a filter expression returns the right elements before embedding that query in production code, or to quickly extract every author name from a book catalog payload without writing a full parser.
From pasted JSON to copied results
- Click Sample to load demo data, or paste your own JSON into the editor.
- Click Format to pretty-print the document so nested structures become readable.
- Pick a quick-start query like $.store.book[*].author or type your own JSONPath expression.
- Review the matched values in the results panel, then click Copy as JSON to grab them.
- Click Clear to wipe both panels and start over with a fresh payload.
Frequently Asked Questions
How do I extract a value from JSON using JSONPath?
Paste your JSON into the left pane, then type a path like $.store.book[0].title in the query bar. The engine parses the expression, walks the JSON tree and shows every matching value in the results pane. Click Copy as JSON to take the whole match set with you.
What is the difference between . and .. in JSONPath?
A single dot is a direct child step: $.store.book only looks one level down. A double dot is recursive descent: $..author visits every descendant at any depth and collects all properties named author — perfect when items are nested unpredictably, like log payloads.
How do I filter JSON arrays with conditions?
Use a filter expression in brackets, for example $.orders[?(@.status == 'shipped')].total. Inside the parentheses, @ refers to the element being tested; you can compare fields with == != < <= > >= and regular expressions, and combine conditions with && and ||.
Why are results always returned as an array?
Normalizing output keeps tooling predictable: one match and fifty matches have the same shape, so downstream code never needs a special case. JSONPathHub displays every match with its index and lets you copy the full result set as a JSON array.
How does the autocomplete work?
As you type, the editor evaluates the path you have already written against your live JSON and lists the keys available at that position — objects suggest their property names, arrays suggest [*], indices and slices. Press Tab or Enter to accept a suggestion, or keep typing to filter the list.
Is my JSON data uploaded anywhere?
No. Parsing, path evaluation and autocomplete all run in your browser with client-side JavaScript. Nothing is transmitted, logged or stored, so the tool is safe for production API responses, customer records and internal logs.
Which JSONPath syntax does this tool support?
The core RFC 9535-style syntax: root $, child .name and ['name'], recursive descent ..name, wildcards .* and [*], array indices including negative ones, unions like [0,2], slices like [1:3] or [::2], and filter expressions [?(@.price < 10)] with comparison, regex and logical operators.
How do I select the last element of an array?
Use a negative index: $.store.book[-1] counts from the end. Slices work too — [-2:] returns the last two elements, and [:-2] returns everything except the last two. Autocomplete offers -1 and [*] as soon as your cursor sits inside a bracket.