Every developer has a JSON routine. Copy a response out of DevTools, paste it somewhere to make it readable, squint at a diff, write a throwaway script to pull out one field, convert it to YAML for a config file... and repeat.
I built JSONEdit to put all of that in one place. It's free, needs no sign-up, and everything runs in your browser, so your JSON never leaves your machine unless you explicitly click Share.
This post walks through the tools I use most and how to get the most out of them.
1. The JSON Editor: text and tree, side by side
This is the heart of the site. The same document is shown twice:
- Text pane (left): a full code editor (Ace) with syntax highlighting and inline error markers.
- Tree pane (right): the same data as a collapsible, editable tree.
The two stay in sync. Type in the text and the tree updates. Edit in the tree and the text is rewritten for you.
Editing in the tree
- Double-click a key or value to edit it. Enter saves, Esc cancels.
- F2 renames the selected key, Delete removes the node.
- + adds a property (on objects) or an item (on arrays). You drop straight into editing the new entry.
- Arrow keys move between rows, and ←/→ collapse or expand.
Values keep their type: edit 42 and it stays a number, and true stays a boolean.
Because tree edits go through the text editor, Undo (Ctrl/Cmd + Z) works for tree edits too.
If the text has a syntax error, the tree keeps showing the last valid version and locks itself until you fix it, so you never lose your place.
The toolbar
| Button | What it does |
|---|---|
| ✨ Format | Pretty-prints with your preferred indentation |
| 🗜️ Minify | Compacts to a single line |
| 🔤 Sort Keys | Sorts object keys A → Z, recursively |
| 📂 Upload | Loads a .json file from disk |
| 🗑️ Clear | Resets the editor |
Tip: Sort keys on two payloads before comparing them. It removes key-order noise.
Load JSON straight from a URL
You can open any public JSON endpoint in the editor by passing it as a query parameter:
https://jsonedit.com/json-editor?url=https://jsonplaceholder.typicode.com/users
Handy for bookmarking an API you inspect often. (The endpoint needs to allow CORS, since the fetch happens in your browser.)
2. Formatter & JSON Lint: fix broken JSON fast
👉 jsonedit.com/format · jsonedit.com/json-lint
Paste messy JSON and you get a live Valid / Invalid badge. If the JSON is invalid, you see the parser's exact error message, and the bad line is marked in the gutter.
- Ctrl + Enter formats valid JSON, or jumps to the first error.
- Import loads JSON from a file or a URL.
The usual suspects it will catch:
{ name: 'Ana' } // ❌ keys and strings need double quotes
[1, 2,] // ❌ trailing commas aren't allowed
// comments // ❌ JSON has no comments
3. Compare two JSON documents
👉 jsonedit.com/compare-two-json
This is a structural diff, not a text diff. Both sides are parsed first, so whitespace, indentation and key order never show up as differences. Only real changes to keys, values and types do.
// left // right
{ {
"name": "Ana", "age": 31,
"age": 30, "name": "Ana",
"email": "ana@example.com", "roles": ["admin", "editor"]
"roles": ["admin"] }
}
Result: three differences.
-
age: Changed (30 → 31) -
email: Removed -
roles[1]: Added
name is identical even though it moved. Changes are highlighted in both editors (amber = changed, red = removed, green = added). Previous / Next steps through them, and a filterable table lists every change by path.
Large documents (over ~50 KB combined) are diffed on a background thread, so the page stays responsive.
4. Query JSON with JSONPath or JMESPath
JSONPath Tester
Results update as you type. A few expressions worth knowing:
| Expression | Selects |
|---|---|
$.store.book[*].author |
All authors |
$..price |
Every price, at any depth |
$.store.book[-1:] |
The last book |
$.store.book[?(@.price < 10)].title |
Titles of books under 10 |
$.store.book[?(@.isbn)].title |
Books that have an isbn
|
It uses JSONPath-Plus, so you also get extras like ~ for property names.
JSON Search (JMESPath)
👉 jsonedit.com/search-json-documents
JMESPath (the language the AWS CLI's --query uses) can reshape results as well as select them:
people[?age > `30`].name
Remember: numbers go in backticks, strings in single quotes.
Not sure which one to use? JSONPath is great for finding values; JMESPath is better when you want to transform them.
5. Validate against a JSON Schema
👉 jsonedit.com/json-schema-validator
Paste data on the left and a schema on the right, then click Validate. Every error is listed with a JSON Pointer to the failing value:
(root) must have required property 'email'
/age must be >= 0
/roles/1 must be equal to one of the allowed values
- Supports draft-07, 2019-09 and 2020-12, auto-detected from
$schemaor picked from a menu. - Checks common
formats such asemail,date-time,uri,uuidandipv4.
6. Explore big documents: Tree, Grid and Inspector
- Tree Viewer: a read-only, collapsible outline with search and Copy Path. Great for finding the path you'll then use in a JSONPath query.
- Grid Viewer: turns an array of objects into a sortable, searchable table. You can hide columns, open a row for detail and export to JSON or CSV.
- JSON Inspector: one workspace with tabs for Tree, Grid, JSONPath, Transform and Validate. Click any node to see its path, type, depth and size. The Validate tab adds lint rules (duplicate keys, precision loss) and a type check that finds fields whose type varies across array items. That's the kind of bug that slips past a syntax check.
7. Convert between formats
| Tool | Notes |
|---|---|
| JSON → YAML | Quotes values like "yes" or dates only when YAML would otherwise change their type. Ideal for Kubernetes, GitHub Actions or Compose files. |
| YAML → JSON | Comments are dropped and anchors expanded. Errors show line and column. |
| JSON → CSV | Best with a flat array of objects. Nested values become JSON strings in their cell. |
| XML → JSON | Attributes become @-prefixed keys. |
| JSON Patch | Apply an RFC 6902 patch (add, remove, replace, move, copy, test) and see the result. |
There's also a YAML Validator, a Base64 encoder/decoder and a JWT decoder. The JWT decoder shows iat / nbf / exp as readable dates and warns you about alg: "none" tokens. It decodes the token but does not verify the signature.
8. Share safely: anonymize, mock, then share
Before you paste production data into a bug report:
- PII Anonymizer masks emails, phone numbers and card numbers but keeps the structure intact, so the JSON still works as a repro. It's pattern-based, so skim free-text fields before sharing.
-
Mock Data Generator builds up to 1,000 fake records from a field list (UUID, email, date, ...). Names, emails and cities within a record belong to the same fictional person, emails use
example.com, and phone numbers use the 555-01xx range.
When you do want to send JSON to someone, the Share button in the Formatter creates a read-only link. The other person doesn't need an account, and the link expires after 90 days. This is the only feature that sends data anywhere, and only when you click it.
9. Make it yours: settings and shortcuts
On the Settings page you can set:
- indent size, or indent with tabs
- editor font and font size
- word wrap, line numbers and fold markers
- dark or light mode
Settings are saved in your browser and apply to every tool, even across open tabs.
Shortcuts worth memorizing:
| Shortcut | Action |
|---|---|
| Ctrl/Cmd + S | Save the current editor content to your browser |
| Ctrl + Enter | Format / run (Formatter, Lint, Tree, Mock Data) |
| Ctrl/Cmd + Z | Undo, including tree edits in the JSON Editor |
| F2 / Delete | Rename / remove a node in the tree |
Wrapping up
The whole toolkit lives at jsonedit.com/json-tools. If you're newer to JSON, the guides cover the basics through to the JSONPath cheat sheet and common JSON errors.
Found a bug or want a feature? Open an issue on GitHub. I read them all.
What's the JSON chore you do most often? Tell me in the comments. It might be the next tool I build. 👇
Top comments (0)