JSON Pretty Print Online

1. 1.Open any .json file in VS Code
2. 2.Press Alt+Shift+F (Windows/Linux) or Shift+Option+F (Mac)
3. 3.Or right-click → "Format Document" → select JSON formatter
4. 4.VS Code's built-in JSON language server handles the formatting with your configured tab size

Tip: Set "editor.formatOnSave": true in settings.json to auto-beautify every time you save a .json file.

1. 1.Open DevTools (F12) → Network tab
2. 2.Click any request that returns JSON
3. 3.Click the "Response" or "Preview" tab
4. 4.Chrome auto-renders JSON as a collapsible tree in Preview, or pretty-prints in Response

Tip: The Preview tab in Chrome DevTools is essentially a built-in JSON viewer. Use Response for the raw pretty-printed text.

1. 1.Install jq: brew install jq (macOS) or apt install jq (Linux)
2. 2.Pipe any curl output to jq: curl https://api.example.com/data | jq .
3. 3.The . filter is a no-op that triggers jq's default pretty printing
4. 4.Add -r flag for raw string output: curl ... | jq -r '.[].name'

Tip: jq . is the fastest way to pretty print JSON from any command-line source. Add --color-output (-C) to preserve colors when piping further.

1. 1.Run: python3 -m json.tool compact.json
2. 2.Or pipe: echo '{"a":1}' | python3 -m json.tool
3. 3.Output goes to stdout — redirect to a file: python3 -m json.tool in.json > out.json
4. 4.Add --indent 4 for 4-space indentation: python3 -m json.tool --indent 4 in.json

Tip: Python's json.tool is available on every system with Python 3 — no package install needed. It's the go-to for quick CLI beautification when jq isn't installed.

1. 1.After sending a request, click the "Pretty" tab in the response section
2. 2.Postman auto-detects JSON and renders it in a collapsible, syntax-highlighted view
3. 3.Use "Raw" for the minified version or "Preview" for a rendered view
4. 4.Click the copy icon to copy the pretty-printed JSON to clipboard

Tip: Postman's Pretty view uses 2-space indentation by default. The online editor above lets you switch to 4-space or tab if your project style requires it.

1. 1.After sending a request, click the "Pretty" tab in the response panel
2. 2.Insomnia auto-detects JSON content and renders a syntax-highlighted, indented view
3. 3.Use "Raw" to see the minified original, or "Preview" for a browser-rendered HTML view
4. 4.Click the copy icon in the top-right to copy the prettified response to clipboard

Tip: Insomnia's Pretty view uses 2-space indentation. If you need a different indent style or want to download the output as a file, paste the response into the tool above and choose your indentation.

The fastest workflow for reading live API responses from the command line. Pipe directly from curl to jq — no browser, no copy-paste step.

# Prettify any API response instantly
curl -s https://api.example.com/users | jq .

# With Authorization header
curl -s -H "Authorization: Bearer $TOKEN" \
  https://api.example.com/users | jq .

# Extract the first element and prettify
curl -s https://api.example.com/users | jq '.[0]'

# Save prettified response to a file
curl -s https://api.example.com/users | jq . > response.json

Configure VS Code to auto-format JSON files every time you save. Works for .json, .jsonc, and JSON files in any project.

