How to format JSON online

You call an API, get back 4,000 characters of JSON on a single line, and all you need is one customer’s email address. You could squint at it. Or you could format it and see the whole thing laid out in a few seconds.

What is JSON

JSON (JavaScript Object Notation) is the text format most web APIs use to send data, and plenty of config files use it too. It’s meant to be readable by humans, which is true right up until someone removes all the line breaks.

It’s built from two pieces. Objects are key-value pairs in curly braces, like {"city": "Lisbon"}. Arrays are ordered lists in square brackets, like ["Lisbon", "Porto"]. A value can be a string, a number, true or false, null, or another object or array. That’s the whole language, which is why nearly every programming language can read it.

Why formatting matters

Here’s a small API response the way it usually arrives, minified with every space removed:

{"users":[{"id":1,"name":"Priya Shah","roles":["admin","editor"]},{"id":2,"name":"Tom Becker","roles":["viewer"]}],"total":2}

It’s perfectly valid, and this one is tiny. Now picture it with 300 users. Formatting (also called beautifying or pretty-printing) adds indentation and line breaks so you can see what’s inside what:

{
  "users": [
    {
      "id": 1,
      "name": "Priya Shah",
      "roles": [
        "admin",
        "editor"
      ]
    },
    {
      "id": 2,
      "name": "Tom Becker",
      "roles": [
        "viewer"
      ]
    }
  ],
  "total": 2
}

Formatted JSON is for people: debugging, code review, pasting into a Slack thread. Minified JSON is for machines. It strips every unnecessary space so the payload is as small as possible.

How to use the JSON formatter

1. Open the JSON formatter and paste your JSON into the input box. An API response, a config file, anything.
2. Pick an Indent size and select Beautify for the readable version.
3. Select Minify for the same data squashed onto one line.
4. Select Validate to check the input without changing it. If it’s fine, you’ll see “Valid JSON”. If not, you get the parser’s error message, which in most browsers says where the problem is.
5. Copy the output to your clipboard.

Beautify and Minify report errors too, so you’ll find out either way if the JSON is broken. Everything runs in your browser, so the data you paste never goes to a server. Handy when that API response has real customer details in it.

Common JSON errors

JSON looks like JavaScript, and that’s exactly why it catches people out. These are the usual suspects.

Trailing commas

JavaScript is happy with a comma after the last item. JSON isn’t:

{
  "name": "Priya Shah",
  "city": "Lisbon",
}

Delete the comma after the last property and you’re done.

Single quotes

Strings and keys must use double quotes. Single quotes are a parse error:

{'name': 'Priya Shah'}

Unquoted keys

Every key has to be a double-quoted string. This is a fine JavaScript object and broken JSON:

{name: "Priya Shah"}

Missing or extra brackets

Deeply nested data makes it easy to lose a } or a ]. The error message tells you where the parser gave up, and the missing bracket is usually at that spot or just before it.

Comments

JSON has no comments. Files like tsconfig.json allow them because their tools use a more relaxed parser, which is why this one surprises people. Standard JSON parsers, this formatter included, reject them.

When to format JSON

• Debugging API responses. When an endpoint returns something odd, the formatted version lets you check each field.
• Editing config files. Tools such as ESLint, Prettier and VS Code read JSON settings. Validating first saves you from a confusing startup error.
• Writing documentation. Indented examples are far easier for readers to follow.
• Storing or sending data. Minified JSON takes less space in databases and logs, and less bandwidth over the network.