Validate JSON in the Browser: The Line and Column of the Mistake

I work on OnePassApps, and this is what our Data Studio does when it hands you a JSON syntax error: it tells you the line, the column and the byte offset, and it puts a caret under the exact character where the parser gave up.

That last part is the interesting one. Most validators say "invalid JSON" and leave you to hunt. This one names the character it stopped on, and that character is usually not where your mistake is.

You can try it on the Data Studio page, or read the OnePassApps guides page first.

The panel, before you run it

The Data Studio has eleven tabs: Viewer, Sort / filter, Columns, Duplicates, Merge, Split, To JSON, Formatter, Validator, To CSV and YAML. The Validator tab is a plain three-step panel:

• 01 Source - Clear, Paste local data, Browse files, Input limits and privacy
• 02 Options - one sentence, and it is the whole contract: Checks syntax only; the structure is not compared with a schema.
• 03 Result - empty until you run it

The action button reads Validate JSON, while the tab radio above it reads Validator. That radio/button collision is the same trap in every studio, so match the full button text.

A run on a deliberately broken file

I pasted a four-line object with one missing bracket:

{
  "name": "OnePassApps",
  "tags": ["a", "b",
  "credits": 100000
}

The array on line 3 is never closed. The result panel reads:

• status Not valid
• Line 4
• Column 12
• a timing line - 41 ms in this run

The stage below it is headed JSON VALIDATOR and Not valid JSON, and it repeats the whole message:

Line 4, column 12: Expected ',' or ']' after array element in JSON at position 59 (line 4 column 12)

and prints the source back with line numbers and a caret under the character it stopped at.

Line 4 is "credits": 100000, and column 12 is the colon after "credits". The parser was still inside the open array, so it reached that colon and wanted either a comma or the closing bracket. The missing bracket is on line 3. The tool is not pointing at your typo - it is pointing at where it stopped parsing, which is standard JavaScript parser behaviour, and this tool does not paper over it.

I checked the message independently: JSON.parse in Node throws Expected ',' or ']' after array element in JSON at position 59 (line 4 column 12) for the same bytes. Position 59 is the same character, the colon, and the offset, the line and the column all agree.

Second case, a trailing comma:

{
  "a": 1,
  "b": 2,
}

Result: Line 4, column 1: Expected double-quoted property name in JSON at position 22 (line 4 column 1). Again line 4 is where it stopped; the trailing comma is on line 3. Position 22 is the closing brace.

A valid file, and what the counters actually count

Now a valid one:

{
  "name": "OnePassApps",
  "credits": 100000,
  "tags": ["files", "audio"]
}

The panel reads Valid, then Valid JSON., then Format, JSON, Size 90 B, Lines 8, and a timing line - 53 ms in that run. The stage says Valid JSON and 8 lines · 90 B · from Pasted JSON, and adds one line worth reading: The parsed structure, formatted with two-space indentation.

Here is the subtlety. The pasted text was 78 bytes over 5 lines. The counters said 90 B and 8 lines. Those numbers describe the formatted output, not what you pasted - the formatter expands the "tags" array onto four lines before it counts anything. I re-ran the same JSON through a standard two-space dump and got the same 90 bytes and the same 8 lines, character for character.

So the validator's size and line counts are a preview of the formatted JSON. If you want to know how big your paste was, measure the paste.

The Formatter tab, and the 28 bytes that appear

The Formatter tab sits next to it with the same three-step panel, and its only option is the indent:

• 02 Options - Indent, then 2 spaces or 4 spaces, and the note Keys keep their order. Changing the indent clears the result.

Both halves of that sentence are true. Switching from 2 spaces to 4 spaces wipes the result - the output box empties and the panel falls back to Ready when you are and Format JSON to see the result here. - while your pasted source stays put, so you press Format JSON again and it is back.

Two runs on the same six-line paste:

• 2 spaces: 12 lines · 147 B
• 4 spaces: 12 lines · 175 B

Same line count, 28 bytes more, because every indent level costs one extra space. I dumped the same object with a standard JSON formatter at indent 2 and at indent 4 and got exactly 147 and exactly 175 bytes, byte for byte. This is an ordinary two-space or four-space JSON dump, not a house style with opinions.

The formatter also expands arrays. "studios": ["files", "audio"] comes out as four lines, one item per line, and the nested object gets its own indented block.

After a run the action button becomes Format again, and the stage reads GENERATED OUTPUT, Generated JSON, 12 lines · 147 B · from Pasted JSON, with a Download JSON button.

The downloaded file is the same bytes

I clicked Download JSON and read the file off disk: data.json, 147 bytes, byte-identical to the two-space output shown on screen. The download is the formatted result, not your original paste - which is the useful behaviour if you were about to save a file you had just edited into a JSON shape.

Limits and the privacy line

Opening Input limits and privacy on this tab says: pasted text supports up to 10,000 lines; pasted CSV up to 8 MiB and 10,000 data rows; CSV files up to 20 MiB, 100,000 rows and 2 million cells; JSON up to 2 MiB and YAML up to 1 MiB. It ends with the sentence "Your data stays on this device."

The Formatter tab also carries the line Nothing leaves this tab. under its 03 Result heading, and "Processing stays in this browser." is the line below the result stage - accurate here, because the parse, the format, the byte count and the download all happen in the tab. The plan block on the same page reads "Standard is free right now", "$0 / month", "100,000 credits every 30 days", "No end date set" and "No card required".

When to reach for it

Use the Validator when you need the exact offset of a syntax error - in a CI log, in a bug report, in a message pasted from another tool. Use the Formatter when you want a canonical two-space or four-space dump of JSON you already know parses.

Neither of them is a schema validator, and the panel says so in as many words: it will tell you that your JSON parses, and it will not tell you that a field you expected is missing. There is no schema box on this tab, because this tab checks syntax.

I work on OnePassApps, the team behind app.onepassapps.com. The Data Studio also does CSV viewing, sorting and filtering, de-duplicating rows, merging, splitting, CSV-to-JSON, JSON-to-CSV and YAML, if you want the same trust in those.