JSON Studio

Everything you do with JSON

The JSON errors you'll actually hit

Strict JSON is stricter than the JavaScript objects it resembles, and four mistakes cause most "invalid JSON" moments: a trailing comma after the last item, single quotes instead of double quotes, unquoted keys, and comments (plain JSON allows none). The validator here points at the offending position instead of just refusing, so fixing a broken payload is a matter of reading the message rather than hunting by eye. It also catches subtler breakage — an unescaped quote inside a string, a stray control character from a copy-paste, or a truncated response missing its final brace.

From raw payload to something useful

Paste any JSON and pick your output. Format pretty-prints with consistent indentation for reading and diffing; Minify strips every optional byte for embedding or transport. The tree view collapses deep structures so a 3,000-line API response becomes navigable, and the path query pulls a single value out — type user.addresses[0].city style paths instead of scrolling. The converters go one step further: generate a TypeScript interface that mirrors the payload's shape (a fast way to type an API you don't control), or flatten an array of objects into CSV that opens directly in a spreadsheet.

Small habits that save debugging time

Format API responses before comparing them — a one-line blob diffs terribly, while formatted JSON pairs perfectly with the Diff Checker for spotting which fields changed between two environments. Keep an eye on number precision: JSON has no integer limit but JavaScript does, so 64-bit IDs arriving as numbers can silently lose digits — that's why well-designed APIs send big IDs as strings. And when a payload "validates but doesn't work," check for invisible characters; minifying and reformatting here normalizes whitespace and reveals them.

How the converters and query work under the hood

Everything starts with a single JSON.parse of the input; the status badge turns to valid or shows the parser's own message, and every tab reads from that parsed object rather than re-parsing text. Formatted is JSON.stringify with two-space indentation, Minified is the same call with no whitespace, so both outputs are canonical — key order and number formatting come from the parser, not from your original spacing. The Tree tab walks the object recursively and renders each object and array as a collapsible node showing its key count, so you can fold away the parts you don't care about. Query normalizes the path you type — [0] becomes .0, an optional leading $. is dropped — then walks the object one segment at a time, returning undefined the moment a segment is missing rather than throwing. TypeScript generates one interface per distinct object shape, naming nested interfaces by concatenating the parent name and the capitalized key (a user.address object becomes RootUserAddress), quoting keys that aren't valid identifiers, and typing arrays from their first element. CSV collects the union of keys across every object in the array as the header row, RFC 4180-quotes any cell containing a comma, quote or newline, and keeps a nested object or array intact as a JSON string in its cell instead of exploding it into dozens of columns.

Real-world use cases

• Typing a third-party API. Paste one representative response from Stripe, Shopify or an internal service, copy the generated interfaces into a types.ts, then tighten optionals and unions by hand — usually ten minutes instead of an hour of manual transcription.
• Reading a 2 MB log export. Format it, open the Tree, collapse the top level, and expand only the entries whose key count looks wrong; the query bar then pulls events[417].payload.error without scrolling.
• Handing data to a non-developer. An array of order objects converted to CSV opens directly in Excel or Google Sheets, with line items preserved as a JSON string column rather than lost.
• Shrinking config for transport. Minify a 40 KB settings file before embedding it in a query string, a data attribute or an environment variable where whitespace costs bytes or breaks quoting.

Common mistakes and how to avoid them

Pasting a JavaScript object instead of JSON. Code copied from a browser console or a .js file often has unquoted keys and trailing commas; the error message names the character position, so fix the first one, re-validate, and repeat — later errors frequently disappear once the first is fixed. Wrapping the payload in a string. If the input begins and ends with a quote and the whole thing is escaped ("{\"a\":1}"), it is a JSON string containing JSON — paste it, copy the Formatted output (which is the decoded string), and paste that again. Expecting CSV from a single object. CSV conversion needs an array of objects; wrap a lone object in [ ] or query down to the array first (data.items) and convert that. Trusting the first array element for types. The TypeScript generator infers array element types from index 0 — if your sample's first element has discount: null, the field will be typed null; pick a sample where every field has a real value. Forgetting the BOM. Files saved from Windows editors sometimes start with an invisible byte-order mark that makes an otherwise perfect document fail at position 0; delete the first character and re-paste.

Further reading

The CSV, JSON and XLSX conversion pitfalls guide covers encoding, locale decimals and nested data in depth, and Minify vs beautify explains when each output belongs in your pipeline. Browse all guides.

Frequently asked questions