JSON Formatter Online

Paste or type JSON on the left; the right side formats it and parses it into a collapsible tree in real time, pointing straight at the position of any syntax error. You can also just give it a JSON URL and fetch the content (that endpoint has to allow cross-origin requests). Expand or collapse nodes one at a time or all at once, format and minify, and copy a node's path or value. All parsing happens locally in your browser — your content is never sent to this site.
JSON URL
JSON text
Waiting for input
Tree view
Parsed output will appear here.
Waiting for input
Notes:
1. The input is re-parsed automatically as you type — no button to press. If parsing fails, the location of the error (line / column) is shown on the right.
2. Click the triangle in front of a node to collapse or expand it; while collapsed, the number of items it contains is shown.
3. Hovering over a node reveals a copy button on the right, which copies that node's path (such as data.items[0].id) and its value.
4. “Escape / Unescape” handles JSON that has been nested inside a string — for instance a backslash-laden JSON fragment inside a log line.
5. The “JSON URL” box at the top fetches a remote JSON document — just press Enter. It only works when the other side allows cross-origin requests (its response carries Access-Control-Allow-Origin). A page cannot forge a Referer, so the checkbox only chooses between sending one and sending none.

About formatting and validating JSON

When to format and when to minify

Both only touch whitespace — the data itself is identical either way. Formatting adds line breaks and indentation for human eyes: use it while debugging an API, reading logs or reviewing a config file. Minifying strips every bit of optional whitespace to cut the size: use it when writing a request body, storing a value in a database or stuffing one into an environment variable. JSON crammed onto a single line is not "broken", it simply has not been laid out for reading — paste it in and format it. If what you have is two config files that need to become one, that is the job of JSON Merge; this page only lays a single JSON document out so you can read it.

The most common reasons parsing fails

Roughly in order of frequency: a trailing comma after the last element; single quotes instead of double quotes; a double-slash comment; an unquoted key; a value of NaN or undefined, or Python-style True / None; an unescaped line break or backslash inside a string. Every one of those is legal in JavaScript or Python source, but the JSON standard does not accept them, which is why pasting a snippet out of code trips this so often. There is also an invisible variant: a BOM or non-printing whitespace at the start of the file, which can sneak in when you save from Notepad or copy from a web page.

Why read API responses as a tree

Real API responses are routinely five or six levels deep, and hunting through them by indentation alone is tiring. A tree view lets you collapse the branches you don't care about, shows at a glance how many elements an array holds and how deep a field sits, and lets you copy a node's path straight into your code. When you are chasing a production issue, the JSON in the log is often nested again as a string, carrying a pile of backslashes — unescape it first and it expands normally.

JSON is not a JavaScript object

JSON is a data interchange format with exactly six types — object, array, string, number, boolean and null. Keys must be wrapped in double quotes, and functions, date objects, comments and trailing commas are all disallowed. A JavaScript object literal is far more permissive. Note too that JSON puts no limit on numeric precision, while most parsers handle numbers as double-precision floats: integers above 2^53 (a snowflake-style ID, for instance) lose their last few digits. Fields like that are best passed as strings in the API.

FAQ

Is my JSON uploaded to a server?

No. Parsing, formatting, the tree view and copying all happen locally in your browser through JavaScript. The page has no backend, and nothing you paste is sent to any server. That makes it safe for API responses with internal fields, log fragments and config files. Fetching through “JSON URL” does not go through this site either: the request goes straight from your browser to that address. That server does of course see the visit, so use your own judgement with intranet addresses and endpoints that carry a token in the link.

Can I just enter the URL of a JSON file?

Yes. Put the address in the “JSON URL” box at the top and click “Fetch” or just press Enter; the content is pulled into the left pane and parsed immediately. A bare address like example.com/data.json works too; https:// is added automatically. It does require that address to allow cross-origin access — the browser only hands the content over when it sees Access-Control-Allow-Origin in the response. raw.githubusercontent.com, jsDelivr and most public APIs qualify; company intranet endpoints and anything that needs a login usually do not.

What causes the “Fetch failed” message?

Most of the time it is a cross-origin block. For security reasons the browser does not tell the page why a request failed — it only gives a generic error, so the tool can only be generic in turn. Press F12 and open the console; the real reason is written there. If it really is CORS, there is nothing this page can do about it: this site is purely static, there is no backend to fetch on your behalf, and it will not forward your URL to a third-party proxy either — that would hand over the address along with any token it might carry. What does work is downloading the JSON and pasting it in, or fetching it yourself with curl on the command line. Also, an address beginning with http is blocked by the browser on this page (https) as mixed content — the request never even goes out.

Can I set a custom Referer?

No — this is a hard browser restriction. Referer is a forbidden header name: assigning to it from page script is silently ignored. fetch has its own referrer option, but as soon as you put someone else's domain in it, the browser quietly swaps it back for this page's own address — neither form errors out, they simply do not take effect. So any web tool claiming it can forge a Referer has a server behind it sending the request for you. All a page can really choose between is sending this site's address as the referrer by default, or ticking “Don't send Referer” and sending none at all — the latter helps with addresses that use the referrer for hotlink protection.

What should I do when it says the JSON failed to parse?

The right-hand panel shows the browser's own error message plus the approximate line and column. Common causes: single quotes instead of double quotes, unquoted keys, a trailing comma after the last element, comments mixed into the content, or JSON that got truncated while copying. Jump to the reported position and fix it there.

Why is a very large JSON document slow to open?

The tree needs one DOM element per node, so rendering slows down once there are a great many of them. For very large documents the tool expands only the first few levels by default and leaves the rest collapsed, rendering them on expansion — which cuts the lag substantially. If your file is enormous, trim it down to the part you care about first.

What do the “Escape / Unescape” buttons do?

Some logs and database columns store a piece of JSON as a plain string, so the content is littered with backslashes like \" . “Unescape” turns such a string back into ordinary JSON and parses it; “Escape” does the reverse, converting the current JSON into a form you can embed inside a string.

Can I copy an individual node's path?

Yes. Hover over any node row and a copy icon appears on the right; clicking it copies that node's access path, for example data.items[0].name, which you can paste straight into your code or a debugging tool. Shift-click instead to copy the node's value.

Are JSON5, JSONC or JSON with comments supported?

Parsing uses the browser's built-in standard JSON.parse, so only standard JSON syntax works — no comments, single quotes, trailing commas or unquoted keys. If your content is JSON5 / JSONC, strip those extensions out by hand first.

Are very large numbers shown inaccurately?

JavaScript numbers have limited precision, so integers above 2^53 (snowflake IDs, for instance) can come back with their last few digits changed. This is a limitation shared by every tool built on JSON.parse . When you hit such a field, the fix is to return the ID as a string from the server.

What is that ten-digit number in the API response?

Almost certainly a Unix timestamp. Ten digits means seconds, thirteen means milliseconds. Formatting leaves it as a bare number — the tree view will not translate it for you. Paste it into the Timestamp Converter to see the date it stands for, or go the other way and turn a date into a timestamp when you are building request parameters.

Related tools

JSON MergeBase64 DecodeTimestamp ConverterURL Decode