How to Open a JSON File in 2026: Windows, Mac, Online & Code Editors

Quick Answer:

To open a JSON file, right-click it and choose a text editor.

• Windows: Open with Notepad for plain text, or VS Code for a color-coded view.
• Mac: Open with TextEdit for plain text, or VS Code for better readability.
• Online: Upload the file to a JSON editor website to view it in a structured, validated format.
• Code editors: Use VS Code, Atom, or Sublime Text for syntax highlighting and easy navigation through nested data.

Knowing how to open a JSON file the right way saves you from staring at an unreadable block of text. The result depends entirely on the tool you use, since the same file can look like plain text in one app and a structured, colour-coded view in another.

This guide covers every practical way to open a JSON file in 2026, on Windows, Mac, online, or inside a code editor, so you can pick the method that actually fits what you need to do with the file.

What Is a JSON File?

JSON (JavaScript Object Notation) is a light-weight data format that stores and transmits data objects in human-readable text. It organizes and structures the data using key-value pairs and arrays, making it easier for both humans and machines to comprehend.

A JSON file is a collection of data and information in a simple text format, allowing users to view the data as objects. Objects have properties, and these properties can contain information in the form of an array of objects. 

JSON files are widely used to transfer data between applications, APIs, and servers, enabling strong connectivity among different components in the software architecture.

These files use little memory or storage, are easy to read and write, and require minimal resources. This simplicity and broad compatibility make JSON files an essential part of modern app development.

Vital Information: We use JavaScript as our primary language to explain the JSON examples below. Developers can use any programming language, such as Python, Java, C#, or PHP, to work with JSON.

Also Read: Handling JSON Datetime Between Python and JavaScript

Go beyond the basics with HCL GUVI’s Software and AI Engineer Course; 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!

How to Create a JSON File

const fs = require('fs').promises;

const data = {

    name: "Abhishek",

    age: 25,

    skills: ["JavaScript", "React", "Node.js"]

};

async function createJSONFile() {

    try {

        await fs.writeFile('data.json', JSON.stringify(data, null, 4));

        console.log("JSON file created successfully!");

    } catch (err) {

        console.error("Error writing file:", err);

    }

}

createJSONFile();

Explanation:

• Here, we use the fs (file system) module, a built-in Node.js library, to let JavaScript interact with the computer’s file system.

• const fs = require(‘fs’).promises. This line loads the fs module with promises in Node.js, allowing us to use async/await instead of callbacks.   

• 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”].   

• But remember that data can be stored in a JSON file as text only, which is why we used JSON.stringify(data, null, 4) method to convert the data object into a JSON-formatted string. 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.

