How do you use this tool?
- Paste your JSON string into the input panel on the left.
- The formatter validates and prettifies the output automatically as you type.
- Use the indent selector (2 or 4 spaces, or tabs) to match your project style.
- Click any node's collapse arrow to fold nested objects or arrays.
- Copy the formatted result or download it as a .json file.
What This Tool Does
JSON (JavaScript Object Notation) is the lingua franca of web APIs. But payloads returned by servers are often minified — stripped of whitespace to reduce bytes — which makes them nearly unreadable when you need to inspect or debug them. This formatter solves that in one step.
Paste any JSON string — minified, partial, or already pretty-printed — and the tool re-renders it with consistent indentation, line breaks, and color-coded syntax highlighting. It simultaneously validates the structure against the ECMA-404 specification and reports the exact position of any syntax error.
How It Works
The formatter uses the browser’s built-in JSON.parse() to validate, then JSON.stringify() with a custom replacer to reserialize with your chosen indent width. The output is rendered as an interactive tree, so you can collapse large nested objects and focus on the section you care about.
Error detection works at the character level — if a comma is missing between two object keys, the tool highlights the offending token and shows the line and column number.
What Are Common Use Cases?
- API debugging: Copy a raw response from the Network tab in DevTools and format it for inspection.
- Config file editing: Prettify
package.json,tsconfig.json, or AWS/GCP policy documents before editing. - Data review: Receive a JSON export from a database or CRM and quickly scan its structure.
- Code review: Validate that a JSON payload in a pull request is syntactically correct before merging.
- Teaching: Explain JSON structure to students or junior developers with the collapsed-node view.
- Clipboard quick-check: Paste a JWT payload or webhook body and instantly confirm it is valid JSON.
How Does It Work?
| Input | Process | Output |
|---|---|---|
| Minified JSON string | JSON.parse() → validate | Error message with line/col, or… |
| Valid JSON object/array | JSON.stringify(obj, null, indent) | Indented, color-highlighted JSON |
| Collapsed node | Click arrow toggle | Inline {…} or […] placeholder |
The indent depth is configurable: 2 spaces (JavaScript default), 4 spaces (Python default), or a tab character. The setting is remembered between sessions via localStorage.
Frequently Asked Questions
Is this the same as running jq . file.json in the terminal?
Functionally yes — for basic pretty-printing and validation. This tool adds a visual tree with collapse/expand, which jq does not provide in the terminal.
Why does my JSON fail validation even though my IDE accepts it? Many editors support JSON5 or JSONC (JSON with Comments) as extensions. This tool validates strict JSON only. Remove comments and trailing commas to comply with the spec.
Can I use this to compare two JSON files? This formatter shows one file at a time. For side-by-side comparison, use the JSON Diff tool linked in the related tools section.
Does the formatter sort keys alphabetically? Not by default, but you can enable key sorting in the options panel. Sorting is useful for diffing two objects that have the same keys in different order.
Last updated: