Back to Learn
Published: June 2026•By Web Util Slyce Team
JSON Formatting Guide
Learn how to format JSON with examples. See the difference between minified and beautified JSON, and discover best practices for readable JSON documents.
1. Formatted vs Minified
Minified (59 chars)
{ "name": "John", "age": 30, "city": "New York" }Formatted (80 chars)
{
"name": "John",
"age": 30,
"city": "New York"
}2. Nested Objects
{
"user": {
"id": 123,
"name": "Jane Doe",
"email": "jane@example.com",
"address": {
"street": "123 Main St",
"city": "San Francisco",
"zip": "94105"
}
},
"orders": []
}3. Arrays of Objects
{
"products": [
{
"id": 1,
"name": "Widget",
"price": 19.99,
"inStock": true
},
{
"id": 2,
"name": "Gadget",
"price": 29.99,
"inStock": false
}
]
}4. API Response with Pagination
{
"status": "success",
"code": 200,
"data": {
"items": [
{ "id": 1, "title": "Post One" },
{ "id": 2, "title": "Post Two" }
],
"pagination": {
"page": 1,
"perPage": 10,
"total": 42,
"totalPages": 5
}
}
}Best Practices
• Use consistent indentation (2 spaces is standard in most JavaScript ecosystems)
• Use meaningful, descriptive key names in camelCase or snake_case
• Avoid deeply nested structures (more than 3-4 levels)
• Keep arrays homogeneous — all items should have the same structure
• Always validate JSON before production use
• Minify JSON for network transmission, format for debugging and configuration files
5. Common Data Patterns
Configuration
{
"appName": "MyApp",
"version": "1.0.0",
"debug": false,
"features": {
"darkMode": true,
"notifications": false
}
}Error Response
{
"error": {
"code": "VALIDATION_ERROR",
"message": "Invalid input",
"details": [
{ "field": "email", "reason": "Invalid format" }
]
}
}