Developer Tools
Make sense of any JSON — without it ever leaving your browser.
JSON Editor Pro is a fast, offline-first JSON workspace. Edit through a code, tree, table, or graph view, catch syntax errors as you type, and reach for a full toolbox of JSON utilities without an account or a server round-trip — your data never leaves your browser.
{ "id": "ord_2048", "status": "shipped", "total": 142.25, "customer": { "name": "Ada Lovelace", "email": "ada@example.com" }, "items": [ { "sku": "KB-01", "qty": 1, "price": 89.5 }, { "sku": "MS-02", "qty": 2, "price": 20 }, { "sku": "CB-07", "qty": 3, "price": 4.25 } ], "coupon": null}{"id":"ord_2048","status":"shipped","total":142.25,"customer":{"name":"Ada Lovelace","email":"ada@example.com"},"items":[{"sku":"KB-01","qty":1,"price":89.5},{"sku":"MS-02","qty":2,"price":20},{"sku":"CB-07","qty":3,"price":4.25}],"coupon":null}{ "id": "ord_2048", "status": "shipped" "total": 142.25, "customer": { "name": "Ada Lovelace", "email": "ada@example.com" }, "items": [ { "sku": "KB-01", "qty": 1, "price": 89.5 }, { "sku": "MS-02", "qty": 2, "price": 20 }, { "sku": "CB-07", "qty": 3, "price": 4.25 } ], "coupon": null}Can't show tree — the document has a syntax error. Fix it in the Code view (or press Break it again) and the tree comes back.
| # | sku | qty | price |
|---|---|---|---|
| 0 | "KB-01" | 1 | 89.5 |
| 1 | "MS-02" | 2 | 20 |
| 2 | "CB-07" | 3 | 4.25 |
Can't show table — the document has a syntax error. Fix it in the Code view (or press Break it again) and the table comes back.
Can't show graph — the document has a syntax error. Fix it in the Code view (or press Break it again) and the graph comes back.
{
"id": "ord_2048",
"status": "shipped",
"total": 142.25,
"customer": {
"name": "Ada Lovelace",
"email": "ada@example.com"
},
"items": [
{
"sku": "KB-01",
"qty": 1,
"price": 89.5
},
{
"sku": "MS-02",
"qty": 2,
"price": 20
},
{
"sku": "CB-07",
"qty": 3,
"price": 4.25
}
],
"coupon": null
}
{"id":"ord_2048","status":"shipped","total":142.25,"customer":{"name":"Ada Lovelace","email":"ada@example.com"},"items":[{"sku":"KB-01","qty":1,"price":89.5},{"sku":"MS-02","qty":2,"price":20},{"sku":"CB-07","qty":3,"price":4.25}],"coupon":null}
{
"id": "ord_2048",
"status": "shipped"
"total": 142.25,
"customer": {
"name": "Ada Lovelace",
"email": "ada@example.com"
},
"items": [
{
"sku": "KB-01",
"qty": 1,
"price": 89.5
},
{
"sku": "MS-02",
"qty": 2,
"price": 20
},
{
"sku": "CB-07",
"qty": 3,
"price": 4.25
}
],
"coupon": null
}
Why it exists
The problem
Debugging JSON usually means pasting an API response, a config file, or a token into whichever website ranks first — and trusting a server you know nothing about with that data. A plain text editor is safer, but it won't tell you where the missing comma is, what changed between two payloads, or what a deeply nested structure actually looks like.
How JSON Editor Pro helps
JSON Editor Pro runs entirely client-side. It validates as you type with an exact line and column, lets you switch the same document between code, tree, table, and graph views, and bundles the diff, merge, conversion, and token tools you'd otherwise hunt down one site at a time.
Try it here
This playground runs the same browser JSON parser the editor uses, with the same line-and-column error mapping. Nothing you type here leaves this page.
{ "service": "checkout", "retries": 3, "regions": [ "eu-west-1", "us-east-1" ], "tls": { "enabled": true, "minVersion": "1.2" }, "owner": null}Valid JSON — edit the input and it re-validates as you type.
Features
Grouped by the job you're doing. Links open that feature in the product, or its documentation.
Every view edits the same underlying document, so you can read a payload as a tree, scan an array as a table, then jump back to code without copying anything.
The Monaco editor (the editor behind VS Code) with JSON syntax highlighting, folding, and expand/collapse all.
A collapsible, virtualized tree that stays fast on deeply nested data — with search across keys and values.
Arrays of objects become a spreadsheet-style table, so you can scan rows instead of scrolling braces.
A zoomable node graph of the document's structure, for seeing how objects and arrays nest at a glance.
The plain text, exactly as it will be saved or copied.
Validation runs on every keystroke using the browser's own JSON parser, and points at the exact line and column instead of a character offset.
Parse errors are flagged instantly with the exact line and column.
Re-indent with 2 spaces, 4 spaces, or tabs for readable, reviewable output.
Strip whitespace for compact, transfer-ready payloads, with a size-reduction summary.
Size, depth, key counts, a breakdown by type — and duplicate-key detection, which JSON.parse silently hides.
Two responses that should match but don't? Compare them side by side, get a path-by-path change list, or merge them deliberately.
Two or more documents with added, removed, and modified highlighting and synchronized scrolling.
A git-style change list by path — added, removed, moved, and modified nodes.
A deep, key-by-key merge where the overlay wins conflicts, and arrays either replace or concatenate.
Config in YAML, data in CSV, a feed in XML — convert to JSON and back, or infer a schema from a real sample.
Convert YAML to JSON and back, preserving structure.
With attribute and namespace handling.
With header detection and type inference.
Convert TOML to JSON and back.
Infer a JSON Schema straight from sample data, including union types for mixed arrays.
The utilities that usually live in a dozen bookmarked tabs, running locally next to your JSON.
Decode and inspect JSON Web Tokens entirely client-side.
Generate and sign test tokens with HS256, HS384, or HS512.
Encode and decode Base64 strings and files.
Encode and decode URL components.
Generate v4 or time-ordered v7 UUIDs in bulk.
Test regular expressions with live match highlighting.
Convert between Unix timestamps and human-readable dates.
Look up status codes with explanations and use cases.
Close the tab and come back tomorrow — your documents, tabs, and history are still there, stored locally in your browser.
Open, color, duplicate, and switch between several JSON documents at once.
Auto-snapshots with a diff view, so you can step back through edits.
Drag-and-drop file import; export a single document or a ZIP of every open tab.
Search within a document, or jump to any action from a keyboard-driven palette (⌘K).
Installable as a PWA; a web worker keeps large documents responsive.
Matches your OS by default, with a manual override.
Keyboard shortcuts
Who it's for
Built for
Debugging an API response, reshaping a payload, or checking what a client actually sent.
Comparing an expected and an actual response to pinpoint the one field that differs.
Cleaning up config, and converting between YAML, TOML, and JSON.
Tokens, customer records, internal configs — inspected without uploading them anywhere.
Pricing, platforms & privacy
Runs in any modern browser — nothing to install.
Install it like an app and keep working offline.
Pricing
Free — no account, no subscription, no paywall.
Your data
Everything runs client-side: your JSON is processed and stored locally in your browser (via IndexedDB) and is never uploaded to a server. The only thing JSON Editor Pro's backend ever receives is an optional bug report or suggestion you choose to submit through in-app feedback.
Guides
A practical field guide to the JSON parse errors developers run into most: trailing commas, single quotes, comments, unescaped characters, NaN, BOMs, and more — with the exact fix for each.
Learn JSON Schema by building one: types, required fields, additionalProperties, enums, arrays, $ref reuse, and the mistakes that make schemas silently accept bad data.
An honest comparison of JSON, YAML, TOML, and XML — syntax, comments, type pitfalls like YAML's 'Norway problem', tooling, and which format fits configuration files versus data exchange.
What's actually inside a JSON Web Token, the difference between decoding and verifying, HS256 vs RS256, the registered claims that matter, and the security mistakes that keep showing up in real code.
FAQ
Free — no account, no subscription, no paywall.
Everything runs client-side: your JSON is processed and stored locally in your browser (via IndexedDB) and is never uploaded to a server. The only thing JSON Editor Pro's backend ever receives is an optional bug report or suggestion you choose to submit through in-app feedback.
JSON Editor Pro is available on: Web, Installable PWA.
Related
A local-first API client for REST, GraphQL, WebSocket, gRPC, and 10 more protocols.