DEV Community

楊東霖
楊東霖

Posted on • Originally published at devplaybook.cc

How to Format JSON Online: The Complete Developer Guide

#json #webdev #programming #devtools

Every developer has stared at a wall of minified JSON from an API response and wondered how to make sense of it. JSON formatting is one of those tasks that sounds trivial but comes up dozens of times a day — during API debugging, reading config files, reviewing log output, or validating payloads.

This guide covers everything you need to know about formatting JSON online: what it means, why it matters, how to do it instantly without any setup, and how to handle the errors that inevitably come up.

What Is JSON Formatting?

JSON (JavaScript Object Notation) is a text-based data format. It has a strict structure: objects use {}, arrays use [], keys are quoted strings, and values can be strings, numbers, booleans, null, objects, or arrays.

Formatting means adding whitespace — indentation and line breaks — to make that structure visually clear. The same data can be valid JSON whether it's all on one line or spread across fifty.

Minified (compact, no whitespace):

{"user":{"id":1,"name":"Alice","roles":["admin","editor"],"active":true}}
Enter fullscreen mode Exit fullscreen mode

Formatted (indented, readable):

{
  "user": {
    "id": 1,
    "name": "Alice",
    "roles": [
      "admin",
      "editor"
    ],
    "active": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Same bytes of information. Completely different readability.

Why Format JSON Online?

Most developers reach for an online JSON formatter rather than a local tool or editor plugin for a few reasons:

  • Speed: No install, no setup — paste and go
  • Availability: Works from any machine, browser, or OS
  • Shareability: Copy the formatted output and paste it anywhere
  • Error detection: Good formatters validate your JSON and show you exactly where it breaks

When you're debugging an API response in a terminal, copying it into a browser-based formatter is typically the fastest path to readable output.

How to Format JSON Online: Step by Step

Step 1: Get your JSON string

This could be:

  • A raw API response from your terminal (curl, Postman, Insomnia)
  • A minified config file you need to read
  • A log entry that contains JSON
  • JSON you wrote by hand that isn't rendering correctly

Step 2: Open an online JSON formatter

Use the JSON Formatter on DevPlaybook. It handles formatting, validation, and syntax highlighting in one place — no account required.

Step 3: Paste your JSON

Paste the raw JSON into the input box. Most formatters will automatically process it as you type or when you click Format.

Step 4: Read the result

The formatted output will:

  • Indent nested objects and arrays with consistent 2-space or 4-space indentation
  • Apply syntax highlighting (keys in one color, values in another)
  • Show line numbers
  • Report validation errors with the exact line and position

Step 5: Copy or use the output

Copy the formatted JSON back into your editor, log, or documentation. If validation passed, you know the JSON is syntactically correct.

JSON Formatting Rules Every Developer Should Know

Understanding the rules helps you write valid JSON from scratch and spot errors before they reach a formatter.

The Six Value Types

JSON supports exactly six data types:

Type Example Notes
String "hello world" Must be double-quoted
Number 42, 3.14, -7, 1e10 No quotes, no hex
Boolean true, false Lowercase only
Null null Lowercase only
Object {"key": "value"} Keys must be strings
Array [1, 2, 3] Ordered, mixed types allowed

Object Rules 

{
  "name": "Alice",
  "age": 30,
  "active": true
}
Enter fullscreen mode Exit fullscreen mode
  • Keys must be double-quoted strings (single quotes are invalid)
  • Key-value pairs are separated by commas
  • No trailing comma after the last pair
  • Keys within one object should be unique (duplicates are technically allowed but behavior is undefined)

Array Rules 

["red", "green", "blue"]
Enter fullscreen mode Exit fullscreen mode
  • Values are separated by commas
  • No trailing comma after the last item
  • Mixed types are allowed: [1, "two", true, null]
  • Nested arrays work: [[1, 2], [3, 4]]

String Escaping

Inside JSON strings, some characters must be escaped with a backslash:

Character Escape Sequence
Double quote \"
Backslash \\
Newline \n
Tab \t
Carriage return \r
Unicode \uXXXX

Common JSON Errors and How to Fix Them

Most JSON errors fall into a handful of categories. Here's a reference guide.

1. Trailing Comma

The most common mistake. JavaScript allows trailing commas; JSON does not.

Invalid:

{
  "name": "Alice",
  "age": 30,
}
Enter fullscreen mode Exit fullscreen mode

Fix: Remove the comma after the last property.

{
  "name": "Alice",
  "age": 30
}
Enter fullscreen mode Exit fullscreen mode

2. Single-Quoted Strings

JSON requires double quotes. Single quotes are not valid.

Invalid:

{
  'name': 'Alice'
}
Enter fullscreen mode Exit fullscreen mode

Fix: Replace single quotes with double quotes.

{
  "name": "Alice"
}
Enter fullscreen mode Exit fullscreen mode

3. Unescaped Special Characters

Special characters inside strings must be escaped.

Invalid:

{
  "message": "He said "hello" to me"
}
Enter fullscreen mode Exit fullscreen mode

Fix: Escape the inner quotes.

{
  "message": "He said \"hello\" to me"
}
Enter fullscreen mode Exit fullscreen mode

4. Numbers with Leading Zeros

JSON doesn't allow numbers like 007 or 01.

Invalid:

{ "code": 007 }
Enter fullscreen mode Exit fullscreen mode

Fix: Remove the leading zero, or use a string if leading zeros are meaningful.

{ "code": 7 }
Enter fullscreen mode Exit fullscreen mode

or

{ "code": "007" }
Enter fullscreen mode Exit fullscreen mode

5. Comments

JSON has no comment syntax. Comments in config files (like // this is a setting) break JSON parsers.

Invalid:

{
  // User settings
  "theme": "dark"
}
Enter fullscreen mode Exit fullscreen mode

Fix: Remove comments. If you need annotated JSON configs, consider JSONC or JSON5 (neither is standard JSON, but some tools support them).

6. Unquoted Keys

Unlike JavaScript object literals, JSON keys must always be quoted.

Invalid:

{
  name: "Alice"
}
Enter fullscreen mode Exit fullscreen mode

Fix: Quote the key.

{
  "name": "Alice"
}
Enter fullscreen mode Exit fullscreen mode

JSON Validation vs. JSON Formatting

These are related but different operations:

  • Formatting adds whitespace and indentation. It can succeed even on invalid JSON in some tools (they just reformat as-is).
  • Validation checks that the JSON conforms to the spec. It will fail if there's a syntax error.

A good online formatter does both. The JSON Formatter on DevPlaybook validates as it formats — if your JSON has an error, it shows you the exact location rather than silently producing broken output.

JSON Formatting in Your Editor

If you're writing JSON frequently, it's worth knowing the keyboard shortcuts in your editor:

VS Code:

  • Format document: Shift+Alt+F (Windows/Linux) or Shift+Option+F (Mac)
  • Format selection: Ctrl+K Ctrl+F

Vim/Neovim (with Python):

:%!python3 -m json.tool
Enter fullscreen mode Exit fullscreen mode

Command line (Python):

echo '{"name":"Alice","age":30}' | python3 -m json.tool
Enter fullscreen mode Exit fullscreen mode

Command line (jq):

cat response.json | jq '.'
Enter fullscreen mode Exit fullscreen mode

For one-off formatting tasks, an online tool is faster. For repeated formatting in a codebase, configure your editor's formatter and autoformat on save.

JSON vs. Related Formats

Developers sometimes work with formats that look like JSON but aren't standard:

JSONC (JSON with Comments)
Used in VS Code config files (settings.json, tsconfig.json). Allows // and /* */ comments. Not compatible with standard JSON parsers.

JSON5
A superset of JSON that allows trailing commas, single quotes, comments, and unquoted keys. Used in some config files but not widely supported.

YAML
A completely different format that expresses the same data structures. More readable for humans, more prone to whitespace errors. Common in CI/CD configs.

TOML
Another config format. Used in Rust's Cargo.toml, Python's pyproject.toml. Designed for human-readable configuration.

When you're debugging, it's worth knowing which format a file is supposed to be before trying to validate it as JSON.

Advanced JSON Operations

Once your JSON is formatted, you might want to do more with it:

JSON to TypeScript: Generate TypeScript interfaces from a JSON payload — useful when building typed API clients. Try the JSON to TypeScript tool.

JSON to YAML: Convert between formats when switching config systems. Try JSON to YAML.

JSON Diff: Compare two JSON objects and see what changed. The JSON Diff tool shows added, removed, and changed fields visually.

JSON Schema: Validate that a JSON object matches a specific structure. Use the JSON Schema Generator to generate schemas from existing JSON.

When to Use a JSON Formatter Online vs. Locally

Use an online formatter when:

  • You're debugging a quick API response
  • You're on a machine where you can't install tools
  • You need to share formatted JSON with a team member
  • You want combined formatting + validation in one step

Use a local tool when:

  • You're processing large JSON files (browser tools can choke on MB+ payloads)
  • You're automating JSON formatting in a CI/CD pipeline
  • You're doing complex transformations (use jq for this)
  • You're formatting JSON as part of a build process

For most everyday debugging, a browser-based formatter is faster and good enough.

Practical Examples

Debugging an API Response

You ran a curl command and got back a minified response:

curl -s https://api.example.com/users/1
# {"id":1,"name":"Alice","email":"alice@example.com","created_at":"2025-01-15T10:30:00Z","permissions":{"read":true,"write":false,"admin":false}}
Enter fullscreen mode Exit fullscreen mode

Paste that into the JSON Formatter and you instantly see:

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "created_at": "2025-01-15T10:30:00Z",
  "permissions": {
    "read": true,
    "write": false,
    "admin": false
  }
}
Enter fullscreen mode Exit fullscreen mode

Much easier to confirm the structure, check field names, and spot unexpected values.

Validating a Config File

You edited a JSON config manually and things aren't working. Paste it into the formatter — if there's a syntax error (missing comma, extra brace), the validator shows you exactly which line.

Preparing JSON for Documentation

You want to include a JSON example in your API docs. Paste in the raw payload, format it, then copy the clean output into your docs.

Summary

JSON formatting is a small but frequent developer task. Online formatters solve it fast — paste your JSON, get a readable, validated result, copy it back.

Key things to remember:

  • JSON requires double quotes, no trailing commas, and no comments
  • Good formatters validate while they format, showing you errors with exact positions
  • For large files or automation, use jq or Python's json.tool from the command line
  • Browser-based formatters are best for quick debugging and one-off tasks

The JSON Formatter is available anytime, no account needed. Keep it bookmarked — you'll use it more than you think.

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

Top comments (0)