JSON is the lingua franca of web development — API responses, config files and front-end state all speak it. It's also famous for two annoyances: minified blobs that are hard to read, and syntax errors that hide behind a single stray comma. Mastering format, minify, validate and compare will speed up your debugging a lot. This article walks through all four with an online tool that runs entirely in your browser.
JSON Syntax Essentials
- Keys must be double-quoted:
{"name": "x"}is valid;{name: "x"}is not. - No trailing commas: the last key-value pair must not end with a comma.
- Strings need double quotes: single-quoted strings are a classic source of errors.
- Comments aren't allowed: standard JSON rejects
//and/* */.
When you hit "Unexpected token" errors, it's almost always one of the four above. A validator that pinpoints the location makes the fix instant.
Format and Minify
- Format: open the JSON formatter tool, paste your content and click format — the one-liner expands into readable, indented JSON.
- Minify: do the reverse — collapse whitespace into a single line for smaller payloads or config entries.
- Pick the indentation: use 2/4 spaces or tabs to match your team's style.
- Sort keys: sort keys alphabetically when you want consistent diffs and canonical output.
Validation with Error Location
The tool validates before formatting or minifying: valid JSON gets a pass message; invalid JSON reports the line and column of the error. A quick debugging loop:
- Copy the reported line/column.
- Jump to that spot in your source and check quotes, commas and brackets.
- Fix and re-validate until it passes.
Comparing Two JSON Documents
API schema changes and config edits beg for a structural diff. The compare mode parses both documents and lists added, removed and changed field paths with their values:
| Type | Meaning | Example |
|---|---|---|
| Added | Field only in the right document | $.email present only on the right |
| Removed | Field present on the left, gone on the right | $.age present only on the left |
| Changed | Present on both sides with different values | $.name differs |
Pinpointing differences by path beats eyeballing minified one-liners every time.
Frequently Asked Questions
Is my JSON uploaded to a server?
No. Formatting, validation and comparison all run locally in your browser — safe even for API responses with sensitive fields.
Why does JSON.parse keep failing?
The usual suspects: unquoted keys, trailing commas, single-quoted strings and comments. Run the validator to see the exact line and column.
Can it handle very large JSON?
Regular payloads are fine; for huge files, split them up or use a CLI tool to avoid freezing the browser.
Does compare handle nested objects?
Yes. It flattens nested structures and compares each leaf by its full path, like $.user.address.city.
References
- JSON specification — RFC 8259: https://datatracker.ietf.org/doc/html/rfc8259
- JSON.parse — MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse