How to Format JSON Online: Complete Guide to Formatting, Validating, and Debugging JSON

JSON is everywhere. REST APIs return it. Log files dump it. Config files store it. And half the time, it arrives as an unreadable wall of characters — minified, escaped, or just plain broken.

Formatting JSON by hand is a waste of time. This guide shows you how to format JSON online instantly, what good formatting looks like, how to validate structure, how to debug the most common JSON errors, and how to format JSON programmatically in JavaScript, Python, and the command line.

---

Why Format JSON?

Raw JSON from an API response often looks like this:

{"user":{"id":1,"name":"Alice","roles":["admin","editor"],"preferences":{"theme":"dark","notifications":true}}}

That’s valid JSON. It’s also completely unreadable. A formatted version looks like this:

{
  "user": {
    "id": 1,
    "name": "Alice",
    "roles": ["admin", "editor"],
    "preferences": {
      "theme": "dark",
      "notifications": true
    }
  }
}

Same data. Immediately readable. When you’re debugging an API integration at 11pm, this difference matters.

Why this matters beyond aesthetics:

• Faster debugging: Nested structures become immediately visible
• Cleaner diffs: Formatted JSON in version control produces readable diffs
• Error detection: Formatting reveals structural problems that minified JSON hides
• Team communication: Formatted JSON in Slack, GitHub issues, or bug reports is actually readable
• Documentation quality: API documentation with formatted examples is worth reading

---

How to Format JSON Online (Step by Step)

Step 1: Copy your JSON

Grab the JSON string from your API response, network tab in DevTools, log file, config file, or clipboard. It doesn’t have to be valid — the formatter will tell you exactly where the error is.

Step 2: Open the formatter

Use the JSON Formatter — it handles formatting, validation, and error detection in one step.

Step 3: Paste and format

Paste your JSON into the input field and click Format (or it formats automatically). The tool will:

• Indent nested objects and arrays consistently (2 or 4 spaces)
• Syntax-highlight with color coding (strings, numbers, booleans, nulls)
• Show line numbers for navigation
• Report errors with exact line and character position

Step 4: Copy the result

Copy the formatted output and paste it into your editor, share it in a bug report, or use it to document an API response.

That’s it. No signup, no install.

---

JSON Formatting Rules You Need to Know

Understanding the rules helps you write valid JSON and immediately recognize errors.

Strings Must Use Double Quotes

All keys and string values must use double quotes, not single quotes, not backticks.

// ✅ Valid
{ "name": "Alice" }

// ❌ Invalid — single quotes
{ 'name': 'Alice' }

// ❌ Invalid — unquoted key
{ name: "Alice" }

This trips up developers coming from JavaScript, where object literals accept unquoted keys and single-quoted strings.

No Trailing Commas

JSON doesn’t allow a comma after the last item in an object or array.

// ✅ Valid
{
  "name": "Alice",
  "age": 30
}

// ❌ Invalid — trailing comma
{
  "name": "Alice",
  "age": 30,
}

JavaScript (ES2017+) allows trailing commas in object and array literals. JSON does not. This is one of the most common JSON errors when developers hand-write JSON.

Valid Value Types

Type	Example	Notes
String	"hello"	Must use double quotes
Number	42, 3.14, -7, 1e10	No quotes
Boolean	true, false	Lowercase only
Null	null	Lowercase only
Object	{"key": "value"}	Curly braces
Array	[1, 2, 3]	Square brackets

Note: undefined, NaN, and Infinity are not valid JSON values, even though they exist in JavaScript. JSON.stringify converts undefined to nothing (skips the key) and NaN/Infinity to null.

Nested Structures

Objects and arrays can be nested to any depth:

{
  "order": {
    "id": "ord-001",
    "items": [
      { "sku": "A100", "qty": 2, "price": 9.99 },
      { "sku": "B200", "qty": 1, "price": 24.99 }
    ],
    "shipping": {
      "address": {
        "city": "Tokyo",
        "zip": "100-0001",
        "country": "JP"
      },
      "method": "express"
    }
  }
}

---

Common JSON Errors and How to Fix Them

Error: Trailing Comma

Message: SyntaxError: Unexpected token } in JSON

// ❌ Invalid
{
  "name": "Alice",
  "age": 30,
}

// ✅ Fixed
{
  "name": "Alice",
  "age": 30
}

Why it happens: Developers copy from JavaScript source code where trailing commas are allowed.

---

Error: Unquoted Keys

Message: SyntaxError: Expected property name or '}' in JSON

// ❌ Invalid — JavaScript object, not JSON
{ name: "Alice" }

// ✅ Fixed
{ "name": "Alice" }

---

Error: Single Quotes

Message: SyntaxError: Unexpected token ' in JSON

// ❌ Invalid
{ 'name': 'Alice' }

// ✅ Fixed
{ "name": "Alice" }

---

Error: Unescaped Special Characters

Message: SyntaxError: Bad escaped character in JSON

// ❌ Invalid — unescaped backslash
{ "path": "C:\Users\alice" }

// ✅ Fixed — escaped backslash
{ "path": "C:\\Users\\alice" }

Characters that require escaping in JSON strings:

Character	Escaped Form
\ (backslash)	\\
" (double quote)	\"
Newline	\n
Tab	\t
Carriage return	\r
Unicode	\uXXXX

---

Error: Comments in JSON

Message: SyntaxError: Unexpected token / in JSON

JSON does not support comments. This is a common source of confusion because many JSON-like config formats (JSONC, JSON5, tsconfig.json) do allow comments.

// ❌ Invalid — comments not allowed in strict JSON
{
  // This is a config file
  "host": "localhost",
  "port": 3000
}

// ✅ Fixed — remove comments
{
  "host": "localhost",
  "port": 3000
}

Workaround: Add a "_comment" key as a convention:

{
  "_comment": "Database configuration",
  "host": "localhost",
  "port": 5432
}

---

Error: Undefined Values

// This common JavaScript pattern produces invalid JSON
const obj = { name: "Alice", extra: undefined };
const json = JSON.stringify(obj);
// → '{"name":"Alice"}' — 'extra' is silently dropped!

// To explicitly represent missing values, use null
const obj2 = { name: "Alice", extra: null };
const json2 = JSON.stringify(obj2);
// → '{"name":"Alice","extra":null}'

---

Formatting JSON Programmatically

JavaScript / Node.js

// Parse and re-stringify with indentation
const raw = '{"name":"Alice","age":30,"roles":["admin"]}';
const formatted = JSON.stringify(JSON.parse(raw), null, 2);
console.log(formatted);
// {
//   "name": "Alice",
//   "age": 30,
//   "roles": ["admin"]
// }

// Use '\t' for tab indentation
const tabFormatted = JSON.stringify(JSON.parse(raw), null, '\t');

// Pretty-print only specific keys (replacer function)
const clean = JSON.stringify(data, ['name', 'age'], 2);

// Handle circular references safely
function safeStringify(obj, indent = 2) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (seen.has(value)) return '[Circular]';
      seen.add(value);
    }
    return value;
  }, indent);
}

Python

import json

raw = '{"name":"Alice","age":30,"roles":["admin"]}'

# Parse and format
data = json.loads(raw)
formatted = json.dumps(data, indent=2)
print(formatted)
# {
#   "name": "Alice",
#   "age": 30,
#   "roles": [
#     "admin"
#   ]
# }

# Sort keys alphabetically (good for reproducible output)
sorted_output = json.dumps(data, indent=2, sort_keys=True)

# Format non-ASCII characters (instead of \uXXXX escapes)
unicode_output = json.dumps(data, indent=2, ensure_ascii=False)

# Read from file and format
with open('data.json', 'r') as f:
    data = json.load(f)
    print(json.dumps(data, indent=2))

Command Line

# Python's built-in json.tool — available everywhere
echo '{"name":"Alice","age":30}' | python3 -m json.tool
# Or from file:
python3 -m json.tool data.json

# jq — more powerful, installable
echo '{"name":"Alice","age":30}' | jq '.'

# Node.js one-liner
echo '{"name":"Alice"}' | node -e "
  let d=''; process.stdin.on('data',c=>d+=c);
  process.stdin.on('end',()=>console.log(JSON.stringify(JSON.parse(d),null,2)));
"

# Format all JSON files in a directory with jq
find . -name '*.json' -exec sh -c 'jq . "$1" > /tmp/fmt && mv /tmp/fmt "$1"' _ {} \;

---

JSON Formatting by Use Case

API Development and Testing

In HTTP responses, send minified JSON in production (saves bandwidth). In error responses and logs, use formatted JSON so developers can read them without tools.

// Express.js — formatted in development, minified in production
app.use((req, res, next) => {
  if (process.env.NODE_ENV === 'development') {
    app.set('json spaces', 2);
  }
  next();
});

Version-Controlled Config Files

Keep config files formatted. Minified config in git produces unreadable single-line diffs that make code review useless.

# Add a pre-commit hook to auto-format JSON
echo "find . -name '*.json' -not -path './node_modules/*' -exec python3 -m json.tool {} \;" > .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit

Debugging API Integrations

The fastest JSON debugging workflow:

1. Open browser DevTools → Network tab
2. Click the failing request
3. Copy the response body
4. Paste into the JSON Formatter
5. Read the structure to understand what the API actually returned

This eliminates the “wall of text” problem that makes API debugging frustrating.

Log Analysis

When logs contain JSON fields (structured logging), format individual log entries to inspect them:

# Extract and format JSON from log lines
grep "error" app.log | head -1 | python3 -m json.tool

# With jq — filter specific fields
cat app.log | jq 'select(.level == "error") | {msg: .message, time: .timestamp}'

---

Beyond Formatting: JSON Schema Validation

Formatting tells you if JSON is syntactically valid. JSON Schema tells you if it’s semantically correct — whether required fields are present, types match what’s expected, and values are within valid ranges.

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "type": "object",
  "required": ["name", "email"],
  "properties": {
    "name": { "type": "string", "minLength": 1 },
    "email": { "type": "string", "format": "email" },
    "age": { "type": "integer", "minimum": 0, "maximum": 150 }
  }
}

This schema would reject { "name": "Alice" } (missing required email field) and { "name": "", "email": "[email protected]" } (name too short), even though both are syntactically valid JSON.

Use the JSON Schema Generator to automatically generate a schema from a sample JSON object, then use it to validate API inputs.

---

JSON vs JSON5 vs JSONC

You’ll encounter JSON-like formats that extend standard JSON:

Format	Comments	Trailing Commas	Single Quotes	Use Case
JSON	❌	❌	❌	APIs, standard data exchange
JSON5	✅	✅	✅	Config files (prettier, rollup)
JSONC	✅	✅	❌	VS Code settings, tsconfig.json

tsconfig.json and .vscode/settings.json are technically JSONC (JSON with Comments), not strict JSON. That’s why TypeScript and VS Code tolerate comments in those files but JSON.parse() would reject them.

---

Useful Related Tools

• JSON Formatter — format, validate, and syntax-highlight JSON
• JSON Diff — compare two JSON objects side by side with highlighted changes
• JSON Schema Generator — generate a schema from a sample JSON object
• JSON to CSV Converter — convert JSON arrays to CSV for spreadsheet import

---

Summary

JSON formatting is one of those developer micro-skills that saves hours over a career. The fundamentals:

• Syntax rules that bite you most: trailing commas, single quotes, unquoted keys, unescaped backslashes
• Programmatic formatting: JSON.stringify(JSON.parse(raw), null, 2) in JavaScript, json.dumps(data, indent=2) in Python
• Command line: python3 -m json.tool is always available; jq is more powerful
• Beyond formatting: JSON Schema validates structure, not just syntax

When in doubt, paste into the JSON Formatter and let it tell you exactly what’s wrong and where.