ToolStackToolStack
Browse Tools →
Home/Blog/JSON Visual Guide
EngineeringApril 15, 2026 · 7 min read

JSON for Beginners: A Visual Guide to Formatting & Validation

Justin Pirrie

Justin Pirrie

Founder, ToolStack · April 15, 2026

TL;DR

  • → JSON keys must be double-quoted strings. Trailing commas and comments are not valid.
  • → The six valid value types: string, number, boolean, null, array, object.
  • → Validate and format your JSON instantly with the free JSON Formatter.
Sponsored

Advertisement Space

JSON powers virtually every modern API, config file, and data pipeline. You'll encounter it in REST APIs, package.json, environment configs, database exports, and localStorage. Learning to read, write, and debug it confidently is a foundational skill — and it takes about 20 minutes.

What Valid JSON Looks Like

Here is a complete, valid JSON object representing a user:

{
  "id": 1,
  "name": "Justin Pirrie",
  "email": "justin@toolstack.tech",
  "isPro": false,
  "tags": ["seo", "developer", "marketer"],
  "address": {
    "city": "London",
    "country": "UK"
  },
  "deletedAt": null
}

Every element here demonstrates one of JSON's six valid value types.

The 6 Valid Value Types

TypeExampleNotes
String"Hello, world"Must use double quotes — single quotes are invalid
Number42 or 3.14No quotes. Supports integers and floats
Booleantrue or falseLowercase only — True is invalid
NullnullLowercase only — NULL or Null are invalid
Array["a", "b", "c"]Ordered list, any mix of value types
Object{ "key": "value" }Unordered set of key/value pairs

The 5 Most Common JSON Errors

Trailing comma

{ "name": "Justin", }
{ "name": "Justin" }

The comma after the last property (or last array item) is invalid in JSON. JavaScript allows it; JSON does not.

Single-quoted strings

{ 'name': 'Justin' }
{ "name": "Justin" }

JSON requires double quotes for both keys and string values. Single quotes are a JavaScript convention, not a JSON standard.

Unquoted keys

{ name: 'Justin' }
{ "name": "Justin" }

Every key in a JSON object must be a double-quoted string — no exceptions. This catches people coming from JavaScript object literals.

Comments

{ "name": "Justin" // user }
{ "name": "Justin" }

JSON has no comment syntax. Remove all // and /* */ comments before parsing. Use JSONC or a pre-processor if you need annotated config files.

undefined value

{ "value": undefined }
{ "value": null }

undefined is a JavaScript concept and is not a valid JSON value type. Use null to represent the absence of a value.

Sponsored

Advertisement Space

Validate your JSON in one click

The free JSON Formatter catches syntax errors with exact line positions, formats your payload, and runs entirely in your browser. No data sent anywhere.

Open JSON Formatter Free →

Frequently Asked Questions

What is JSON used for?

JSON (JavaScript Object Notation) is used to transmit structured data between a server and a client — it is the standard format for REST API responses. It is also widely used for configuration files (package.json, tsconfig.json), storing user preferences, and exporting/importing data between systems.

What is the difference between JSON and JavaScript objects?

JSON looks like a JavaScript object but has stricter rules: all keys must be double-quoted strings, trailing commas are not allowed, and values can only be strings, numbers, booleans, null, arrays, or nested objects. JavaScript objects allow unquoted keys, single quotes, and trailing commas. JSON is a data format; a JavaScript object is a runtime data structure.

Why does JSON not support comments?

JSON was designed by Douglas Crockford specifically as a minimal data interchange format. Comments were excluded intentionally to keep parsing simple and deterministic. If you need comments in config files, consider JSONC (JSON with Comments) which is supported by TypeScript's tsconfig.json, or YAML.

How do I validate JSON online?

The easiest way is to paste your JSON into the ToolStack JSON Formatter. It will instantly highlight syntax errors with exact line positions, show a formatted version, and allow you to minify or copy the clean output. It runs entirely in your browser — no data is sent to a server.

What is the difference between JSON.parse() and JSON.stringify()?

JSON.parse() converts a JSON string into a JavaScript object — you use it when you receive data from an API. JSON.stringify() converts a JavaScript object into a JSON string — you use it when you need to send data or store it. A common pattern: fetch('/api/data').then(r => r.json()) uses JSON.parse() internally.

← Back to BlogOpen JSON Formatter →