// Add to settings.json (Ctrl+Shift+P → Open User Settings JSON)
{
  "editor.formatOnSave": true,
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.tabSize": 2
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

// Manual shortcut: Alt+Shift+F (Windows/Linux)
//                  Shift+Option+F (Mac)

Auto-format all staged JSON files before every commit. Uses Python's built-in json.tool — zero extra dependencies.

#!/bin/bash
# .git/hooks/pre-commit
# Make executable: chmod +x .git/hooks/pre-commit

git diff --cached --name-only --diff-filter=ACM | \
  grep '\.json$' | while read f; do
    python3 -m json.tool "$f" > "$f.tmp" && mv "$f.tmp" "$f"
    git add "$f"
    echo "Formatted: $f"
  done

Prettify every JSON file in a directory tree — useful for cleaning fixtures, test payloads, or config files in bulk.

// format-json.mjs  (run: node format-json.mjs)
import { readdir, readFile, writeFile } from 'fs/promises';
import { join, extname } from 'path';

async function formatDir(dir) {
  const entries = await readdir(dir, { withFileTypes: true });
  for (const entry of entries) {
    const p = join(dir, entry.name);
    if (entry.isDirectory()) {
      await formatDir(p);
    } else if (extname(entry.name) === '.json') {
      const raw = await readFile(p, 'utf8');
      const pretty = JSON.stringify(JSON.parse(raw), null, 2);
      await writeFile(p, pretty + '\n');
      console.log('Formatted:', p);
    }
  }
}

await formatDir('./src');

Catch malformed JSON before it reaches code review. Checks all .json files in the repo, excluding node_modules.

# .github/workflows/json-lint.yml
name: Validate JSON
on: [push, pull_request]
jobs:
  json-lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Validate all JSON files
        run: |
          find . -name "*.json" \
            ! -path "*/node_modules/*" \
            ! -path "*/.git/*" | while read f; do
            python3 -m json.tool "$f" > /dev/null \
              || (echo "Invalid JSON: $f" && exit 1)
          done

const obj = { name: "Alice" };
obj.self = obj; // circular reference!

JSON.stringify(obj);
// TypeError: Converting circular structure to JSON

// Fix: use the flatted library
import { stringify } from 'flatted';
stringify(obj, null, 2); // handles circular refs safely

Fix: Remove the circular reference before serializing, or use the flatted library which handles circular structures. For debugging, use console.dir(obj, { depth: null }) — it handles circular refs natively.

const data = { id: 1, name: "Alice", temp: undefined };
JSON.stringify(data, null, 2);
// {
//   "id": 1,
//   "name": "Alice"
// }
// ← "temp" key is gone — no error thrown

Fix: If you need the key to appear in output, use null instead of undefined. JSON has no undefined type. Use null to represent "intentionally absent value" in JSON — it serializes and preserves the key.

const data = { score: NaN, limit: Infinity, min: -Infinity };
JSON.stringify(data, null, 2);
// {
//   "score": null,
//   "limit": null,
//   "min": null
// }
// ← silent data change — no error thrown

Fix: Validate numeric values before serializing. NaN and Infinity are not part of the JSON specification (RFC 8259). Use null for missing numeric values, or strings like "Infinity" if you need to represent them.

const data = { created: new Date('2024-01-15') };
JSON.stringify(data, null, 2);
// {
//   "created": "2024-01-15T00:00:00.000Z"
// }
// ← now a string, not a Date object

Fix: Expected behavior — JSON has no Date type. Parse back with: new Date(data.created). For maximum portability, store Unix timestamps (numbers) using .getTime() instead of Date objects.

const data = { userId: 9007199254740993n }; // BigInt

JSON.stringify(data);
// TypeError: Do not know how to serialize a BigInt

// Fix: convert with a replacer function
JSON.stringify(data, (key, val) =>
  typeof val === 'bigint' ? val.toString() : val, 2);
// { "userId": "9007199254740993" }

Fix: BigInt has no JSON equivalent. Convert to string with .toString() before serializing, or use a replacer function as shown. Note: the receiver must know to parse it back as BigInt, not a regular number.

// Common: API returns an already-stringified JSON string
const apiResponse = '{"name":"Alice","age":30}';

// Mistake: stringify the string (not the object)
JSON.stringify(apiResponse, null, 2);
// "{\"name\":\"Alice\",\"age\":30}" ← escaped string!

// Correct: parse first, then stringify
JSON.stringify(JSON.parse(apiResponse), null, 2);
// {
//   "name": "Alice",
//   "age": 30
// }

Fix: If your data is already a JSON string (typeof data === "string"), parse it first: JSON.parse(data). This tool handles it automatically — paste a double-stringified JSON and it still beautifies correctly.