JSON Formatter

This is the very idea of a good JSON formatter, and it's not as easy as it sounds. While most tools around the web get your data formatted perfectly, they upload to a server, insert advertisements in between your data, or crash when you try to insert a 10MB API response. This page will explain what a JSON formatter does, how to use a JSON formatter properly, the difference between a good and a bad formatter, and how to fix common issues that cause most JSON errors that drive developers to the JSON formatter page in the first place.

So What is JSON Formatter?

A JSON formatter is a program that can convert raw or minified or otherwise unindented or poorly-spaced JSON text back to text that can be read by a human. Typically, the JSON returned from an API or server log is a single, continuous segment of text with curly braces and commas. Valid but too difficult to read.

In practice, here's the difference. The JSON returned by an API call is as follows:

{"user":{"id":482,"name":"Priya Shah","roles":["admin","editor"],"active":true}}

When you pass it through a formatter it turns into this:

{
  "user": {
    "id": 482,
    "name": "Priya Shah",
    "roles": ["admin", "editor"],
    "active": true
  }
}

Same information, same characters — and now in 2 seconds, instead of squinting at a wall of text. That is the main task. Most formatters not only format but also check the JSON for errors, warning you of missing commas, unquoted keys and trailing commas so you don't go down a rabbit hole trying to figure out why your program isn't working when it's really just a syntax error.

In this step-by-step guide, you will learn how to format JSON.

1. Insert your JSON (paste or upload). Paste JSON data from an API response, a configuration file, a log file or directly from a .json file into the input box. Most tools also will let you drag-and-drop files, load JSON directly from a URL, etc.
2. Select "Format" or "Beautify. The tool processes the structure and re-formats it with a consistent amount of spaces at the start of each line (typically 2 or 4) and line breaks.
3. Error checking for validation. A solid formatter will not only fail to process the JSON, it will also indicate which line and character the JSON has an error.
4. Review the output. Explore nested objects and arrays without losing place in the code window, using tree view or code view.
5. Copy or download the answer. Download the formatted JSON in one click or as .json file to quickly drop it into your project.

If you are formatting JSON on a regular basis as part of your work, it's worth formatting it once, and setting your indentation to 2 spaces (which is the common convention and default for JSON, following most style guides).

JSON Formatter, Validator, Beautifier and Minifier

These terms are used pretty much interchangeably, and most tools perform all four of these, but they're actually 4 different jobs:

If it formats only, and doesn't validate, you might accidentally get "successfully" formatted bad JSON which just produces pretty bad JSON. It would be better if the two went together.

These are some common JSON Errors that a Formatter should be alert for:

There are a number of repeating offenders for most JSON errors. A good validator will see them all and will PM you with the location they found:

• Trailing commas — a comma at the end of an object or array (not allowed in strict JSON, allowed in JavaScript)
• Do not use single quotes, JSON needs double quotes for keys and string values — this means that all keys and string values in the JSON document must be surrounded by double quotes.
• Unquoted keys - {name: "Alex"} is invalid; it should be {"name": "Alex"}.
• Missing or mismatched brackets/brace — one that closes the wrong structure or one that is not closed at all {, [, or a bracket that closes a structure that was not opened with it } or ]
• Comments — JSON does not support comments, a common mistake is to use // or /* */ comments.
• The following undefined or NaN values are legal in JavaScript objects but not in JSON:
• Leading zeros in numbers, e.g. ‘007' is not valid JSON, it requires to be a simple number or string.

There are some tools that take a step further with a "JSON repair" feature that can correct these common issues (replacing bad quotes, adding missing ones, removing trailing commas) and is useful when cleaning up hand-written or scraped JSON — but it's important to review what has been changed rather than simply trust it.

Who's using the JSON Formatter?

It's not just back end developers. In reality, the following audience is wider:

• Anyone editing API responses, webhook payloads or config files.
• QA & test engineers checking the API's response is correct in terms of structure.
• Someone who wants to scan a JSON record structure without writing a parser, and who will get data from an exported file.
• Frontend Developers looking at the fetch or axios response in their development work.
• Development engineers who are required to read a JSON configuration or payload without involving an engineer.

A good JSON Formatter should have the following features:

Some formatters are not alike. What really counts:

• Client-side processing. No data is sent to a server, the best tools format and validate JSON in your browser using JavaScript. This is important when pasting from a production system because the data may contain user information, tokens, payment information etc.
• Real error reporting. Without context, an "Invalid JSON" response is of no use. Search for the tools that will provide you with a line number and a description of the problem.
• Handles large payloads. Others choke or freeze when they get bigger than a couple of megabytes. Run this test if you frequently use large exports, before using a tool.
• A tree view and code view. It's much easier to navigate a deeply nested object, as compared to a flat text, if it is possible to collapse and expand objects inside each other.
• Conversion support. A secondary requirement that is often needed is to convert JSON to CSV, JSON to XML or JSON to YAML; having this in the same tool requires just one step.
• Minify option. When you need to go in the other direction (encode JSON for a config file or URL parameter).
• No login required. Typically formatting JSON will be a short term job. Adding simple formatting behind an account is a bad solution to a problem.

Frequently Asked Questions