The JSON format is derived from Javascript and often used to transmit data between a server and web application. It is an alternative to XML that allows a programmer to dabble, using any number of tools. But what if you want to use your browser to work with your JSON files? There are several web apps and extensions for Google Chrome aimed at helping programmers edit JSON files.
Good to know: scroll bar missing from Chrome? Learn how to fix it.
1. JSON Editor Online
Available as: Web application
JSON Editor Online is a tool for viewing, editing, and formatting JSON. This Chrome app opens a text editor inside your browser, allowing you to edit code without having to switch to another application. The app displays two text boxes side by side. The field on the left displays the code as is, while the field on the right displays the text in a more readable format.
The app can open both local files and URLs. Its source code is also available for those who want to know how it was made. It can open files up to 512MB, which may not look like much at first sight, but can contain a huge amount of data. For really large files, you may want to check these tools to quickly view them without lag.
JSON Editor is more than just an editor. It’s a formatter, parser, and even a repair assistant. It definitely deserves a spot in every software developer’s toolkit.
2. JSON Formatter
Available as: Chrome extension
The JSON Formatter Chrome extension is an open-source tool that also makes reading JSON code easier on the eyes. It touts support for both JSON and JSONP formats and offers syntax highlighting, collapsible trees, indent guides, and clickable URLs. It works on any valid JSON page and on local files as well.
This extension also works on JSON files served over the Internet. However, it sometimes conflicts with the HTML site’s styling, when JSON data is served raw over the HTML portion. This tends to happen on the example page from the official JSON website, in which the background color disappears.
But since this is an extension, you can easily turn it off or disable it from working on incognito pages. Plus, it’s open source, so you can mess with the source code to make it do even more things.
FYI: check out these JSON beautifiers to make your data pop.
3. JSONView
Available as: Chrome extension
JSONView for Google Chrome originated as a Firefox addon. It’s complete with context menu options to copy a JSON path or value. There is also a built-in style editor for customizing the theme.
As an extension created by another developer, JSONVue expands on the JSONView’s ability to validate JSON documents using JSONLint.
JSONView also applies some pretty-printing over your JSON files. This adds a bold print on the JSON keys to make them easier to read against the non-bolded brackets and colons.
Tip: learn how to pretty print a JSON file in Python.
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 lets you change keys and values, as well as save your changes in a downloadable JSON output file.
Perhaps the greatest feature that JSON Beautifier & Editor has is the ability to add and remove whitespaces for your JSON files. It also has a way to sort your objects in case you change a couple of things while coding.
All in all, this extension expands on what normal JSON Chrome extensions can do, turning your web browser into an offline text editor for JSON files.
5. Code Beautify JSON Editor
Available as: Web application
The Code Beautify JSON Editor is just one of the many other tools available in Code Beautify’s suite of code beautification apps. Focusing on the JSON Editor, you’ll find a couple of other ways to view JSON files from your web browser.
The app sports a code view, which is mostly just a prettified text view – except it’s independent of the Text view when viewing compact JSON. Meanwhile, the Form view shows you the size of each array inside each collapsed line. For objects, it shows how many keys sit inside it.
Another thing that makes this extension useful is that it shows you how large the edited and original JSON files are. If you are working on a project that’s very particular with file sizes, this could be the right tool for the job.
Tip: looking for a worthy plain text editor? Check out the best cross-platform options for programmers.
6. Tutorials Point Online JSON Editor
Available as: Web application
The Online JSON Editor from Tutorials Point is a great JSON editing tool that’s also easy on the eyes. It lets you toggle visual elements, which can help you visualize whitespaces in deeply-nested JSON code. Plus, it has changeable themes.
Perhaps the main attraction for this editor is that it also offers access to a library of tutorials. This makes it a handy tool for people trying to learn new programming languages, while relying mainly on online resources.
Similar to all other online JSON editing tools, this editor lets you download your 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 that features a clean and minimalist look. What it lacks in features, it makes up for with quick loading as soon as you enter its URL.
It’s good enough if you need something you can quickly use to edit. However, the “Load File” function sometimes shows up at the bottom of the screen on some browsers while using ad-blocking extensions, which may be inconvenient.
The developer of this app, Clean CSS (aka Dan’s Tools) also has other tools for converting JSON into other formats, such as CSV, XML, TSV, and even HTML.
Tip: want to learn the basics of HTML and CSS? Check out our beginner’s guide.
Conveniently Access JSON Files
It’s one thing to edit JSON in Chrome, but another thing to understand is what a JSON file is and how it’s used. Check out our detailed post on JSON files to learn more! Or, have a look at our guide on using the CAT command on Linux to learn how to concatenate not just JSON files, but basically any file with text in it.
All images and screenshots by Terenz Jomar Dela Cruz
Subscribe to our newsletter!
Our latest tutorials delivered straight to your inbox
