Last updated
JSON Diff Viewer Examples
The JSON Diff Viewer compares two JSON documents and highlights additions, removals, and modifications. Below are examples showing different types of JSON changes and how they appear in the diff view.
Example: API Response Change
// Version 1 (left):
{
"user": {
"id": 42,
"name": "Alice Smith",
"email": "alice@example.com",
"role": "user",
"createdAt": "2023-01-15"
}
}
// Version 2 (right):
{
"user": {
"id": 42,
"name": "Alice Johnson",
"email": "alice@example.com",
"role": "admin",
"createdAt": "2023-01-15",
"updatedAt": "2024-03-10"
}
}
// Diff output:
user.name: "Alice Smith" → "Alice Johnson" (modified)
user.role: "user" → "admin" (modified)
+ user.updatedAt: "2024-03-10" (added)
Example: Configuration File Comparison
// Old config (left):
{
"database": {
"host": "localhost",
"port": 5432,
"name": "myapp_dev",
"pool": {
"min": 2,
"max": 10
}
},
"cache": {
"enabled": false,
"ttl": 300
},
"debug": true
}
// New config (right):
{
"database": {
"host": "db.production.example.com",
"port": 5432,
"name": "myapp_prod",
"pool": {
"min": 5,
"max": 50
},
"ssl": true
},
"cache": {
"enabled": true,
"ttl": 3600,
"provider": "redis"
}
}
// Diff output:
database.host: "localhost" → "db.production.example.com" (modified)
database.name: "myapp_dev" → "myapp_prod" (modified)
database.pool.min: 2 → 5 (modified)
database.pool.max: 10 → 50 (modified)
+ database.ssl: true (added)
cache.enabled: false → true (modified)
cache.ttl: 300 → 3600 (modified)
+ cache.provider: "redis" (added)
- debug: true (removed)
Example: Array Changes
// Before:
{
"permissions": ["read", "write", "delete"],
"tags": ["javascript", "nodejs", "api"],
"scores": [85, 92, 78, 95]
}
// After:
{
"permissions": ["read", "write", "admin"],
"tags": ["javascript", "typescript", "api", "rest"],
"scores": [85, 92, 78, 95, 88]
}
// Diff output:
permissions[2]: "delete" → "admin" (modified)
tags[1]: "nodejs" → "typescript" (modified)
+ tags[3]: "rest" (added)
+ scores[4]: 88 (added)
Example: Nested Object Changes
// Before:
{
"app": {
"version": "1.2.0",
"features": {
"darkMode": false,
"notifications": {
"email": true,
"push": false,
"sms": false
}
}
}
}
// After:
{
"app": {
"version": "1.3.0",
"features": {
"darkMode": true,
"notifications": {
"email": true,
"push": true,
"sms": false
},
"analytics": true
}
}
}
// Diff output:
app.version: "1.2.0" → "1.3.0" (modified)
app.features.darkMode: false → true (modified)
app.features.notifications.push: false → true (modified)
+ app.features.analytics: true (added)
Example: Side-by-Side View
Left (v1) Right (v2)
─────────────────────────────────────────────────────────
{ {
"status": "pending", "status": "active",
"count": 5, "count": 8,
"label": "old label", "label": "old label",
"priority": "high",
"tags": [ "tags": [
"alpha", "alpha",
"beta" "beta",
"gamma"
] ]
} }
Color coding:
Red background = removed
Green background = added
Yellow highlight = modified value
No highlight = unchanged
Example: Schema Evolution Tracking
// API v1 schema:
{
"type": "object",
"properties": {
"id": { "type": "integer" },
"name": { "type": "string" },
"email": { "type": "string" }
},
"required": ["id", "name"]
}
// API v2 schema:
{
"type": "object",
"properties": {
"id": { "type": "integer" },
"name": { "type": "string" },
"email": { "type": "string", "format": "email" },
"createdAt": { "type": "string", "format": "date-time" },
"role": { "type": "string", "enum": ["user", "admin"] }
},
"required": ["id", "name", "email"]
}
// Diff output:
properties.email: { type: string } → { type: string, format: email } (modified)
+ properties.createdAt: { type: string, format: date-time } (added)
+ properties.role: { type: string, enum: [user, admin] } (added)
required[2]: (none) → "email" (added to required)
Diff Summary Report
Comparison: config-v1.json vs config-v2.json
Summary:
Total changes: 9
Added: 3 fields
Removed: 1 field
Modified: 5 values
Changed paths:
+ database.ssl
+ cache.provider
- debug
~ database.host
~ database.name
~ database.pool.min
~ database.pool.max
~ cache.enabled
~ cache.ttl
Paste two JSON documents into the left and right panels to see a color-coded diff highlighting every addition, removal, and modification between them.