JSON Formatter & Validator

JSON Formatter & Validator Online — Free, Fast, No Install

This free JSON formatter & validator lets you paste any JSON string and instantly get it formatted, validated, and syntax-highlighted — no installation, no sign-up, everything runs in your browser. Whether you're debugging a minified API response or cleaning up a config file, readable output appears the moment you type.

Beyond basic pretty printing, the tool includes a CSV export tab, a collapsible tree view, a visual graph layout, a searchable flat list, and a minifier — making it a complete JSON pretty printer and validator in one place.

How to Use the JSON Formatter

1. Paste your JSON into the left input panel — minified, poorly indented, or already formatted — and the formatter validates it instantly, showing any syntax errors inline with the exact line and column number before a single character of output is produced.
2. Read the output in the right panel — the formatted result appears immediately with syntax highlighting, color-coded by type: strings in blue, numbers in orange, booleans in yellow, nulls in grey, so structural problems are visible at a glance.
3. Switch tabs to export as CSV, explore the JSON as a collapsible tree, a visual node graph, or a flat path list — each view updates automatically as you edit the input, so you never need to click a "refresh" button.
4. Adjust indentation — choose 2-space or 4-space indent from the selector; the output re-renders instantly and your preference is saved in localStorage for your next visit.
5. Copy or save the result — click Copy to send the formatted, minified, or CSV output to your clipboard, or name and save the snippet to local storage for later reuse (up to 20 saved snippets that persist between sessions).

If the input is invalid JSON, an error banner shows the exact line and character position of the problem, and a Fix button attempts automatic repair using the jsonrepair library — useful for the most common issues like trailing commas, single quotes, and stripped JSONC comments.

JSON Formatter Examples

Example 1 — Minified API response:

Input: {"name":"Alice","age":30,"roles":["admin","user"]}

Output:

{
  "name": "Alice",
  "age": 30,
  "roles": [
    "admin",
    "user"
  ]
}

Example 2 — Deeply nested object:

Input: {"user":{"profile":{"name":"Bob","address":{"city":"London"}}}}

Output:

{
  "user": {
    "profile": {
      "name": "Bob",
      "address": {
        "city": "London"
      }
    }
  }
}

The tree view for this input shows four nested levels, each collapsible independently — useful when exploring a deep API schema where you only care about one branch.

Example 3 — Nested object with array:

Input: {"user":{"id":1,"tags":["dev","js"]},"active":true}

Output:

{
  "user": {
    "id": 1,
    "tags": [
      "dev",
      "js"
    ]
  },
  "active": true
}

Example 4 — Invalid JSON (trailing comma) — edge case:

Input: {"name": "Alice",}

Output: Error — Unexpected token '}' at line 1 column 18 — The trailing comma after "Alice" is the culprit. Remove it or click Fix to let the tool repair it automatically. Trailing commas are valid in JavaScript object literals and TypeScript (with allowTrailingCommas) but are explicitly forbidden by the JSON specification.

Example 5 — Already-formatted JSON (idempotent):

If you paste JSON that is already properly formatted, the output panel shows the same content unchanged. Formatting is a no-op on valid, already-indented JSON — the structure and data are preserved exactly.

Example 6 — Empty object — edge case:

Input: {}

Output:

{}

An empty object is valid JSON. The formatter outputs it as-is with a green "Valid JSON" indicator. The tree view shows a single root node with zero children.

Common Mistakes with JSON Formatting

Understanding why JSON is stricter than JavaScript object literals saves hours of debugging. These six issues account for the vast majority of real-world JSON parse errors.

1. Trailing commas A comma after the last item in an array or object is valid in JavaScript (and TypeScript, with allowTrailingCommas) but is explicitly forbidden in JSON (RFC 8259). {"name": "Alice",} will fail in any JSON parser. Remove the last comma before ] or }, or click the Fix button to have the tool do it automatically.

2. Single quotes instead of double quotes JSON requires double quotes for both keys and string values. Single quotes are valid in JavaScript object literals but not in JSON. {'name': 'Alice'} is invalid JSON; {"name": "Alice"} is correct.

3. Unquoted property names In JavaScript you can write {name: "Alice"}, but JSON requires all keys to be quoted strings: {"name": "Alice"}. This is one of the most common copy-paste errors when moving from JS code to a JSON config file.

4. Comments in JSON JSON does not support comments — not //, not /* */, not any variant. If you need comments in a JSON-like config file, use JSONC (JSON with Comments) as understood by VS Code, or a format like YAML or TOML. Paste a JSONC file into this formatter and it will flag the // as a syntax error; click Fix to strip comments automatically.

5. undefined values undefined is a JavaScript concept, not a JSON type. JSON supports only null, booleans, numbers, strings, arrays, and objects. {"value": undefined} is invalid JSON — replace undefined with null if you need to represent an absent value.

6. Numbers with leading zeros {"code": 0123} is invalid JSON — leading zeros on numbers are not permitted. Use 123 instead. This trips up developers who copy numeric codes from non-JSON formats or older JavaScript engines that treated leading zeros as octal notation.

Export JSON to CSV

The CSV tab converts your JSON directly to comma-separated values. Paste a JSON array of objects (e.g. an API list response or a database export) and the tool builds a CSV with headers automatically derived from the object keys. You can copy the result or download it as a .csv file.

• If the root is a JSON array of objects → full CSV with headers
• If the root is a single object → treated as a one-row table
• Nested objects or primitives that can't map cleanly to columns show a clear error

