- \n
- Learning how to open a JSON file is simple since JSON is just plain text.<\/li>\n\n\n\n
- On Windows, use Notepad for a quick look or VS Code for a cleaner view.<\/li>\n\n\n\n
- On Mac, TextEdit works for basic viewing, while VS Code adds syntax highlighting.<\/li>\n\n\n\n
- No software needed? Online tools let you open a JSON file directly in your browser.<\/li>\n\n\n\n
- For frequent editing, code editors like VS Code or Sublime Text are your best bet.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
\n \ud83d\udca1 Did You Know?<\/strong>
\n \n JSON<\/strong> was created by Douglas Crockford<\/strong> in 2001<\/strong> as a lightweight, language-independent format for exchanging data and is now used in almost all programming languages.\n <\/span>\n<\/div>\n\n\n\nWhat Is a JSON File?<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/08\/01@2-1200x630.webp\" "\\"\\"")
<\/figure>\n\n\n\nBefore understanding JSON files, let’s know the definition of JSON.<\/p>\n\n\n\n
JSON (JavaScript Object Notation)<\/strong> is a light-weight data format that stores and transmits data objects in human-readable text<\/strong>. It organizes and structures the data using key-value pairs and <\/strong>arrays<\/strong><\/a>, making it easier for both humans and machines to comprehend.<\/p>\n\n\n\n
A JSON file<\/strong> is a collection of data and information in a simple text format, allowing users to view the data as objects. Objects<\/a> have properties attached to them, and these properties contain the information in the form of an array of objects. <\/p>\n\n\n\n
The JSON files are used extensively to transfer data between applications, APIs, and servers, establishing a strong connectivity among different components in the software architecture. These files don’t consume excessive memory and storage, are easier to read and write, and require minimal resources. This simplicity and broad compatibility of JSON files make them an essential element for developing modern age apps.<\/p>\n\n\n\n
Vital Information:<\/strong><\/p>\n\n\n\n
We use JavaScript as our primary language to explain the JSON examples below. <\/em>Developers <\/em><\/strong>can use any programming language, <\/strong>such as Python, Java, C#, or PHP, to work with JSON.<\/em><\/p>\n\n\n\n
<\/p>\n\n\n\n
Also Read: <\/strong>Handling JSON Datetime Between Python and JavaScript<\/a><\/em><\/p>\n\n\n\n
<\/p>\n\n\n\n
Go beyond the basics with HCL GUVI’s <\/em><\/strong>Software and AI Engineer Course<\/a><\/em>; master React, Node.js, REST APIs, and MongoDB while building real full-stack applications. Learn DSA, System Design, and AI-integrated development from industry mentors, with placement support from 1000+ hiring partners. Enroll today and build the skills top tech companies actually hire for!<\/em><\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
How to Create a JSON File<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/08\/02@2-1200x630.webp\" "\\"\\"")
<\/figure>\n\n\n\nconst fs = require('fs').promises;\n\nconst data = {\n\n name: \"Abhishek\",\n\n age: 25,\n\n skills: [\"JavaScript\", \"React\", \"Node.js\"]\n\n};\n\nasync function createJSONFile() {\n\n try {\n\n await fs.writeFile('data.json', JSON.stringify(data, null, 4));\n\n console.log(\"JSON file created successfully!\");\n\n } catch (err) {\n\n console.error(\"Error writing file:\", err);\n\n }\n\n}\n\ncreateJSONFile();\n<\/code><\/pre>\n\n\n\nExplanation:<\/em><\/strong><\/p>\n\n\n\n
- \n
- Here, we use the fs (file system) module<\/strong>, a built-in Node.js library, to let JavaScript<\/strong> <\/span>interact with the computer’s file system.<\/li>\n<\/ul>\n\n\n\n
- \n
- const fs = require(‘fs’).promises.<\/strong> This line loads the fs module with promises in Node.js, allowing us to use async\/await<\/a> instead of <\/span>callbacks. <\/li>\n<\/ul>\n\n\n\n
- \n
- Now, in this case, we have created a data variable and initialized it with an object that contains the following information in key-value pairs, such as “name”: “Abhishek”, “age”: 25, and “skills”: [“JavaScript”, “React”, “Node.js”]. <\/strong><\/li>\n<\/ul>\n\n\n\n
- \n
- But remember that data can be stored in a JSON file as text only, which is why we used JSON.stringify(data, null, 4) <\/strong>method to convert the data object into a JSON-formatted string<\/strong>. Inside this function, the null parameter is used to modify keys, but since we don’t want that, we set it to null. The last parameter is set to 4 for indentation, making the JSON file readable instead of a long line.<\/li>\n<\/ul>\n\n\n\n
- \n
- You can see the createJSONFile() <\/strong>function, which is used to perform an asynchronous operation<\/a> to create a new JSON file, data.json()<\/strong> and write the JSON string into it.<\/span> Here, the await keyword is used to tell the JS code to wait for the create operation to complete before moving on. Additionally, errors are handled using a try\/catch<\/strong> block. At last, we have finally invoked the function.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Explore our free resources to delve deep into the concepts of JavaScript:<\/em><\/strong> JS eBook<\/a><\/p>\n\n\n\n
<\/p>\n\n\n\n
How to Open a JSON File<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/08\/03@2-1200x630.webp\" "\\"\\"")
<\/figure>\n\n\n\n1. Opening a JSON File on Windows:<\/strong><\/h3>\n\n\n\n
Opening a JSON file on Windows is a simple task. You just have to right-click the file, choose the “Open with” option,<\/strong> and then select either Notepad <\/strong>or VS Code<\/strong>. Choosing Notepad to open the JSON file will give you plain text, whereas VS Code shows you the data format in colored syntax, making it easier to understand the information structure.<\/p>\n\n\n\n
2. Opening JSON File on Mac:<\/strong><\/h3>\n\n\n\n
Similar to Windows, when you open a JSON file on macOS, you have to right-click it and select the “Open With” option<\/strong>. The only difference is that instead of Notepad, there will be a TextEdit app to view JSON as plain text, while VS Code is for better readability.<\/p>\n\n\n\n
3. Opening JSON File Online:<\/strong><\/h3>\n\n\n\n
To open a JSON file online, you can visit websites like json-editor-online<\/em><\/strong><\/a>. You only need to upload your JSON file or paste the content structure, and the platform will display it in a well-structured and easy-to-read format. In these kinds of sites, along with opening and editing the JSON files, you can also validate them.<\/p>\n\n\n\n
Note:<\/strong> You can also use a browser extension like
JSON Formatter<\/code> for Chrome \u2014 it automatically turns raw JSON into a clean, readable tree view whenever you open a.json<\/code> file or API response directly in your browser.<\/p>\n\n\n\n<\/p>\n\n\n\n
4. Opening JSON File in Code Editors:<\/strong><\/h3>\n\n\n\n
Multiple code editors, such as VS Code, Atom, Sublime Text<\/strong>, and more, <\/span>help users open JSON files. These powerful tools highlight the syntax and elements within the JSON file interactively and colorfully, automatically indent the data, and enable navigation through nested structures. Opening JSON files in code editors is beneficial for developers who frequently read or edit them.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Which Tool Should You Use to Open a JSON File?<\/strong><\/h2>\n\n\n\n
Choosing the right tool to open a JSON file depends on your device and what you plan to do with the data.<\/p>\n\n\n\n
Platform<\/strong><\/th> Tool<\/strong><\/th> Best For<\/strong><\/th> View Type<\/strong><\/th><\/tr><\/thead> Windows<\/strong><\/td> Notepad<\/td> Quick, no-setup viewing<\/td> Plain text<\/td><\/tr> Windows<\/strong><\/td> VS Code<\/td> Reading and editing with clarity<\/td> Colored syntax<\/td><\/tr> Mac<\/strong><\/td> TextEdit<\/td> Quick, no-setup viewing<\/td> Plain text<\/td><\/tr> Mac<\/strong><\/td> VS Code<\/td> Reading and editing with clarity<\/td> Colored syntax<\/td><\/tr> Online<\/strong><\/td> JSON editor websites<\/td> Viewing without installing anything<\/td> Structured + validated<\/td><\/tr> Code Editors<\/strong><\/td> VS Code, Atom, Sublime Text<\/td> Frequent editing, nested JSON structures<\/td> Interactive, color-coded<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Important Note:<\/strong><\/p>\n\n\n\n
- \n
- If you just need to glance at a JSON file once, Notepad or TextEdit will do.<\/li>\n\n\n\n
- If you’re a developer working with JSON regularly, a code editor like VS Code is worth the extra step \u2014 it saves time on formatting and catches errors early.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
How to Read a JSON File<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/08\/04@2x-1200x630.webp\" "\\"\\"")
<\/figure>\n\n\n\nconst fs = require('fs');\n\n\/\/ Read JSON file\n\nfs.readFile('data.json', 'utf-8', (err, jsonString) => {\n\n if (err) {\n\n console.log(\"File read failed:\", err);\n\n return;\n\n }\n\n try {\n\n const data = JSON.parse(jsonString); \/\/ Convert JSON string to JS object\n\n console.log(data);\n\n console.log(\"Name:\", data.name);\n\n console.log(\"Skills:\", data.skills);\n\n } catch (err) {\n\n console.log(\"Error parsing JSON:\", err);\n\n }\n\n});\n<\/code><\/pre>\n\n\n\nExplanation:<\/em><\/strong><\/p>\n\n\n\n
- \n
- We have imported the fs (File System) module <\/strong>as it allows us to read, write, and manage files. Inside this module, readFile is a function that we have accessed as fs.readFile<\/strong>. It is an asynchronous function that helps in reading the content of the JSON file (data.json)<\/strong> without blocking the main JS<\/strong><\/a> <\/strong>thread, and returns the content as a text string through a callback ( (err, jsonString) => { … } )<\/strong>.<\/li>\n<\/ul>\n\n\n\n
- You can see the createJSONFile() <\/strong>function, which is used to perform an asynchronous operation<\/a> to create a new JSON file, data.json()<\/strong> and write the JSON string into it.<\/span> Here, the await keyword is used to tell the JS code to wait for the create operation to complete before moving on. Additionally, errors are handled using a try\/catch<\/strong> block. At last, we have finally invoked the function.<\/li>\n<\/ul>\n\n\n\n
- But remember that data can be stored in a JSON file as text only, which is why we used JSON.stringify(data, null, 4) <\/strong>method to convert the data object into a JSON-formatted string<\/strong>. Inside this function, the null parameter is used to modify keys, but since we don’t want that, we set it to null. The last parameter is set to 4 for indentation, making the JSON file readable instead of a long line.<\/li>\n<\/ul>\n\n\n\n
- Now, in this case, we have created a data variable and initialized it with an object that contains the following information in key-value pairs, such as “name”: “Abhishek”, “age”: 25, and “skills”: [“JavaScript”, “React”, “Node.js”]. <\/strong><\/li>\n<\/ul>\n\n\n\n
- const fs = require(‘fs’).promises.<\/strong> This line loads the fs module with promises in Node.js, allowing us to use async\/await<\/a> instead of <\/span>callbacks. <\/li>\n<\/ul>\n\n\n\n
- Here, we use the fs (file system) module<\/strong>, a built-in Node.js library, to let JavaScript<\/strong> <\/span>interact with the computer’s file system.<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/08\/05@2x-1200x630.webp\" "\\"\\"")
<\/figure>\n\n\n\n