What is JSON?

JSON (JavaScript Object Notation) is the standard data format for web APIs, configuration files, and data exchange. If you work with any web technology — frontend, backend, mobile, or DevOps — you work with JSON daily. Understanding its rules and knowing how to debug it quickly is a fundamental developer skill.

JSON consists of two structures: objects (key-value pairs wrapped in curly braces) and arrays (ordered lists wrapped in square brackets). Values can be strings, numbers, booleans, null, objects, or arrays — and they nest infinitely.

JSON Syntax Rules

JSON is strict. Unlike JavaScript objects, JSON has no tolerance for sloppy syntax:

• Keys must be double-quoted strings — {"name": "value"} not {name: "value"}
• Strings must use double quotes — "hello" not 'hello'
• No trailing commas — {"a":1, "b":2} not {"a":1, "b":2,}
• No comments — JSON has no comment syntax. Use JSONC (JSON with Comments) if your tool supports it
• No undefined — use null instead
• Numbers cannot have leading zeros — 0.5 not .5, 10 not 010

Common JSON Errors & How to Fix Them

Unexpected token error: Usually means single quotes instead of double quotes, a missing comma, or an extra comma. Paste your JSON into the formatter — it will highlight the exact line and character.

Unterminated string: A missing closing quote. Often caused by unescaped quotes inside string values. Use \" to escape double quotes within strings.

Special characters in strings: Backslashes, newlines, tabs, and unicode characters must be escaped: \\, \n, \t, \uXXXX.

Deeply nested objects: Hard to read when minified. The formatter's tree view makes nested structures navigable — you can collapse and expand sections.

API Debugging Workflow

When an API returns unexpected results, follow this workflow:

1. Capture the raw response — copy the entire response body, including headers if possible
2. Format and validate — paste into the JSON Formatter. If it fails validation, the API returned invalid JSON (a 500 error, HTML error page, or partial response)
3. Check the structure — use tree view to verify the response shape matches what you expect. Missing fields? Unexpected nesting?
4. Compare with expected — use the Diff Checker to compare the actual response against what the API documentation says you should receive
5. Check encoding — if you see garbled characters, the response may need Base64 decoding or URL decoding

Essential JSON Tools

The JSON Formatter is your primary tool — beautify, minify, validate, and navigate JSON structures. The JSON ⇄ CSV Converter transforms JSON arrays into spreadsheet-ready CSV format (and back). The Diff Checker compares two JSON responses to find exactly what changed. And the Base64 Encoder handles encoded payloads.

Pro Tips

• Keep the JSON Formatter pinned in your browser — you will use it more than any IDE extension
• When debugging APIs, always check the HTTP status code first: 200 = success, 4xx = client error, 5xx = server error
• Use the minify mode before sending JSON in URLs or config files — whitespace adds unnecessary bytes
• Learn regex for searching within large JSON files — the regex tester handles multiline search
• For JSON with comments (config files like tsconfig.json), strip comments before validating — JSON spec doesn't support them