JSON Formatter
Pretty-print, minify, or explore JSON as a tree — plus a bonus TypeScript generator.
Also known as: JSON beautifier, JSON pretty printer, JSON viewer
How it works
- 1Paste your JSON into the box.
- 2Choose Pretty, Minify, or Tree view — indent width and key-sorting are available in Pretty mode.
- 3If something's invalid, check the exact line and column shown, plus the likely cause.
- 4Optionally turn on "Generate a TypeScript interface" to get a type definition for the same JSON.
Why use JSON Formatter
Three ways to view your JSON
Pretty-printed, minified, or an interactive collapsible tree — pick whichever fits the task.
Precise error locations
Points to the exact line and column of a syntax error, not just a generic "invalid JSON."
Sort keys for easier diffing
Alphabetically sort object keys so two versions of similar JSON are easier to compare.
Bonus TypeScript generator
Turn a sample JSON response into a best-effort TypeScript interface, including nested types.
Live stats
See character count, key count, and max nesting depth update as you type.
Nothing ever uploaded
Parsing, formatting, and the tree view all run locally — your JSON never reaches a server.
Who uses JSON Formatter
Debugging an API response
Pretty-print a minified API response to actually read it.
Exploring a large nested payload
Use tree view to collapse everything except the field you're investigating.
Comparing two JSON files
Sort keys on both to make a visual diff far easier to read.
Shrinking JSON for production
Minify a hand-written config file before shipping it.
Starting a TypeScript type from an API sample
Generate an interface to paste into your codebase as a starting point.
Reviewing a webhook payload
Format a raw webhook body to check its structure before writing handler code.
About JSON Formatter
Every API response, log line, and config file that uses JSON eventually needs to be read by a human, and JSON in its natural, wire-efficient form — no spaces, no line breaks — is close to unreadable past a few dozen characters. A formatter's basic job is simple: add the indentation back. This one does that, plus a few things most basic formatters don't bother with.
The tree view is the biggest departure from a typical formatter. Instead of a wall of indented text, deeply nested JSON — the kind you get from a complex API response — renders as a collapsible tree, where every object and array can be expanded or collapsed individually, with a live count of how many keys or items are hidden inside a collapsed node. For a response with dozens of nested objects, this is the difference between scrolling through hundreds of lines and jumping straight to the one field you actually need.
Errors get the same attention to detail. Rather than a generic "invalid JSON" message, this tool extracts the exact line and column where parsing failed directly from the browser's own JSON parser, shows that specific line, and — since a bare error message rarely explains what actually went wrong — checks for the handful of mistakes that cause almost every JSON parsing failure: a trailing comma, single quotes instead of double quotes, an unquoted key, or a stray comment (none of which are valid in standard JSON, even though they're common in JavaScript object literals people mistake for JSON).
The TypeScript interface generator is a genuine bonus: paste in a sample JSON response and get back a best-effort interface definition, inferring types and even generating nested interfaces for nested objects. It's not a substitute for a proper schema — it can't know that a field is sometimes a string and sometimes null just from one sample, and it doesn't attempt union types across differently-shaped array items — but for turning a quick API response into a starting-point type definition, it saves the tedious part of typing it out by hand.
JSON Formatter vs. other options
How Open Tools Library compares to desktop software and other online tools.
| Feature | Open Tools Library | Desktop software | Other online tools |
|---|---|---|---|
| Price | Free, unlimited | Often built into IDEs | Often free |
| Tree view | Yes, collapsible | Varies | Rare |
| Error location | Exact line/column + likely cause | Varies | Often generic |
| TypeScript generation | Yes, built in | Separate tool usually needed | Rare |
| Data privacy | Never leaves your device | Stays local | Often sent to a server |
| Speed | Instant, live as you type | Instant | Varies by site |
Pro tips
- Use tree view for large, deeply nested responses — it's much faster to navigate than scrolling through pretty-printed text.
- Sort keys before comparing two JSON payloads side by side; unordered keys make identical data look different.
- The generated TypeScript interface is a starting point, not a finished type — check for fields that might be optional or nullable based on other samples.
- If you get a parse error, check the exact line shown first — most failures are a trailing comma or a stray quote right there.
- Minified JSON is for machines, not review — always pretty-print before reading a payload closely.
Technical specs
- View modes
- Pretty, Minify, Tree
- Indent options
- 2 or 4 spaces
- Error diagnostics
- Exact line/column + common-mistake detection
- Bonus feature
- Best-effort TypeScript interface generation
- Size limit
- None enforced (browser memory dependent)
- Processing location
- 100% local, in your browser
Privacy & security
API responses and config files often carry real user data, so a JSON formatter shouldn't need to see it on someone else's server just to add indentation back.
Every part of the process — parsing, formatting, the tree view, TypeScript generation — runs locally in your browser.
No account or signup is required to use any part of this tool.
Nothing you paste in is stored, logged, or cached anywhere.
Works the same for a public API sample as it does for a payload containing real customer data.
Frequently asked questions
Is my JSON uploaded anywhere?
No. Parsing, formatting, and the tree view all run locally in your browser using JavaScript.
What's the difference between Pretty and Tree view?
Pretty view shows fully indented text; Tree view renders the same data as an interactive, collapsible structure you can expand and collapse node by node.
Does sorting keys change my data?
No — it only reorders keys alphabetically for display and comparison purposes; the values themselves are untouched.
Can this fix invalid JSON automatically?
No, but it tells you exactly where the problem is and what commonly causes it, so you can fix it yourself in seconds.
How accurate is the TypeScript interface generator?
It's a best-effort inference from the sample you provide — accurate for that sample's shape, but it can't guess at fields that vary across different responses.
Is there a size limit?
No hard limit — very large JSON payloads just take a little longer to render, especially in tree view.
Troubleshooting
My JSON shows an error but looks fine to me
Check the exact line shown in the error — the most common causes are a trailing comma, single quotes instead of double quotes, or an unquoted key, all flagged automatically if detected.
The tree view collapsed everything and I can't find my data
Click the chevron next to any object or array to expand it — nodes past a couple of levels deep start collapsed by default to keep large payloads manageable.
The generated TypeScript interface doesn't match my actual data
The generator infers types from a single sample — if a field can be null, optional, or a different type in other responses, you'll need to adjust the generated interface by hand.
Minify removed my formatting and I want it back
Switch back to Pretty mode — minifying doesn't lose any data, just the whitespace, so re-formatting recovers a readable version instantly.
Related searches
Landed here looking for something worded a little differently? JSON Formatter covers all of these too:
Ready to use JSON Formatter?
Free, private, and ready right now — no signup required.
Scroll to JSON Formatter