This makes the tool useful not only as a JSON formatter online but also as a quick JSON-to-CSV converter without installing anything.

JSON Formatting — Why It Matters

JSON sent over the wire is often minified: no spaces, no line breaks, everything on a single line. That's efficient for network transfer but unreadable for humans. Formatting it — adding consistent indentation and line breaks — makes the structure immediately visible: which keys are nested inside which objects, how many items are in each array, and where the data hierarchy begins and ends.

The tree and graph views take this further. The tree view lets you collapse and expand sections to focus on one part of a large JSON document. The graph view lays out nodes as cards, showing parent-child relationships at a glance — useful when trying to understand deeply nested or unfamiliar data structures received from a webhook, a database export, or a third-party API schema.

Common Use Cases

• Debugging API responses: Copy a raw JSON response body from your browser's Network tab or Postman and paste it here to read it as a structured, syntax-highlighted document instead of a single dense string.
• Validating JSON config files: Before committing package.json, tsconfig.json, or any other JSON config to version control, paste it here to verify it's syntactically valid and catch trailing commas or missing quotes.
• Exporting JSON to CSV: Use the CSV tab to convert a JSON array of objects into a spreadsheet-ready CSV file — perfect for sharing data with non-developers or importing into Excel or Google Sheets.
• Minifying JSON for production: Use the Minify tab to strip all whitespace from a JSON payload before embedding it in code, a shell script, or an HTTP request body to reduce its size.
• Exploring unfamiliar data structures: The tree view and graph view are ideal when you receive a large, deeply nested JSON document — from a database export, an API schema, or a webhook payload — and need to quickly understand its shape.
• Fixing malformed JSON: The validator pinpoints the exact line and character where parsing failed, making it faster to identify issues like trailing commas, unquoted keys, or unclosed brackets.

Frequently Asked Questions

Is this a JSON validator too?

Yes. The tool validates your JSON as you type. If the input is invalid, an error banner appears immediately with the exact line and character position of the problem. Common issues detected include trailing commas, missing quotes around keys, unclosed brackets, and illegal control characters — with a one-click Fix button for automatic repair of many common errors.

How do I convert JSON to CSV?

Switch to the CSV tab after pasting your JSON. The tool expects a JSON array of objects (e.g. [{"name":"Alice","age":30}, ...]). It derives column headers from the keys of the first object and writes one CSV row per element. Click Download .csv to save the file, or Copy to paste it directly into a spreadsheet.

Why does my JSON show a syntax error with trailing commas?

Trailing commas — a comma after the last item in an array or object — are valid in JavaScript but are explicitly forbidden by the JSON specification (RFC 8259). This is one of the most common JSON parse errors, especially when developers copy object literals from JavaScript code and paste them as JSON. The formatter flags them with a parse error showing the exact position. Click the Fix button to remove them automatically, or delete the offending comma manually. Most editors (VS Code, WebStorm) have a "trailing comma" lint rule you can enable to catch these before they reach a JSON parser.

Can I add comments to JSON?

No. Standard JSON does not allow comments of any kind — not // line comments, not /* */ block comments. This is a deliberate design decision in the JSON specification (RFC 8259): JSON is a data interchange format, not a config language, and comments would complicate parsing. If you need human-readable annotations in a config file, consider JSONC (supported by VS Code's settings.json and tsconfig.json), YAML, or TOML. Paste a JSONC file into this tool and comments will be flagged as syntax errors; click Fix to strip them and produce valid JSON.

Can I format JSON with comments (JSONC)?

Standard JSON does not allow comments of any kind. JSONC (JSON with Comments) is a superset used by VS Code configuration files (settings.json, tsconfig.json) that permits // and /* */ comments, but it is not valid JSON and will not parse in most JSON parsers or APIs. If you paste JSONC into this tool, comments will be flagged as syntax errors; click Fix to strip them and produce valid JSON output.

What is the difference between formatting and minifying JSON?

Formatting adds whitespace — indentation and line breaks — to make JSON readable for humans. Minifying removes all non-essential whitespace to produce the smallest possible string for network transfer. A 10 KB formatted JSON file can compress to 6–7 KB minified. Neither operation changes the data itself.

Can this tool format very large JSON files?

Yes, with caveats. Since processing happens in your browser's JavaScript engine, very large files (above a few hundred KB) may take a second or two to render and could slow the syntax highlighting. For files in the megabyte range, consider a local tool or editor extension instead.

Why must JSON keys be in double quotes?

The JSON specification (RFC 8259) explicitly requires object keys to be strings enclosed in double quotes. Single quotes and unquoted keys are valid in JavaScript object literals but not in JSON. This is a strict requirement for any JSON parser to accept the input.

What does the "Raw List" view show?

The Raw List view extracts every leaf value from the JSON and presents it as a flat table with three columns: the full dot-notation path (e.g. user.address.city), the data type, and the value. It's useful for auditing all values in a document without navigating the nested structure. You can filter paths using the built-in search (Ctrl+F).

Resources

• MDN — Introduction to JSON — Comprehensive introduction to JSON syntax, structure, and usage in JavaScript.
• MDN — JSON — Complete reference for the JSON object in JavaScript, including parse, stringify, and common patterns.
• RFC 8259 — The JavaScript Object Notation (JSON) Data Interchange Format — The current IETF standard that formally specifies the JSON format.