JSON Formatter

What this does

So you have got a block of JSON that came back from an API as one long unreadable line, and you actually need to read it. This formats it. Paste the JSON in, or upload a .json file, hit Format, and you get it back laid out with clean indentation so you can follow the structure. There is a Copy button for when you are done, and because it has to read your JSON before it can format it, it also tells you when something is broken.

How to use it

1. Paste your JSON into the box, or upload a .json file and it loads into the box for you.
2. Press Format.
3. Read the tidy output, then press Copy to grab it.

If nothing comes out and you get an error instead, your JSON has a problem somewhere, which is useful to know in itself.

How it works

There is no magic here, and nothing clever you need to trust. The tool uses the JSON reader that is already built into your browser. It runs your text through JSON.parse to turn it into real data, then through JSON.stringify to write it back out with four space indentation. That is the whole job.

The important part is where this happens. It all runs inside your browser, on your own machine. Your JSON is never uploaded to a server, never logged, and never saved anywhere. That matters, because some online formatters quietly keep what you paste, and a few even leave it public unless you sign in. If your JSON has API keys, tokens, or customer data in it, that is the last thing you want. Here, the data does not leave the page.

What makes JSON valid

Because the tool parses your JSON first, it is strict about what it accepts, the same way your code will be. If you have hit the error and are not sure why, it is almost always one of these:

• Keys and strings must use double quotes, not single quotes. 'name' will fail, "name" is fine.
• No trailing commas. That last comma after the final item in an object or array is not allowed.
• No comments. JSON has no // or /* */. If you pasted a config file with comments, strip them first.
• Brackets and braces have to match up and be closed properly.

Fix whichever one applies and it will format cleanly. In a way the error is the tool doing you a favour, since it caught a mistake your app would have choked on later.

A quick example

Here is the kind of thing it does. This is JSON the way an API often sends it, all on one line:

{"name":"Ada","age":36,"langs":["JS","Python"],"active":true}

And here it is after formatting:

{
    "name": "Ada",
    "age": 36,
    "langs": [
        "JS",
        "Python"
    ],
    "active": true
}

Same data, but now you can see the shape of it at a glance.

Questions people ask

References

1. Ecma International. ECMA-404: The JSON Data Interchange Syntax. https://ecma-international.org/publications-and-standards/standards/ecma-404/
2. Internet Engineering Task Force. RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format. https://www.rfc-editor.org/rfc/rfc8259
3. MDN Web Docs. JSON.stringify(). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify