JSON Formatter
Format, minify and validate JSON. Browse it as a tree, query with JSONPath, diff two versions, repair broken JSON, sort keys, and convert to YAML or CSV — all in your browser.
Built for fast, private, no-nonsense work.
JSON Formatter is part of PixHaul — a small set of browser-based tools we built because most of the “free online” alternatives are slow, ad-laden, and upload your files before they’ll process them. PixHaul does none of that.
JSON Formatter in four steps.
- 1
Paste, drop or load
Drop any JSON into the input panel — or drag a .json or .csv file onto it. The Sample button gives you a working example to play with.
- 2
Format, minify, sort, repair
Format pretty-prints with 2- or 4-space indentation. Minify strips whitespace to one line. Sort keys alphabetizes recursively. Repair fixes common authoring mistakes like single quotes and trailing commas.
- 3
Switch to Tree to explore
Click a key to copy its JSONPath. Search filters keys and values with live highlighting. Expand and collapse to focus on the parts you care about.
- 4
Query with JSONPath
Use the Query tab to extract data: $.user.name, $.items[*].price, $..sku — wildcards and recursive descent are supported. Copy the result set as a JSON array.
- 5
Diff or convert
Compare shows the structural difference between two JSON documents with full paths. Convert exports the current JSON as YAML or, for top-level arrays, CSV.
Questions, asked & answered.
What does “Repair” actually do?
It applies a small set of conservative fixes — strips JS-style // and /* */ comments, converts smart and single quotes to double, quotes unquoted property names, and removes trailing commas before } or ]. After repair we try to parse the result and pretty-print it. If it still isn't valid JSON, you'll see the partially repaired text and the original parse error.
Which JSONPath syntax is supported?
A practical subset: the root $, dotted keys (.name), bracket-quoted keys (['user-id']), numeric indices ([0], [-1]), wildcards (.*, [*]) and recursive descent (..key). Filter expressions like [?(@.price > 5)] are not supported.
How does the diff work?
It walks both trees in parallel and emits one entry per change with a JSONPath pointing at the affected node — added, removed, changed (same type, different value), or typeChanged (e.g. number → string). Arrays are compared positionally rather than by best-match, which matches how most APIs version their payloads.
Does Sort keys mutate anything?
It rewrites the input panel with object keys alphabetized at every depth. Array order is preserved — JSON arrays are ordered by spec, so reordering them would change meaning.
Can I import CSV?
Yes — drop a .csv file into any input and it'll be parsed into an array of objects. Numbers, booleans and null are auto-detected; everything else stays a string. The reverse (JSON → CSV) lives in the Convert tab and expects a top-level array.
Is my data uploaded anywhere?
No. Every operation — parse, format, repair, tree walk, JSONPath, diff, YAML/CSV conversion — runs in your browser. The page makes no network calls for any of these features.
How large a payload can it handle?
A few megabytes is comfortable on any modern device. Past ~25 MB the textarea-based editor and tree renderer get sluggish — for very large payloads use Minify + Copy and pipe the result through a streaming tool like jq.
Does it support JSON5 or JSONC (JSON with comments)?
Not in strict parsing — we follow the official JSON spec. But the Repair button accepts JSONC-style comments, single quotes, and trailing commas, and converts them into valid JSON for you.
Why does my YAML look different from PyYAML's output?
Our YAML serializer keeps the original key order and quotes only when necessary (strings that look like numbers, booleans, or contain reserved characters). PyYAML's default sorts keys alphabetically and quotes more aggressively. The two are semantically identical — load either with any conformant YAML parser and you'll get the same object.