7 JSON file editing tools in Google Chrome

The JSON format originates from JavaScript and is commonly used to transfer data between servers and web applications. It is an alternative to XML that allows programmers to learn and use any number of tools. But what if you want to use your browser to work with JSON files? There are a number of web apps and extensions for Google Chrome that help programmers edit JSON files.

1. JSON Editor Online

Available as: Web Application

JSON Editor Online is a tool to view, edit and format JSON files. This Chrome app opens a text editor inside your browser, allowing you to edit code without having to switch to another app. The application displays two text boxes side by side. The left field displays the code as-is, while the right field displays the text in a more readable format.

7 JSON file editing tools in Google Chrome Picture 1

The application can open both local and URL files. Its source code is also available for those who want to know how it was created. It can open files up to 512MB in size, which may not look like much at first glance but can contain a huge amount of data. For really large files, you might want to check out these tools for quick viewing without lag.

JSON Editor is more than just an editor. It's a formatter, parser, and even a repair assistant. It certainly deserves a place in every software developer's toolkit.

2. JSON Formatter

Available as: Chrome Extension

The JSON Formatter Chrome extension is an open source tool that makes reading JSON code easier. It supports both JSON and JSONP formats, and provides syntax highlighting, collapsible trees, indentation guides, and clickable URLs. It works on any valid JSON page and on local files.

7 JSON file editing tools in Google Chrome Picture 2

This extension also works on JSON files provided over the Internet. However, sometimes it conflicts with the style of the HTML page when JSON data is provided raw on the HTML part. This tends to happen on the example page from the official JSON site, where the background color disappears.

But since this is an extension, you can easily turn it off or disable it so it works on anonymous pages. Additionally, JSON Formatter is open source, so you can modify the source code to make it do even more.

3. JSONView

Available as: Chrome Extension

JSONView for Google Chrome originated as a Firefox add-on. It comes complete with context menu options for copying paths or JSON values. There is also a built-in style editor to customize the theme.

7 JSON file editing tools in Google Chrome Picture 3

As an extension created by another developer, JSONVue extends JSONView's ability to validate JSON documents using JSONLint. JSONView also applies some pretty printing features on your JSON files.

4. JSON Beautifier & Editor

Available as: Chrome Extension

JSON Beautifier & Editor turns your Chrome browser into a JSON tool for editing, processing, and analyzing data. It allows you to change keys and values, as well as save your changes in a downloadable JSON output file.

7 JSON file editing tools in Google Chrome Picture 4

Perhaps the coolest feature that JSON Beautifier & Editor has is the ability to add and remove spaces to your JSON files. It also has a way to sort your objects in case you change something while coding.

In general, this extension extends what the regular JSON Chrome extension can do, turning your web browser into an offline text editor for JSON files.

5. Code Beautify JSON Editor

Available as: Web Application

Code Beautify JSON Editor is just one of many other tools available in the Code Beautify suite of code beautification applications. Focusing on JSON Editor, you will find several other ways to view JSON files from your web browser.

7 JSON file editing tools in Google Chrome Picture 5

This app has a code view, which is mostly just a nice edited text view - except it's independent of the Text view when it comes to compact JSON viewing. Meanwhile, the Form view shows you the size of each array inside each collapsed line. For objects, it shows how many keys are inside them.

Another thing that makes this extension useful is that it shows you how large the original and edited JSON files are. If you are working on a project with very specific file sizes, this may be the right tool for the job.

6. Tutorials Point Online JSON Editor

Available as: Web Application

Online JSON Editor from Tutorials Point is a great and easy-to-see JSON editing tool. It allows you to transform elements visually, helping you visualize white spaces in deeply nested JSON code. Plus, its theme is subject to change.

7 JSON file editing tools in Google Chrome Picture 6

Perhaps the main attraction of this editor is that it also provides access to a library of tutorials. This makes it a useful tool for those trying to learn new programming languages ​​by relying primarily on online resources.

Similar to all other online JSON editing tools, this editor allows you to download the edited JSON through your browser. That way, you can use this to do almost anything you need to do with any JSON code.

7. JSON Editor From Dan's Tools

Available as: Web Application

JSON Editor From Dan's Tools is a free online JSON editor with a clean and minimalist interface. What it lacks in features it makes up for with the ability to load quickly as soon as you enter the URL.

7 JSON file editing tools in Google Chrome Picture 7

JSON Editor From Dan's Tools is good enough if you need something you can quickly use for editing. However, the "Load File" function sometimes displays at the bottom of the screen on some browsers when using ad blocking extensions, which can be inconvenient.

The developer of this app, Clean CSS (aka Dan's Tools) also has other tools to convert JSON to other formats, such as CSV, XML, TSV, and even HTML.

Lesley Montoya

Update 19 October 2023