Home › JSON Playground & Tutorial

JSON Playground & Tutorial

Interactive, beginner-friendly — learn by doing, not just reading.

7 lessons • ~20 min • No setup needed

Lesson 1 of 7

What is JSON?

JSON stands for JavaScript Object Notation. Despite the name, it is used by almost every programming language — Python, Go, Rust, Java, Swift — to store and exchange data.

Think of JSON as a universal language for data. It is how your phone's weather app asks a server for the forecast, how your browser receives search results, and how configuration files are written.

Why JSON won

  • Human-readable — you can open a .json file in any text editor and understand it
  • Lightweight — no extra markup overhead like XML
  • Supported natively — every browser and most languages have built-in JSON parsing
  • Flexible — can represent any data structure: flat records, deeply nested trees, arrays of objects

A real-world example

Here is what a server might return when you request a user profile:

{ "id": 42← a number "name": "Alice"← a string (text in quotes) "active": true← a boolean "score": null← null means "no value" "tags": ["admin", "editor"]← an array }

Notice the pattern: everything is a key–value pair. The key is always a string in double quotes. The value can be one of 6 types — you will learn all of them in the next lesson.

1 / 7
Lesson 2 of 7

The 6 JSON Data Types

JSON has exactly 6 data types. Every value in any JSON document is one of these.

String
"Hello"
Text, always wrapped in double quotes
Number
3.14
Integer or decimal, no quotes
Boolean
true
Exactly true or false, lowercase
Null
null
Represents the absence of a value
Array
[1, 2, 3]
Ordered list of values in brackets
Object
{"k": "v"}
Key–value pairs in curly braces
Common trap: Single quotes 'like this' are not valid in JSON. You must always use double quotes for strings and keys.

All 6 types in one document

{
  "product": "Widget Pro",
  "price": 29.99,
  "in_stock": true,
  "discount": null,
  "sizes": ["S", "M", "L", "XL"],
  "dimensions": {
    "width": 10,
    "height": 5
  }
}
KeyValueType
"product""Widget Pro"string
"price"29.99number
"in_stock"trueboolean
"discount"nullnull
"sizes"["S","M","L","XL"]array
"dimensions"{ … }object

Quick check

What type is the value false?

A String
B Boolean
C Null
D Number
2 / 7
Lesson 3 of 7

JSON Syntax Rules

JSON is strict. One missing comma or an extra quote will make the entire document invalid. Here are the rules you must know.

Rule 1 — Keys must be double-quoted strings

// ❌ Invalid
{ name: "Alice" }
{ 'name': "Alice" }

// ✅ Valid
{ "name": "Alice" }

Rule 2 — No trailing commas

// ❌ Invalid (trailing comma after last item)
{
  "a": 1,
  "b": 2,
}

// ✅ Valid
{
  "a": 1,
  "b": 2
}

Rule 3 — No comments

JSON does not support // comments or /* block comments */. Comments in this tutorial are for explanation only — never paste them into real JSON.

Rule 4 — Strings must use double quotes, and special characters must be escaped

{
  "greeting": "Say \"hello\" to her",
  "path": "C:\\Users\\Alice",
  "newline": "Line 1\nLine 2"
}
EscapeMeaning
\"Double quote
\\Backslash
\nNew line
\tTab
\uXXXXUnicode character

Rule 5 — Numbers are plain — no quotes, no hex, no Infinity

// ❌ Invalid
{ "count": "42" }   // This is a string, not a number
{ "pi": Infinity }  // Not supported
{ "hex": 0xFF }     // Not supported

// ✅ Valid
{ "count": 42, "pi": 3.14159, "exp": 1.5e10 }

Quick check

Which of these is valid JSON?

A { name: "Bob", age: 30, }
B { 'name': 'Bob', 'age': 30 }
C { "name": "Bob", "age": 30 }
D { "name": "Bob", "age": 30, }
3 / 7
Lesson 4 of 7

Objects & Arrays

Objects and arrays are the two container types in JSON. Together they let you represent any data structure, no matter how complex.

Objects — named bags of data

An object is a comma-separated list of "key": value pairs, wrapped in { }. Keys must be unique within one object.

{ "city": "Tokyo", "population": 13960000, "capital": true }

Arrays — ordered lists

An array is a comma-separated list of values, wrapped in [ ]. Items can be any type, including other arrays or objects.

[ "apple", "banana", "cherry" ]

Nesting — the superpower

Objects can contain arrays. Arrays can contain objects. This nesting can go as deep as needed.

{
  "team": "Rockets",
  "members": [
    { "name": "Alice", "role": "lead" },
    { "name": "Bob",   "role": "dev"  }
  ],
  "meta": {
    "created": "2026-01-01",
    "active": true
  }
}
Accessing nested data (JavaScript):
data.members[0].name"Alice"
data.meta.activetrue

Quick check

What is the value of data.members[1].role?

A "lead"
B "dev"
C "Bob"
D undefined
4 / 7
Lesson 5 of 7

Live JSON Sandbox

Write or paste any JSON below. The sandbox validates it in real time and shows you a formatted version — or an exact error message if something is wrong.

Your JSON
Waiting for input…
Formatted Output
Formatted JSON will appear here.
Pro tip: Try introducing intentional errors — missing a closing brace, adding a trailing comma, or using single quotes — to see exactly what error message JSON throws. Real-world debugging is mostly reading those messages.
5 / 7
Lesson 6 of 7

Fix the Broken JSON

Each exercise below contains deliberately broken JSON. Fix it so it becomes valid. Click Check when you are done. A hint is available if you get stuck.

1
Missing quotes on a key
The JSON below has one syntax error. Fix it.
2
Trailing comma
Fix the comma error.
3
Single quotes
JSON requires double quotes everywhere.
4
Boolean as a string
True booleans must not be quoted.
6 / 7
Lesson 7 of 7

JSON Cheat Sheet

A printable, copy-paste reference for everything you have learned.

Minimal valid JSON

{}
[]
null

String

"Hello, World!"
"Line 1\nLine 2"
"Say \"hi\""
"Path: C:\\Users"

Number

42
-7
3.14
1.5e10
-2.3E-4

Boolean & Null

true
false
null

Object

{
  "key": "value",
  "num": 42
}

Array

[1, "two", true, null]
[
  {"id": 1},
  {"id": 2}
]

Nested

{
  "user": {
    "name": "Alice",
    "roles": ["admin"]
  }
}

Common errors

{ key: "v" }     ❌
{ 'k': 'v' }    ❌
{ "k": "v", }   ❌
// comment      ❌
{ "k": True }   ❌

JavaScript

// Parse
JSON.parse('{"a":1}')
// Stringify
JSON.stringify({a:1})
// Pretty
JSON.stringify(obj, null, 2)

Python

import json
# Parse
json.loads('{"a":1}')
# Stringify
json.dumps({"a":1})
You have completed all 7 lessons. You now know the full JSON syntax — every data type, every rule, and the most common pitfalls.
🎉

JSON Certified Beginner

You have completed the JSON Playground & Tutorial. Go build something with your new superpower.

Open JSON Editor → Learn JSON Schema →
7 / 7