JSONPath Builder Online

About This Tool

Build JSONPath expressions visually and test them against your JSON. This tool runs entirely in your browser — no data is ever sent to a server. Free to use, no account required.

What JSONPath Builder Does

The JSONPath builder lets you construct and test JSONPath expressions interactively against real JSON data, with instant results.

Point-and-Click Path Building

Click on any value in the JSON tree to automatically generate the JSONPath expression that points to that location. No need to manually write path syntax — click, copy, and use.

Real-Time Expression Testing

As you type or modify a JSONPath expression, the matching values update instantly. This makes it easy to refine your expression iteratively until it returns exactly the values you need.

JSONPath Expression Syntax

Understanding key JSONPath syntax elements lets you write powerful queries for extracting data from complex JSON structures.

Basic Expressions

$ is the root element, . is a child accessor, [] is a subscript operator for arrays and object keys. For example: $.store.book[0].title gets the title of the first book in the store.book array.

Wildcards and Filters

* matches all elements at a level ($.items[*].price gets all prices), [?(@.field operator value)] filters by condition, and .. is the recursive descent operator that searches at any depth (..name finds all name fields anywhere in the document).

JSONPath Expression Builder Guide

JSONPath is a query language for JSON data, defined in RFC 9535. It lets you extract specific values, filter arrays, and navigate complex nested structures with a single expression.

JSONPath Cheat Sheet

// Given this JSON:
{
  "users": [
    {"id":1, "name":"Alice", "role":"admin", "score":95},
    {"id":2, "name":"Bob",   "role":"user",  "score":82},
    {"id":3, "name":"Carol", "role":"admin", "score":91}
  ],
  "meta": {"total": 3, "page": 1}
}

// Expressions:
$                            // Entire document
$.meta.total                 // 3
$.users[0]                   // First user object
$.users[*].name              // ["Alice","Bob","Carol"]
$.users[-1].name             // "Carol" (last item)
$..name                      // All "name" values anywhere
$.users[?(@.role=="admin")]  // Alice and Carol objects
$.users[?(@.score>90)].name // ["Alice","Carol"]

JSONPath Filter Expressions

JSONPath in JavaScript

// npm install jsonpath-plus
import { JSONPath } from "jsonpath-plus";

// Basic extraction
const names = JSONPath({path: "$.users[*].name", json: data});

// Filter
const admins = JSONPath({path: "$.users[?(@.role==\"admin\")]", json: data});

// Node.js built-in (no library needed)
const scores = data.users.map(u => u.score); // simpler JS alternative

Building JSONPath Expressions: Common Patterns

Given the following JSON, here are the most frequently needed extraction patterns along with the expressions that produce them.

{
  "users": [
    {"id": 1, "name": "Alice", "role": "admin", "active": true},
    {"id": 2, "name": "Bob",   "role": "user",  "active": false},
    {"id": 3, "name": "Carol", "role": "admin", "active": true}
  ],
  "metadata": {"total": 3, "page": 1}
}

// Common patterns built with the JSONPath Builder:
$.users[*].name              → All user names
$.users[0].name              → First user's name
$.users[-1].id               → Last user's ID
$..id                        → All IDs (any depth)
$.users[?(@.role == 'admin')]        → Admin users
$.users[?(@.active)].name    → Names of active users
$.users[?(@.active == false)].id     → IDs of inactive users
$.metadata.total             → 3
$.users.length               → 3 (some implementations)
$.users[0:2]                 → First 2 users

JSONPath vs JavaScript Array Methods

JSONPath expressions are portable across languages and tools. JavaScript array methods are more familiar to JS developers but require custom recursive functions for deep queries.