How to Use JSONEdit - Edit, Validate, Query and Convert JSON in Your Browser

Avi bhattacharjee — Wed, 30 Sep 2026 06:16:02 +0000

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

👉 jsonedit.com/json-editor

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

👉 jsonedit.com/json-path

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 $schema or picked from a menu.
Checks common formats such as email, date-time, uri, uuid and ipv4.

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. 👇

DEV Community: Avi bhattacharjee