5 Tools to Edit JSON Files Inside Google Chrome

The JSON format is derived from Javascript and is often used to transmit data between a server and web application. It is an alternative to XML that a programmer can dabble at, using any number of tools. But what if you want to use your browser? There are several web apps and extensions for Google Chrome aimed at helping programmers edit JSON files.

JSON Formatter app

The JSON Formatter Chrome app was created to help programmers debug code. Often text in JSON files is typed without line breaks as a means of saving space. JSON Formatter tries to assist coders by formatting the code in a way that makes it easier to read. Just insert code into the single box visible on the web page and press the “Format JSON” button. The desired re-formatted text will be displayed below. An “Un-Format JSON” button is available to edit JSON files back to their space-saving original form.

JSON Formatter Chrome Extension In Effect

The JSON Formatter Chrome extension, which has no relation to the Chrome app, 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. The screenshot above displays JSON Formatter in action, while the screenshot below shows how the code looks without the extension installed.

JSON Formatter Chrome Extension not installed

JSON Editor Chrome app

JSON Editor 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 fields side by side. The field on the left displays the code as it 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 the sauce is made.

JSONView

JSONView for Google Chrome originated as a Firefox extension. It comes complete with context menu options for copying a JSON path or value. There is also a built-in style editor for customizing the theme. An extension produced by another developer, JSONView and JSONLint for Google Chrome, expands on JSONView extension’s ability to validate JSON documents using JSONLint. And speaking of JSONLint …

JSONLint

The JSONLint Chrome app is fairly straightforward. It opens up the JSONLint website where you can validate JSON documents. It can also reformat JSON documents if needed. The app adds offline functionality, which is a nice touch. Like most of the options on this page, the app is open source, and the source code is available for anyone who wants to check it out.

If you are an experienced programmer, you probably already have an established workflow. But if you are tinkering with JSON documents for the first time or just want additional tools for interacting with documents in your browser, you have plenty of options. You do not have to use a dedicated JSON editor to edit JSON files, and if you already have a preferred way of interacting with such files, let us hear about it in the comments below.