Mastering JSON Formatter & Validator: The Complete Guide

JSON is everywhere. REST APIs, config files, database exports, webhooks — if you write code, you're reading and writing JSON every single day. But raw JSON straight from an API response or a log file is often a single compressed line of text that's nearly impossible to read at a glance.

That's where a JSON formatter saves you. In this guide, we'll walk through every feature of the Dev Cosmos JSON Formatter, explain the underlying validation rules you need to know, and share practical debugging patterns that seasoned developers use.

{}

Open in Dev Cosmos

JSON Formatter & Validator →

↗

What Exactly Is JSON?

JSON — JavaScript Object Notation — is a lightweight, text-based data interchange format. It was derived from JavaScript but is language-independent. Today virtually every programming language has a native JSON parser.

The JSON specification (ECMA-404 / RFC 8259) defines exactly six value types:

Type	Example	Notes
string	"hello"	Always double-quoted, never single
number	42 / 3.14	No octal/hex literals allowed
boolean	true / false	Lowercase only
null	null	Lowercase only
array	[1, 2, 3]	Ordered, zero-indexed
object	{"key": "value"}	Unordered key-value pairs

Using the JSON Formatter

Open the tool and you'll see two panels: an input on the left and formatted output on the right. Here's the fastest workflow:

1. Paste raw JSON into the input panel (or click Paste to pull from clipboard)
2. Press Ctrl+Enter (or ⌘+Enter on Mac) to format immediately
3. Switch between Pretty, Tree View, and Raw tabs in the output panel
4. Click Copy to copy the formatted result

The Three Output Modes

Pretty mode adds indentation and line breaks for human readability. The formatter uses 2-space indentation (following most style guides) and applies full syntax highlighting — keys in blue, strings in green, numbers in red-pink, booleans in pink, and null in grey.

Tree View mode renders your JSON as a collapsible hierarchy. Every object and array starts collapsed with a count badge. Click the triangle icon to expand or collapse any node. This is invaluable for deeply-nested API responses where you need to locate a single field without reading thousands of lines.

Raw mode gives you a plain-text textarea — useful when you want to copy the output into another tool that doesn't handle highlighted HTML.

Minifying JSON

The Minify button strips all whitespace, producing the most compact valid JSON possible. This is what you want when embedding JSON in an HTTP request body, a configuration variable, or anywhere where every byte counts.

Copy// Pretty (178 bytes)
{
  "user": {
    "id": 1,
    "name": "Alice",
    "active": true
  }
}

// Minified (44 bytes)
{"user":{"id":1,"name":"Alice","active":true}}

JSON Validation — What Can Go Wrong

The formatter runs a full parse on every format attempt. If the JSON is invalid, you'll see a red error banner with the exact error message from the JavaScript engine, including the position of the problem character.

Here are the most common JSON errors and how to spot them:

1. Trailing Commas

This is the #1 source of JSON errors, especially for developers coming from JavaScript where trailing commas are allowed.

Copy// ✕ Invalid JSON — trailing comma
{
  "name": "Alice",
  "role": "admin",   ← remove this comma
}

// ✓ Valid JSON
{
  "name": "Alice",
  "role": "admin"
}

2. Single-Quoted Strings

JSON strings must always use double quotes. Single quotes are a JavaScript thing, not a JSON thing.

Copy// ✕ Invalid — single quotes
{ 'name': 'Alice' }

// ✓ Valid — double quotes
{ "name": "Alice" }

3. undefined / NaN / Infinity

These JavaScript values do not exist in JSON. If a serialiser produces them, the output is technically invalid.

Copy// ✕ Not valid JSON
{ "value": undefined }
{ "score": NaN }
{ "limit": Infinity }

// ✓ Use null or omit the key
{ "value": null }

4. Comments

JSON has no comment syntax. Comments like // note or /* note */ will break parsing. If you need a commented config format, consider JSONC (used by VS Code's settings.json) or YAML instead.

Tree View: Power User Tips

The Tree View is the feature most users discover last but end up using most. Here's how to get the most out of it:

• Click any node label (e.g. ▾ Object{12}) to collapse or expand that subtree. This lets you fold away large sections while navigating to the part you care about.
• Array counts show you immediately how many items are in a list — useful when an API is supposed to return 10 records and you want to verify at a glance.
• Nested objects each get their own collapsible tree, so you can expand a user object without expanding its sibling orders array.
• Leaf values are colour-coded the same way as Pretty mode — no ambiguity about whether true is a string or a boolean.

Real-World Debugging Patterns

Debugging API Responses

When an API returns unexpected data, paste the raw response body directly into the formatter. The tree view lets you expand only the relevant parts of a large response payload. Look for:

• null values where you expected a string — often a missing DB field
• Unexpected nesting depth — e.g. data.data.items instead of data.items
• Number-type IDs that your code might be treating as strings
• ISO 8601 timestamps stored as strings vs. Unix epoch stored as numbers

Config File Validation

Copy your package.json, tsconfig.json, eslintrc.json, or any other config file into the formatter before committing. It takes two seconds and prevents broken builds from invalid JSON syntax.

Comparing Payloads

To compare two JSON responses (e.g. v1 vs v2 of an API), format both through the formatter, then paste them into a diff tool side-by-side. The consistent indentation formatting ensures a meaningful diff with no false positives from whitespace changes.

JSON Best Practices

• Use camelCase for keys — it's the most common convention in REST APIs and aligns with JavaScript object property naming.
• Avoid deeply nested structures when a flatter structure would do. Deeply nested JSON is hard to validate and deserialise.
• Always use ISO 8601 for dates — "2025-06-15T10:30:00Z". Never store dates as locale-specific strings.
• Be explicit about null vs absent key — {"age": null} means "the age is known to be null," while omitting age entirely means "we don't have that data." Choose consistently.
• Don't use numbers as keys — while technically valid ({"1": "a"}), it's confusing and some parsers treat object key order differently.

Keyboard Shortcuts Reference

Shortcut	Action
Ctrl+Enter / ⌘+Enter	Format the current input
Paste into input panel	Auto-validates (green/red badge appears)
Click tree node label	Collapse / expand that subtree

Try It Now

The best way to learn the formatter is to use it with your own data. Open the tool, paste in any JSON from your current project, and press Ctrl+Enter.

{}

Open in Dev Cosmos

JSON Formatter & Validator →

↗