This JSON formatter re-indents minified or messy JSON with 2 spaces, 4 spaces or a tab, checks that it is valid, and can minify it back onto one line. The JSON Explorer under the output shows the same data as a tree you can fold open and shut. Everything runs in your browser with its built-in JSON parser, so the data is not uploaded.
How to use the JSON formatter
- Paste your JSON into the Input JSON box, or press Try Example to load a sample user record.
- Pick 2 spaces, 4 spaces or Tab from the Indent menu.
- Wait half a second. When the input starts with
{or[and ends with the matching bracket, the tool formats it on its own. You can also click Format / Prettify or press Ctrl+Enter (Cmd+Enter on a Mac). - Click Minify to put the data on one line, or Validate to check it without changing the output. Validate also reports the root type, such as object or array.
- Press Copy above the Output box. The line under the input compares the input and output size in characters and bytes.
Example: formatting an API response
This 65-character response:
{"order":{"id":1042,"items":[{"sku":"A-1","qty":2}],"paid":true}}The JSON formatter turns it into 130 characters with 2-space indentation:
{
"order": {
"id": 1042,
"items": [
{
"sku": "A-1",
"qty": 2
}
],
"paid": true
}
}The JSON Explorer lists order as an object with 3 keys, items as an array with 1 item, id and qty as numbers and paid as a boolean.
Trailing commas and other syntax errors
If you've ever had a script break because of a single misplaced comma, you know why a strict check matters. Format, Minify and Validate all run your text through the browser's JSON parser, which follows the grammar in RFC 8259 and rejects trailing commas, single-quoted strings, comments and unquoted property names. That makes the page a JSON validator as well as a JSON formatter. When parsing fails, the status bar shows Invalid JSON and the parser's own message. These are the messages Chrome gives; other browsers word them differently:
| Mistake | Input | Message | Fix |
|---|---|---|---|
| Trailing comma | [1,2,] | Unexpected token ']', "[1,2,]" is not valid JSON | Delete the comma before the closing bracket |
| Single quotes | {'id':1} | Expected property name or '}' in JSON at position 1 (line 1 column 2) | Use double quotes for keys and strings |
| Missing comma | {"a":1 "b":2} | Expected ',' or '}' after property value in JSON at position 7 (line 1 column 8) | Add a comma between the two pairs |
| Comment after the data | {"a":1} // note | Unexpected non-whitespace character after JSON at position 8 (line 1 column 9) | Remove the comment; JSON has none |
The position usually points just after the real mistake, so look at the character before it. The 7 most common JSON formatting errors covers more cases, and JSON formatter vs JSON validator explains when you need each.
Human-friendly debugging with the JSON Explorer
The JSON Explorer labels every value with its type (string, number, boolean, null, object or array) and shows how many items each object or array holds, so keys and values are easy to tell apart. Click an object or array to collapse it. The tree lists the first 50 entries at the top level and 30 inside each nested object or array, with a note saying how many more are hidden, and it shortens strings longer than 80 characters. The formatted output above it always contains everything.
In my own dev workflow, I use this tool daily to inspect API responses before piping them into my code. A token from a login response can go straight into the JWT decoder, and a spreadsheet export can be turned into JSON with the CSV to JSON converter first.
Format JSON online or in your editor
A JSON formatter online, or JSON beautifier as some sites call it, is quickest for a one-off response copied from a browser's network tab or a log file, since there is nothing to install. For files in a project, your editor's formatter or a command such as python3 -m json.tool data.json does the same job. To see what changed between two versions of a response, format both here with the same indent and paste them into the text diff checker. The other formatters are under developer tools.
