JSON is often described as the "language of the web," but that definition is too narrow. If you design digital products, manage projects, or build systems, JSON is one of the most valuable tools you can master. It powers the APIs that connect your favorite apps, defines the design tokens that keep brand colors consistent, and sits at the heart of every meaningful collaboration between designers and developers.

It is the bridge between a creative vision and a functional, dynamic user interface.

What is JSON?

JSON stands for JavaScript Object Notation. Despite the name, you don't need to know JavaScript to use it! It is a plain-text format used to store and transport data.

Imagine you are ordering a pizza online. Your phone needs to send your name, address, and toppings to the restaurant's server. JSON is the "envelope" used to package that info so the server can understand it instantly.

Why it’s the Industry Standard:

Human Readable: It’s easy to read and understand.
Language Independent: Although inspired by JavaScript, almost every programming language can parse JSON.
Ideal for APIs: JSON is the standard for sending data between servers and clients.
Lightweight: It doesn’t use much "extra" text, making it fast to send over the internet.

Think of it as a universal way to describe information in a simple text format that computers and humans can both read.

The Anatomy of JSON

JSON is built on two primary structures: Objects and Arrays.

1. The JSON Object

An object is surrounded by curly braces { }. Inside, data is stored in key/value pairs.

The Key is always a string in double quotes (e.g., "name").
The Value is the data itself (e.g., "Alex").

{

"name": "Alex",

"role": "UX Designer",

"age": 25

}

Values Can Be:

String - Text in quotes: "Alex" or "hello"
Number - No quotes: 25 or 3.14
Boolean - true or false
Null - Represents empty: null
Object - Nested data: { ... }
Array: list of values, e.g., [1, 2, 3]

2. The JSON Array

An array is a list of items surrounded by square brackets [ ]. This is perfect when you have multiple versions of the same thing.

{

"toppings": ["Pepperoni", "Mushrooms", "Extra Cheese"]

}

Common JSON Data Types

To keep things organized, JSON only allows specific types of data:

String: Text wrapped in double quotes (e.g., "Alex"). Must use double quotes (not single!)
Number: Integers or decimals (e.g., 42 or 3.14). No quotes needed.
Boolean: Either true or false. Only true or false (lowercase)
Null: An empty value (null).
Object: {"key": "value"}. You can nest objects inside other objects!
Array: list of values, e.g., [1, 2, 3]

JSON is DATA - not logic. You can't put functions, comments, or code inside JSON.

JSON Rules & Syntax

JSON is very strict! Small mistakes break everything.

Rule 1: No Trailing Commas

❌ Incorrect:

{

"name": "John",

"age": 25,

}

✅ Correct:

{

"name": "John",

"age": 25

}

Rule 2: No Comments

❌ Incorrect:

{

// This is a user

"name": "John"

}

Why? JSON is a pure data format - comments aren't data!

Rule 3: Keys Must Use Double Quotes

❌ Incorrect:

{

name: "John",

'age': 25

}

✅ Correct:

{

"name": "John",

"age": 25

}

Rule 4: Undefined is Not Allowed

❌ Incorrect:

{

"value": undefined

}

✅ Correct:

{

"value": null

}

Nested JSON Structures

Real-world JSON is often nested - like boxes inside boxes 📦

Simple Nesting:

{

"user": {

"name": "Michael",

"age": 25,

"location": {

"city": "New York",

"country": "USA"

}

}

}

Arrays Inside Objects:

{

"user": {

"name": "Michael",

"skills": ["React", "Node", "MongoDB"],

"languages": ["English", "Spanish"]

}

}

Objects Inside Arrays:

{

"users": [

{

"id": 1,

"name": "Alice"

},

{

"id": 2,

"name": "Bob"

}

]

}

Complex Real-World Example:

{

"company": "TechCorp",

"employees": [

{

"id": 1,

"name": "Alice",

"role": "Developer",

"skills": ["JavaScript", "Python"],

"contact": {

"email": "alice@techcorp.com",

"phone": "555-0100"

}

},

{

"id": 2,

"name": "Bob",

"role": "Designer",

"skills": ["Figma", "Photoshop"],

"contact": {

"email": "bob@techcorp.com",

"phone": "555-0101"

}

}

],

"location": {

"headquarters": "San Francisco",

"offices": ["New York", "London", "Tokyo"]

}

}

Think of nested JSON as a tree:

Root → Branches → Leaves
Top level → Nested objects → Values

Formatting JSON

Computers don't care about spaces, so they often send JSON in a "minified" or messy block to save space. To a human eye, it's a nightmare.

The Messy Version:

{"user":{"id":101,"name":"Sarah","roles":["admin","editor"]},"status":"active"}

The Formatted (Pretty) Version:

{

"user": {

"id": 101,

"name": "Sarah",

"roles": [

"admin",

"editor"

]

},

"status": "active"

}

Tools like Plaisha JSON Formatter help you format and validate JSON in seconds. This makes debugging easier and reduces errors when working with APIs or config files.

JSON vs JavaScript Objects

JSON looks a lot like JavaScript objects, but here are key differences:

Feature	JSON	JS Object
Format	Strict text format (String)	Flexible code structure
Quotes	Double quotes required for keys and strings	Quotes are usually optional for keys
Keys	Must be strings	Can be strings or symbols
Functions	❌ Not allowed	✅ Allowed (Methods)
Comments	❌ Not allowed	✅ Allowed
Trailing Commas	❌ Not allowed	✅ Allowed
Usage	Data exchange between systems	Programming logic within an app

JSON Example:

{

"name": "Alice",

"age": 30

}

JavaScript Object Example:

const user = {

name: 'Alice',

age: 30,

greet() {

console.log('Hello!');

}

};

Critical Concept

JSON is text - it's a string that can be sent over the internet.

JavaScript objects live in your code and can do things.

When you send data over the web, you convert objects to JSON!

Common Mistakes Beginners Make

Single Quotes: JSON only accepts double quotes ". Using ' will break it.
Missing Commas: Every key/value pair needs a comma after it, except for the very last one in the object.
Case Sensitivity: "Name" and "name" are seen as two completely different keys.
Including comments: JSON does not support comments.

Mistakes like these can break your JSON, so always validate it.

Conclusion

JSON may look simple, but mastering it will make your life as a developer much easier. With a clear understanding of objects, arrays, and data types, plus tools like Plaisha JSON Formatter, you can read, write, and debug JSON confidently.

Start experimenting with small JSON files today, and soon, working with APIs and data will feel natural!

Explore the JSON lessons in the Plaisha Guide to deepen your understanding.