jq Playground — Online JSON Processor
Test jq queries interactively in your browser. Filter, transform, and explore JSON data with real-time results. 100% client-side.
How to Use
- Paste your JSON data into the left input panel (sample data is provided).
- Type a jq expression in the query bar at the top, e.g.
.users[].name. - Results appear automatically in the right output panel as you type.
- Click any example chip to try pre-built queries on the sample data.
- Click Copy Output to copy the results to your clipboard.
What Is jq?
jq is a lightweight, flexible command-line JSON processor — often described as "sed for JSON." Created by Stephen Dolan, it's one of the most essential tools in a developer's toolkit for working with JSON data. Instead of writing Python scripts or Node.js one-liners to extract fields from API responses, you write concise jq expressions.
The problem this playground solves: jq's syntax has a learning curve, and testing expressions on the command line requires constant copying and pasting. This interactive playground lets you write jq queries and see results instantly, making it the fastest way to learn jq or debug complex expressions.
Essential jq Syntax
Every jq expression takes JSON input and produces JSON output. Here are the building blocks:
Identity and Field Access
. # Returns the entire input unchanged
.name # Extracts the "name" field
.user.address # Nested field access (equivalent to .user | .address)
.["key name"] # Field access with special characters
Array Operations
.[0] # First element
.[-1] # Last element
.[2:5] # Slice: elements at index 2, 3, 4
.[] # Iterate: produce each element as separate output
[.[] | ...] # Collect iterator results back into an array
Pipe and Composition
.users | length # Get the users array, then count elements
.items[] | .price # Iterate items, extract price from each
.data | keys | sort # Chain multiple operations
Filtering with select()
[.users[] | select(.age > 30)] # Users older than 30
[.items[] | select(.active)] # Active items only
[.[] | select(.type == "error")] # Filter by exact match
Transforming with map()
.users | map(.name) # Extract names into array
.items | map(. + {"tax": .price * 0.1}) # Add computed field
.numbers | map(. * 2) # Double each number
Object Construction
{name: .first, age: .years} # Build new object from fields
{(.key): .value} # Dynamic key from expression
[.users[] | {name, role}] # Shorthand: {name} means {name: .name}
Commonly Used Built-in Functions
| Function | Description | Example |
|---|---|---|
length | Length of string, array, or object | .items | length |
keys | Object keys as sorted array | .config | keys |
values | Object values as array | .config | values |
type | Type as string | .data | type |
sort_by(f) | Sort array by expression | .users | sort_by(.age) |
group_by(f) | Group array elements | .users | group_by(.role) |
unique | Remove duplicates | [.items[].tag] | unique |
flatten | Flatten nested arrays | .matrix | flatten |
add | Sum numbers / concat arrays | [.items[].price] | add |
to_entries | Object → array of key/value | .config | to_entries |
from_entries | Array of key/value → object | .pairs | from_entries |
select(f) | Keep if filter is truthy | .[] | select(.active) |
map(f) | Apply filter to each element | .users | map(.name) |
join(sep) | Join array into string | .tags | join(", ") |
split(sep) | Split string into array | .csv | split(",") |
test(regex) | Regex test on string | select(.name | test("^A")) |
Real-World jq Recipes
These patterns come up constantly when working with JSON APIs:
Extract Nested Fields from API Response
# From a GitHub API response
[.[] | {repo: .full_name, stars: .stargazers_count, lang: .language}]
Aggregate and Summarize
# Total price of all items
[.items[].price] | add
# Average age
[.users[].age] | add / length
# Count by category
.items | group_by(.category) | map({category: .[0].category, count: length})
Reshape Data
# Pivot: array of objects → object mapping
[.users[] | {(.name): .email}] | add
# Flatten nested structure
[.departments[].employees[]] | sort_by(.name)
jq vs JavaScript for JSON Processing
You could do everything jq does in JavaScript. But jq expressions are dramatically more concise. Extracting active admin usernames from a JSON payload is a one-liner in jq ([.users[] | select(.role == "admin" and .active) | .name]) versus 3+ lines of JavaScript with .filter() and .map(). For ad-hoc data exploration — especially with curl output — jq is unbeatable.
That said, jq is designed for data transformation, not application logic. Use jq for exploring API responses, parsing log files, transforming configuration data, and one-off data extraction. Use JavaScript/Python when you need error handling, side effects, or complex business logic.
Installing jq Locally
# macOS (Homebrew)
brew install jq
# Ubuntu/Debian
sudo apt-get install jq
# Windows (Chocolatey)
choco install jq
# Usage: pipe JSON into jq
curl https://api.github.com/users/octocat | jq '.login, .public_repos'
cat data.json | jq '.items[] | select(.price > 100)'
Related Tools
Format raw JSON with the JSON Formatter. Validate JSON syntax with the JSON Validator. Convert JSON to CSV with the JSON to CSV Converter. Convert between JSON and YAML with the JSON-YAML Converter. Generate TypeScript types from JSON with the JSON to TypeScript Generator. Chain multiple transformations with the Tool Pipeline.
Frequently Asked Questions
- What is jq?
- jq is a lightweight command-line JSON processor. It lets you slice, filter, map, and transform structured JSON data using a concise expression language. Think of it as sed/awk/grep for JSON.
- Does this tool send my data to a server?
- No. All jq evaluation happens entirely in your browser using a pure JavaScript implementation. Your JSON data never leaves your machine.
- Does this support the full jq language?
- This playground supports the most commonly used jq features: path navigation, array/object iteration, pipes, select, map, sort_by, group_by, unique, keys, values, length, to_entries, from_entries, string operations, arithmetic, comparisons, if/then/else, try/catch, and object construction. Advanced features like custom function definitions (def), reduce, and $variables are not yet supported.
- What is the pipe operator in jq?
- The pipe (|) in jq works like Unix pipes. It takes the output of the left expression and feeds it as input to the right expression. For example, ".users | map(.name)" first extracts the users array, then maps over it to get all names.
- How do I filter an array in jq?
- Use select() inside map() or with array iteration. For example: "[.items[] | select(.price > 10)]" returns items with price greater than 10. You can combine multiple conditions with "and" and "or".
- What is the difference between .[] and map()?
- .[] iterates over an array and produces multiple outputs (one per element). map(f) applies filter f to each element and collects results back into a single array. Use .[] when piping to another filter, and map() when you want the result as an array.
AI agent tools available.
The CodeTidy MCP Server gives Claude, Cursor, and other AI agents
access to 47 developer tools. One command: npx @codetidy/mcp