Paji's Blog

Share something with the Internet.

What is JSONC, what is JSON5.

Originally published on 4/24/2024

Nowadays we interchange data everywhere. Web pages, videos, and tweets. For those text data including user information, tracking fingerprints, and API consuming, JSON (JavaScript Object Notation) has become (almost) the standard because of its simplicity and ease of use in web development and other areas. As its original minimal, text-based design for representing structured data, its clear syntax and human readability have made it a widely adopted standard. It's also an important language used in many configuration files, incluencing various software and system setups. However, just like any other technologies, developers have made adaptations to better suit their specific needs, giving rise of variants such as JSONC and JSON5.

Where do we see JSON?

JSON is everywhere in the technology world, particularly prominent in area such as API interactions and configuration settings. One of the most common place you can meet JSON is in RESTful APIs where it serves as the primary format for interchanging data between clients and servers. Such widespread use is powered by its ability to efficiently represent complex data structures compactly and its human-readable format. These lend themselves well to web technologies.

Another typical use of JSON is within software configuration, such as Visual Studio Code. VSCode makes extensive use of JSON files for its user and workspace settings, allowing users to customize the editor to their specific needs in a format that's both accessible and easy to manipulate. JSON also plays an important role of project dependencies and configurations through the package.json file in the Node.js and npm ecosystems. This file serves as the backbone for any Node.js project, detailing project metadata, scripts, dependencies, and other necessary configurations using JSON format.

Cons of JSON

JSON is very popular because of its simplicity and efficient. Even so, it does have some limitations that can be problematic in some scenarios. Here's why:

No Comments Allowed:

One of the major drawbacks of JSON is the lack of comments. It doesn't support comments while comments are invaluable for leaving notes and explanations directly in the code, which can eventually help with team communication and maintaining complex configurations in the future. This can make JSON files less transparent and more difficult to maintain, especially in larger projects

No Trailing Commas:

JSON syntax also doesn't allow trailing commas in arrays and objects while some eslint configurations (like eslint-airbnb) recommend using it in JavaScript. This restriction increase the inability for developers to edit JSON files, as adding or removing items requires careful attention to the placement of comma to avoid syntax errors. Other coding languages and formats often ignore trailing commas (some of them even cancel commas), making them easier to modify.

JSONC to the Rescue

For the lack of support for comments, JSONC, which stands for JSON with Comments, addresses this limitation by introducing a syntax that allows comments within JSON files. This makes it an excellent solution for developers who want to include comments directly in their data files, which can significantly improve code readability and maintainability.

For example, here's a valid JSONC syntax:

{
"name": "example-project", // The project name
"version": "1.0.0",
"dependencies": {
"express": "^4.17.1" // Specifies express as a dependency
},
"scripts": {
"start": "node app.js" /* Script to start the application */
}
// Additional configurations could be added below
}

JSONC follows the same structure and syntax rules as JSON, with the added benefit of supporting both single-line // ... and muti-line `/ ... / comments. This small yet powerful extension can make all the difference in project documentation and team collaboration.

JSON5: Enhanced Usability

JSON5 is a more flexible extension of JSON, designed to make configuration and data interchange smoother and more intuitive for developers. JSON5 extends the features of JSON to include comments, additional string delimiters, and relaxed syntax rules for the benefit of hand-written (or edited) JSON files.

JSON5 allows comments like JSONC, but goes further by supporting trailing commas, unquoted object keys (which are valid JavaScript identifiers) and single-quoted strings. These features reduce potential errors and simplify modifications, making JSON5 particularly useful for editing configurations.

For example, here's a valid JSON5 syntax:

{
name: 'example-app', // Unquoted key, valid JavaScript identifier
version: '1.0.0',
dependencies: {
lodash: '^4.17.21', // Use of single quotes for strings
}, // Trailing comma allowed
scripts: {
start: 'npm run serve' /* Multi-line comment support */
},
}

In this JSON5 example, we see a much looser structure compared to traditional JSON. These subtle yet significant changes aim to enhance the developer experience by making it easier to configure and maintain. Whether you're managing project configurations or setting up build scripts, JSON5 brings a tremendous flexibility to JSON's hardness, proving invaluable in modern development environments where ease of use is as critical as robust data structure.

Conclusion

In summary, JSON remains a fundamental format for data interchange and configuration across many applications, owing to its simplicity and efficiency. However, its strict syntax and limitations, such as the absence of comments and trailing commas, have led to the development of variants like JSONC and JSON5. They both extends the improvements by relaxing the syntax rules, making it significantly more flexible and developer-friendly. These adaptations are example of how dynamic development needs can drive the evolution of technology standards, ensuring they remain both practical and relevant in diverse coding environments. Each of these JSON formats has its place depending on the specific needs of a project, demonstrating the importance of choosing the right tool for the right job in software development.

I'm Paji. This is a footer. Who are you?