JSON Formatting

JSON data can be written in two styles — pretty-printed (well-spaced and indented for human reading) or minified (compact with no extra spaces for fast transmission). The data content is identical in both styles — only the presentation differs.

Understanding both formats is important because developers regularly switch between them: pretty-printed JSON during development and debugging, and minified JSON in production to save bandwidth and improve speed.

Pretty-Printed JSON

Pretty-printed JSON uses indentation, spaces, and new lines to make the structure easy to read. This format is used when writing JSON by hand, debugging, or displaying JSON in documentation.

{
  "invoice": {
    "invoiceId": "INV-4021",
    "date": "2025-03-01",
    "customer": {
      "name": "Bhavna Joshi",
      "email": "bhavna@example.com"
    },
    "items": [
      {
        "product": "Notebook",
        "quantity": 5,
        "price": 40
      },
      {
        "product": "Pen Set",
        "quantity": 2,
        "price": 120
      }
    ],
    "total": 440
  }
}

Each level of nesting is indented by 2 spaces (or 4 spaces — both are widely used). The structure is immediately clear to anyone reading it.

Minified JSON

Minified JSON removes all extra whitespace — spaces, tabs, and line breaks — resulting in one continuous line of text. The data is exactly the same; it just takes up far less space.

{"invoice":{"invoiceId":"INV-4021","date":"2025-03-01","customer":{"name":"Bhavna Joshi","email":"bhavna@example.com"},"items":[{"product":"Notebook","quantity":5,"price":40},{"product":"Pen Set","quantity":2,"price":120}],"total":440}}

This single-line format is used when transmitting data over a network because smaller size means faster loading times. APIs typically return minified JSON.

Comparing File Sizes

Creating Pretty-Printed JSON with JSON.stringify()

The third parameter of JSON.stringify() controls indentation. Passing a number sets the number of spaces per level:

const data = {
  name: "Chetan Bhatt",
  age: 29,
  skills: ["HTML", "CSS", "JavaScript"]
};

// 2-space indentation
const prettyJSON = JSON.stringify(data, null, 2);
console.log(prettyJSON);

Output:

{
  "name": "Chetan Bhatt",
  "age": 29,
  "skills": [
    "HTML",
    "CSS",
    "JavaScript"
  ]
}

Using 4-Space Indentation

const prettyJSON4 = JSON.stringify(data, null, 4);
console.log(prettyJSON4);

Output:

{
    "name": "Chetan Bhatt",
    "age": 29,
    "skills": [
        "HTML",
        "CSS",
        "JavaScript"
    ]
}

Using a Tab Character for Indentation

const prettyJSONTab = JSON.stringify(data, null, "\t");
console.log(prettyJSONTab);

Passing "\t" as the third argument uses a tab character instead of spaces — useful when team standards require tab indentation.

Creating Minified JSON with JSON.stringify()

Calling JSON.stringify() without a third parameter (or passing null) produces minified output:

const minifiedJSON = JSON.stringify(data);
console.log(minifiedJSON);

// Output: {"name":"Chetan Bhatt","age":29,"skills":["HTML","CSS","JavaScript"]}

Minifying Existing Pretty-Printed JSON

To minify an already pretty-printed JSON string, parse it first and then stringify it without the space argument:

const prettyStr = `{
  "city": "Lucknow",
  "population": 3200000,
  "isCapital": true
}`;

const minified = JSON.stringify(JSON.parse(prettyStr));
console.log(minified);

// Output: {"city":"Lucknow","population":3200000,"isCapital":true}

Pretty-Printing JSON in HTML

To display formatted JSON on a web page, wrap the output in a <pre> tag. This preserves all whitespace and line breaks:

<pre id="output"></pre>

<script>
const data = {
  "country": "India",
  "capital": "New Delhi",
  "population": 1400000000
};

document.getElementById("output").textContent = JSON.stringify(data, null, 2);
</script>

This renders the JSON in a readable, formatted block on the browser page — very useful for debugging or building JSON viewers.

Online JSON Formatting Tools

Several free online tools can format, minify, and validate JSON instantly without writing any code:

JSON Formatting in Code Editors

Most modern code editors can auto-format JSON files with a keyboard shortcut:

• VS Code — open a .json file, press Shift + Alt + F (Windows) or Shift + Option + F (Mac) to auto-format
• Sublime Text — install the "Pretty JSON" plugin and use Ctrl + Alt + J
• Notepad++ — install the "JSON Viewer" plugin for formatting

Key Points to Remember

• Pretty-printed JSON uses indentation and line breaks for readability
• Minified JSON removes all whitespace to reduce file size
• Both formats represent identical data — only the visual presentation differs
• JSON.stringify(data, null, 2) creates pretty-printed output with 2-space indentation
• JSON.stringify(data) with no third argument creates minified output
• Use <pre> tags when displaying formatted JSON on a web page
• Online tools like jsonformatter.org can format and minify JSON instantly

Summary

JSON formatting is a practical everyday skill. During development, pretty-printed JSON makes it easy to read and debug data structures. In production, minified JSON reduces the amount of data sent over the network, resulting in faster performance. Knowing how to switch between the two formats using JSON.stringify() is a small but frequently needed technique in real-world development.