JSON formatter and validator: local in the browser, with a type legend
JSON formatter, validator and sorter. Type chips for every field, tree view, caret-pointed error card with common-cause list. Your inputs stay in the browser.
JSON looks the same everywhere - until it breaks. The formatter below parses, formats, minifies, sorts or escapes. When something is off, it points to the spot with a caret and tells you what it expected versus what it found. Everything runs in your browser; your inputs stay local - relevant when you paste customer data or API responses.
{ "id": 42, "title": "Sample Document", "status": "published", "active": true, "tags": [ "draft", "review" ], "metadata": { "created": "2024-01-15", "owner": null } }
The result explained
▾ Object {6}
▾ "tags": Array [2]
▾ "metadata": Object {2}
What is JSON, and why is it so strict?
JSON started in 2001 as a subset of JavaScript object literals. It became RFC 8259 (2017), the standard still in force. The strictness is by design: exactly six types, unambiguous tokenisation, no comments. Every parser ends up with the same tree.
The six types are string (double quotes), number (decimal, no NaN, no Infinity), boolean (true / false), null (null, no undefined), array (comma-separated, order matters) and object (keys are strings). The type chips above show each type with its colour, sample and spec rule; the tree view colours every field the same way. Click a chip to highlight that type in the tree - useful when scanning "where are all the strings".
How do I find the error in my JSON file?
The most common pain with JSON is not "how do I format this" but "why does it break". Native JSON.parse throws a SyntaxError with position - in Chrome and Firefox as a character index into the input, which the formatter maps to line and column. The red error card above then shows:
- Position - line, column, character index.
- Context window - the offending line plus one above and one below, with a caret under the spot.
- Expected vs found - what the parser wanted at that position and what it saw instead.
- Common causes as a list: trailing comma, single quotes, unquoted key, JS comment,
undefinedorNaN.
Safari does not always return a position; in that case the context window drops out, the message and remediation list stay visible.
Trailing commas, single quotes and other JS heritage
When pulling JSON from JS code, the same traps keep recurring:
| Problem | JS accepts | JSON accepts | Fix |
|---|---|---|---|
{"a": 1,} (trailing comma) | Yes (since ES5) | No (RFC 8259 §4) | Drop the comma |
{'a': 1} (single quotes) | Yes | No | Use double quotes |
{a: 1} (unquoted key) | Yes | No | Quote the key |
// comment | Yes | No | Strip comments |
undefined, NaN, Infinity | Yes | No | null / a real number |
JSON5 reacted to these points: it allows trailing commas, single quotes, unquoted keys, comments, NaN and Infinity, but not undefined. JSON5 is still not the same format as JSON. If your tool or API expects strict JSON (most do), strip the JS-isms first. The error card points to the first suspect spot.
Format, minify, sort - which when?
Format with 2 or 4 spaces is the default for reading and code review. 2 spaces is Prettier's default and the standard in style guides like Airbnb and Google.
Minify strips every whitespace character. Useful when JSON has to fit into an env variable, a URL query string, or a DynamoDB entry - every byte counts.
Sort keys orders object keys alphabetically (recursive by default). Main use: comparing two similar configs without git diff shouting because some tool reordered keys. Arrays stay in order because position carries meaning in arrays.
Escape and unescape - JSON inside JSON, text into JSON
Escape turns arbitrary text into a JSON string literal. hello "world" becomes "hello \"world\"". That is JSON.stringify(input) under the hood - useful when embedding text into a config, hardcoding a JSON value inside a JS string, or passing free text as a JSON value to an API.
Unescape is the reverse: a JSON string literal back to plain text. Works on a single string literal, not on a whole object - the format mode handles that.
Frequently asked questions
What is invalid JSON and how do I spot it?
JSON is a strict subset of JavaScript. Trailing commas, single quotes, unquoted keys, comments, undefined and NaN are all forbidden. The formatter above flags the first offending position with a caret and a list of common causes.
How do I find the error in my JSON file?
On a parse error a red card appears with line, column and character position. Chrome and Firefox return the exact position; Safari often does not.
What are trailing commas and why does JSON dislike them?
A comma right before } or ]. JavaScript allows it, JSON does not - RFC 8259 bans it so machine parsers can tokenise unambiguously.
Minify or format JSON - which when?
Format for reading and debugging, minify for transport or env-variable storage. One click switches.
How do I sort keys in JSON?
Switch the mode to Sort keys - recursive by default. Arrays stay in order.
What is the difference between JSON and JSON5?
JSON5 allows trailing commas, single quotes, unquoted keys and comments. The formatter speaks strict JSON per RFC 8259 in v1.
What does escaping a JSON string mean?
Turning arbitrary text into a JSON string literal - quotes become \\\", line breaks \\n. Unescape is the reverse.