• You can see the createJSONFile() function, which performs an asynchronous operation to create a new JSON file (data.json() and write the JSON string into it. Here, the await keyword tells the JS code to wait for the create operation to complete before moving on. Additionally, errors are handled using a try/catch block. Finally, we have invoked the function.

Explore our free resources to delve deep into the concepts of JavaScript: JS eBook

How to Open a JSON File

1. Opening a JSON File on Windows:

Opening a JSON file on Windows is simple. You just have to right-click the file, choose the “Open with” option, and then select either Notepad or VS Code. Notepad opens the JSON file as plain text, while VS Code shows the data in coloured syntax, making the structure easier to understand.

2. Opening JSON File on Mac:

Similar to Windows, to open a JSON file on macOS, right-click it and select the “Open With” option. The only difference is that instead of Notepad, you’ll see TextEdit to view JSON as plain text, while VS Code offers better readability.

3. Opening JSON File Online:

To open a JSON file online, you can visit websites like json-editor-online. You only need to upload your JSON file or paste the content, and the platform will display it in a well-structured, easy-to-read format. In these kinds of sites, along with opening and editing the JSON files, you can also validate them.

Note: You can also use a browser extension like JSON Formatter for Chrome — it automatically turns raw JSON into a clean, readable tree view whenever you open a .json file or API response directly in your browser.

4. Opening JSON File in Code Editors:

Multiple code editors, such as VS Code, Atom, Sublime Text, and more, 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 benefits developers who frequently read or edit them.

Which Tool Should You Use to Open a JSON File?

The right tool depends on your device and what you plan to do with the data.

Important Note:

• If you just need to glance at a JSON file once, Notepad or TextEdit will do.
• If you’re a developer working with JSON regularly, a code editor like VS Code is worth the extra step — it saves time on formatting and catches errors early.

How to Read a JSON File

const fs = require('fs');

// Read JSON file

fs.readFile('data.json', 'utf-8', (err, jsonString) => {

    if (err) {

        console.log("File read failed:", err);

        return;

    }

    try {

        const data = JSON.parse(jsonString);      // Convert JSON string to JS object

        console.log(data);

        console.log("Name:", data.name);

        console.log("Skills:", data.skills);

    } catch (err) {

        console.log("Error parsing JSON:", err);

    }

});

Explanation:

• We imported the fs (File System) module because it lets us read, write, and manage files. Inside this module, readFile is a function we access as fs.readFile.
• It is an asynchronous function that reads the content of the JSON file (data.json) without blocking the main JS thread and returns the content as a text string through a callback ((err, jsonString) => { … }).

• In this code statement, ‘ fs.readFile(‘data.json’, ‘utf-8’, (err, jsonString) => { … }) ‘, we are calling the function and asking Node.js to read the data.json file. The second parameter ‘utf-8’ specifies the encoding to decode the file bytes into a string using UTF-8 encoding. Without UTF-8 encoding, we would get the raw binary data.

• The third parameter is a callback function with two parameters: err (to detect errors) and jsonString (to hold the JSON content as a text string).

• Inside this callback, we first use an if condition to check for reading errors, such as when the file doesn’t exist or lacks permissions. Then we use a try…catch block to handle JSON parsing.

• Here, we have converted the JSON string to a JS object. If any error occurs in the JSON file, such as missing commas, incorrect data types, or incorrect quotes, we wrap the code in a try/catch block. If parsing succeeds, we can print the data object to the console; if it fails, we can log an error message.

How to Edit a JSON File

const fs = require('fs');

// Read JSON file

fs.readFile('data.json', 'utf-8', (err, jsonString) => {

    if (err) {

        console.log("File read failed:", err);

        return;

    }

    try {

        const data = JSON.parse(jsonString);   // Convert JSON string to JS object

        // Modify the object

        data.age = 26;

        data.skills.push("Node.js");

        // Save updated object back to JSON file

        fs.writeFile('data.json', JSON.stringify(data, null, 4), (err) => {

            if (err) throw err;

            console.log("JSON file updated successfully!");

        });

    } catch (err) {

        console.log("Error parsing JSON:", err);

    }

});

Explanation:

• To modify the object in memory in this example, we have used the push method (data.skills).push(“Node.js”) for adding the property to the existing skills array, and also directly updated the age property by specifying a new number (data.age = 26).

• After modifying the object, you need to save the changes back to the file. This is done with fs.writeFile(‘data.json’, JSON.stringify(data, null, 4), (err) => { … }).

Best Practices for Working with JSON Files

The following are the best practices while working with the JSON files:

• Validate JSON – Check formatting before parsing.

• Use UTF-8 encoding – Ensures readable text, not raw bytes.

• Handle errors – Always catch parsing and file I/O errors.

• Stringify with indentation – Makes JSON human-readable.

• Avoid unsupported data – Only use strings, numbers, booleans, arrays, objects, or null.

Conclusion

Today, we learned how to create, read, and edit JSON files in JavaScript; understood the difference between JSON as a string in files and JavaScript objects in memory; explored error handling and common JSON mistakes; and discussed modern async/await methods and best practices for working with JSON efficiently and safely.

FAQs