This tutorial covers a simple way to beautify JSON Code in Browser.
Most web browsers show the JSON code in plain text including popular ones like Google Chrome and Mozilla Firefox. JSON code from a website or web application in your web browser is not so easy to understand quickly due to the lack of proper formatting.
Without the formatting, it’s hard to know where a line ends and you have to deep analyze the code to get the idea. This will surely take more time than it supposed to. Larger the code, the more time it takes. In such situation, I prefer to copy-paste the code to a code editor for formatting.
But, there is an ideal solution to this problem. With JSONView, you can easily view JSON code/document with proper formatting right in your web browser.
Also read: 5 Free Chrome Extensions To Control YouTube Playback
How To Beautify JSON Code In Browser
JSONView is a web extension that you can install to your web browser. Currently, it available for Google Chrome and Mozilla Firefox. JSONView is an open source project, you can access its source code at GitHub here.
You can add this extension to your web browser either from the JSONView website or from your browser’s web store. Links to these sources are given below:
- JSONView Homepage.
- Add to your Google Chrome
- Add to your Mozilla Firefox
Once, you install this extension on your browser, you are all set. It does not require any additional setup. Now, whenever a JSON code will appear in your web browser, it will be automatically formatted. It will color-code the various elements of the code and align them properly. Here is an example to illustrate its working. The image attached below shows you a before-after comparison. The left side (before) shows how a JSON code appears in a web browser without JSONView. The right side (after) shows the same code formatted by JSONView.
To ease the reading JSON code/document, JSONView also has keyboard shortcuts. You can use these shortcuts to expand and collapse different sections of the JSON code.
- Left Arrow – Collapses the JSON on key up
- Right Arrow – Expands the JSON on key up
Wrap Up:
By installing this simple web extension, you can beautify JSON code in your web browser. This extension adds proper formatting to the code and makes it easier to read.
