JSON formatter and validator — free, in your browser
Format, minify and validate JSON in your browser. Broken documents get the exact line and column of the error. Nothing is uploaded, and there is no size limit but your machine.
Free · no sign-up · runs in your browser
Parsed as you type. Nothing is uploaded.
Alphabetical, at every depth. Arrays keep their order.
Result
{
"id": 42,
"name": "Acme",
"active": true,
"tags": [
"design",
"tools"
],
"owner": {
"id": 1,
"email": null
},
"members": [
{
"id": 2,
"email": "kim@example.com",
"profile": {
"avatar": "a.png"
}
},
{
"id": 3,
"email": null
}
]
}14 keys · 5 objects · 2 arrays · depth 4 · 324 characters
Parsed and formatted in this page by the browser's own JSON engine. Nothing is uploaded — check your network tab.
Paste JSON and get it back readable, minified, or with its keys sorted. If it will not parse, this tells you the line and column where it broke instead of just saying "invalid JSON" — which is the part that actually costs you time. Everything runs in this tab: the document never leaves your machine, which matters more for JSON than for most formats, because the JSON people need to format is usually an API response with somebody's data in it.
How it works
- 01Paste or type JSON into the input. It is parsed as you type, so you see the result immediately.
- 02Pick an indent: two spaces, four spaces, tabs, or minified for a single line with no whitespace.
- 03Turn on "sort keys" to order every object's properties alphabetically, at every depth. Arrays keep their order — their order is data, not formatting.
- 04If the document will not parse, the error appears with the line and column, so you can go straight to it rather than hunting for the missing comma.
- 05The stats under the output count keys, objects, arrays and nesting depth, which is the quickest way to see whether a payload is shaped the way you expected.
- 06Copy the result, or clear and start again.
Use cases
- Making a minified API response readable so you can actually find the field you need.
- Checking that a config file parses before committing it and waiting on a failed build to tell you.
- Minifying JSON before pasting it into an environment variable or a query string.
- Sorting keys on two versions of the same payload so a diff shows real changes instead of reordering.
- Formatting a response that contains customer data, without pasting it into a website that keeps it.
- Finding the exact position of a syntax error in a large document your editor renders as one long line.
Frequently asked questions
Is my JSON uploaded anywhere?
No. Parsing and formatting happen in this page using the browser's own JSON engine. There is no request to any server, which you can confirm in your browser's network tab, or by disconnecting from the network after the page has loaded. That is the main reason to prefer a client-side formatter: the JSON worth formatting is usually a real API response, and most online formatters post it to a backend.
Why does my JSON with comments fail?
Because comments are not JSON. The format has no comment syntax — what you have is probably JSONC or JSON5, which editors and config files accept but parsers do not. The same applies to trailing commas, single-quoted strings and unquoted keys. Strip those and it will parse. This tool deliberately does not accept them: a formatter that silently accepted invalid JSON would hand you a document your production parser then rejects.
Does formatting change my data?
The values do not change, but the text can. The document is parsed and re-serialised, which is the only way to guarantee valid output — so escapes are normalised, numbers are re-rendered in their shortest round-trip form (1.0 becomes 1, 1e3 becomes 1000), and duplicate keys collapse to the last one. Key order is preserved unless you ask for sorting. If you need the original bytes untouched, a formatter is the wrong tool.
Is there a size limit?
Only your machine's memory. There is no server-side cap because there is no server, but very large documents (tens of megabytes) will make the browser tab sluggish while it parses and re-renders — the work happens on the main thread. For a file that big, a command-line tool like jq is a better fit.
What do the numbers under the output mean?
Keys counts every object property at every depth; objects and arrays count how many of each the document contains; depth is how deeply nested it is, where a flat object is 1. They are quick sanity checks — an unexpected depth usually means a payload is wrapped in something you did not expect, and a key count far from what you assumed usually means you are looking at a page of results rather than a single record.
Why does sorting keys not sort my arrays?
Because an array's order is part of its meaning. Sorting the properties of an object changes only presentation — JSON objects are unordered by specification — while reordering an array changes the data. Sorting keys is intended for diffing two payloads that list the same fields in different orders; doing the same to arrays would produce a diff that looks clean while describing a document you do not have.
Related resources
Related reading
- Frontend5 Frontend Tools Worth Bookmarking in 2026A short, opinionated list of the frontend tools and references we reach for every week — frameworks, styling, components, and icons.
More tools
Tailwind CSS color palette generator
Open →Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.
CSS clamp() calculator for fluid typography
Open →Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.
SVG to JSX converter for React components
Open →Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.
Meta tag generator with Google SERP preview
Open →Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.
Favicon generator — .ico, PNG set and manifest
Open →Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.
JSON-LD schema generator and validator
Open →Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.
robots.txt generator with validation
Open →Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.
UTM link builder and campaign URL generator
Open →Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.
Colour contrast checker with WCAG suggestions
Open →Check any two colours against WCAG 2 — normal text, large text and UI components — see the ratio and live samples, and get the nearest passing colour when a pair fails, adjusted in OKLCH so the hue stays yours. Free, runs in your browser.
Image converter — WebP, AVIF, JPEG and PNG
Open →Convert and resize images to WebP, AVIF, JPEG or PNG at the quality you choose, see exactly how many bytes each one saved, and download them one at a time or as a zip. Everything happens in your browser — no image is uploaded.
JSON to TypeScript — generate interfaces from a payload
Open →Paste a JSON payload and get TypeScript interfaces: merged array shapes, optional properties, and real unions instead of any. Runs in your browser — nothing is uploaded.
OG image generator — free 1200×630 social cards
Open →Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.