What is JSON5?

JSON5 is a superset of JSON, proposed by Douglas Crockford (the creator of JSON), to address limitations in JSON's flexibility and readability. It retains JSON's core syntax but adds support for features like comments, single quotes, trailing commas, hexadecimal numbers, and Unicode escape sequences, making JSON configuration files more JavaScript-like.


JSON vs JSON5

FeatureJSONJSON5
Comments❌ Not supported✅ Supported (// and /* ... */)
Single Quotes❌ Only double quotes✅ Supports single quotes '
Trailing Commas❌ Not allowed✅ Allowed in objects and arrays
Hexadecimal Numbers❌ Not supported✅ Supported (e.g., 0xFF)
Unicode Escape❌ Not supported✅ Supported (e.g., \u{1F600})
Boolean Valuestrue/falsetrue/false
Nullnullnull
Object Keys❌ Must be quoted✅ Optional quotes (like JS objects)

Example: JSON vs JSON5

Standard JSON

{
  "name": "Alice",
  "age": 30,
  "skills": ["JavaScript", "React"]
}

JSON5

{
  name: 'Alice',       // Single quotes
  age: 30,             // Trailing comma
  hobbies: [
    'reading', 
    'coding',
  ],
  color: '#FF0000',    // Hex color
  note: /* Multi-line comment */ 'This is a comment'
}

Use Cases for JSON5

ScenarioReason
Configuration FilesEasier to read/write with comments and single quotes
Development EnvironmentsFaster prototyping or local debugging
JavaScript ConfigurationsCloser to JS syntax, reducing formatting overhead
Toolchain SupportSupported by tools like Babel, Webpack, etc.

Pros and Cons of JSON5

✅ Advantages

  • More Flexible: Supports comments, single quotes, trailing commas.
  • JavaScript-Like: Easier for developers familiar with JS.
  • Improved Readability: Better for human editing and maintenance.

❗ Disadvantages

  • Non-Standard Format: Some parsers do not support JSON5 (requires additional handling).
  • Compatibility Issues: In production, JSON5 must be converted to standard JSON.

How to Use JSON5?

1. Parse JSON5 Files

Use the json5 package:

npm install json5
const JSON5 = require('json5');

const config = JSON5.parse(`
  {
    name: 'Bob',
    age: 25,
    // This is a comment
    tags: ['dev', 'design'],
  }
`);

console.log(config);

2. Convert to JSON

In production, convert JSON5 to standard JSON:

json5 -c config.json5 > config.json

Compatibility of JSON5

Tool/PlatformSupports JSON5?
Node.js❌ (Requires json5 package)
Browsers❌ (Default unsupported)
VS Code✅ (With syntax highlighting plugin)
Webpack✅ (With json5 loader)
Babel✅ (With plugin)

Conclusion

FeatureDescription
Core IdeaSuperset of JSON with flexible syntax
Best ForDevelopment environments, configuration files
Production TipConvert to JSON for compatibility
Recommended Tooljson5 package

References

If you're writing configuration files or need a more flexible JSON syntax, JSON5 is a powerful tool. Feel free to ask for further details!