JSON Studio

How to use JSON Studio

1. Pick a mode. The six tabs at the top of the workspace each do one job: Format tidies layout, Validate only checks, Minify strips whitespace, Tree view lets you browse, Query extracts values with JSONPath, and Compare lists the structural differences between two documents.
2. Paste your JSON. Copy the text from your editor, API response, log file or configuration file and paste it into the input box. Nothing is uploaded: every operation runs on this device, so private payloads stay private.
3. Run the action. Select the main button for the tab. In Format you can first choose an indent of two spaces, four spaces or a tab; in Compare you can tick the option to ignore array order before running.
4. Read the result carefully. A valid document produces formatted or minified output, statistics, a tree, query matches or a difference list. An invalid document produces an error naming the line and column of the first problem, plus a plain-language hint about the likely cause.
5. Fix, re-run, then copy or download. Correct the text in your own editor — or directly in the input box — and run the action again until it succeeds. On the Format tab you can then copy the result or download it as a .json file.

Worked example

The sample document describes a small bookshop: a store object holding a list of four books, a bicycle, staff members and some opening details, plus a small block of metadata. Select the button below to load it into the Format tab (and, to save you pasting twice, into the Tree and Query inputs as well). Format it with two-space indent and you get a neatly nested document you can read at a glance. Then open the Query tab, keep the suggested path $.store.book[0].title, and run the query: the result is a one-item array containing the first book’s title. Try changing the query to $.store.book[*].title to list every title, $..price to collect every price anywhere in the document, or $.store.book[?(@.price > 10)].title to find the titles of books costing more than ten. Finally, paste the sample into both Compare boxes, change one price in the second copy, and compare: the changed price is reported with its full path and its old and new values.

$.store.book[?(@.inStock == true)].title
→ ["Sayings of the Century", "Sword of Honour", "The Lord of the Rings"]

What JSON is, and why a careful tool matters

JSON — JavaScript Object Notation — is a text format for structured data. A document is built from only a few pieces: objects that pair quoted keys with values, arrays that hold ordered lists, strings in double quotes, numbers, and the three literal values true, false and null. Because the rules are so small, almost every programming language can read and write JSON, which is why it became the default language of web APIs, configuration files, data exports and log pipelines. When a phone app asks a server for the weather, a list of products or your account details, the reply is very probably a block of JSON travelling between the two.

The same strictness that makes JSON portable also makes it unforgiving. There are no comments, no trailing commas, no single-quoted strings and no unquoted keys, however natural those habits feel from ordinary programming. One missing comma in a three-thousand-line export makes the whole document unreadable to every standard parser, and the failure is usually reported by the receiving application, far from the place where the text went wrong. A developer then faces an unhelpful message in a production log and a large, densely packed document with no line breaks to search through. Formatting the document first — one value per line, with consistent indentation — turns that hunt into something a person can actually do, because structure you can see is structure you can reason about.

Validation, exploration and comparison answer the three questions that follow. Validation tells you whether a document obeys the grammar at all, and a good validator points at the first real problem instead of the place where a confused parser eventually gave up. A tree view and a query language let you explore a document you did not write: instead of reading every line, you expand the branches that matter or ask directly for every price, every error code or every item matching a condition. Comparison closes the loop when two versions of a document disagree — two API responses, a configuration before and after an edit, an expected and an actual test fixture — by listing exactly which paths were added, removed or changed, rather than leaving you to spot one altered number in two walls of text. Minifying, finally, is the reverse journey: once a document is correct and understood, stripping its whitespace shrinks it for storage or transport, with the size saving shown so you can judge whether it was worth doing.

Doing all of this in the browser is a deliberate choice. JSON documents routinely contain personal data, access tokens and internal system details, so pasting them into a server-side tool means trusting a stranger with their contents. Here the document never leaves your device, which makes the tool safe to use on real payloads, not just toy examples.

Common errors, and the limits of this tool

Most invalid JSON fails for a handful of familiar reasons. A comma after the last item in an object or array is the classic mistake, followed closely by a missing comma between two items. Strings and keys written with single quotes work in JavaScript source code but never in JSON. Keys must always be quoted, strings must be closed, and a value typed from habit — undefined, NaN or a date written without quotes — is not JSON at all. Raw line breaks typed inside a string also break the grammar; inside a string, a new line must be written as the escape sequence \n. The error box in each tab names the line and column of the first problem and adds a hint aimed at these causes, but remember that parsers stop at the first error: fixing it may reveal a second one further on, so validate again after every fix.

Error locations also deserve honesty. Browsers word their JSON errors differently, and some give no position at all. Where a browser reports a character position or a line and column, this tool uses it exactly. Where it does not, the tool scans the text for the first suspicious token and labels the location approximate — treat it as the neighbourhood of the problem, not a promise about the exact character.

The Repair button on the Format tab attempts the six mechanical mistakes that cause most failures: a byte-order mark at the start, JavaScript-style comments, single-quoted strings, unquoted keys, raw line breaks inside strings, and trailing commas. Repair is all-or-nothing: if the text still does not parse after those fixes, nothing is changed and the remaining error is reported instead. When repair succeeds it lists exactly which fixes were applied, and Undo restores your original text — but a repaired document can still be the wrong document (a guessed quote can change a value’s meaning), so read the result before you use it.

Size limits are as follows. Each input is limited to 5 MB, measured as UTF-8 bytes, and an input over the limit is refused with a message naming its size. Inputs over 1 MB are parsed, formatted, minified and validated in a background worker so the page does not freeze. In this version, the interactive tools — tree view, queries and compare — are limited to 1 MB; for a larger document you will be pointed back to Format, Minify and Validate, which handle the full 5 MB. The query tab implements a subset of JSONPath: the root symbol $, dot and bracket child access, array indexes, the [*] wildcard, .. recursive descent, and simple filters of the form [?( @.field == ’value’ )] supporting ==, !=, >, <, >= and <= against string, number, boolean and null values. Script expressions, unions, slices and length functions from fuller JSONPath dialects are not supported, and the tool says so rather than guessing. Finally, this tool works on values, not formatting style: key order inside objects is never treated as a difference, numbers that parse to the same value compare as equal, and duplicate keys inside one object keep the last value, exactly as the standard JSON parser in your browser handles them.

Frequently asked questions