Online JSON viewer

Objective

While working with JSON, often you may need a JSON viewer. This document discusses several online JSON viewer. Hopefully, this will help you to select one depending upon your requirement.

jsonviewer.stack.hu

This may be the most widely used online JSON viewer. Indeed it is feature rich to be used widely.

You can directly copy your JSON text in this online viewer. Or you may use the load JOSN data button to supply an url and the viewer will load JSON form that resource. After the JSON code is visible in the viewer, you can click on Format to format the code.

Clicking on Viewer then will change the mode of the viewer and you can expand or collapse the JSON tree on the left-hand side pane to view the name and values on the right-hand side pane.

In the Text mode, you can minify the JSON code by clicking on the Remove white space.

And finally, you can clear the code by clicking on Clear.

jsoneditoronline.org

jsoneditoronline.org is another excellent JOSN viewer. It comes with a default JSON code which you may clear by clicking on a clear button. You may load your own JSON code by clicking on Open and then you choose to open from a local file (Open file) and form an url (Open url).

You click on JSON to the editor and you can see the code you loaded as a JSON tree on the right-hand side pane.

You can then expand and collapse the tree to view various components of the JSON tree.

There is a search box on the editor, which you may use to search various components of the JSON code.

Once you click on the Save button, the document in question is saved on your local machine (within default download location).

On the left-hand pane, the left most button is to format your JSON code.

And the button net to that is to remove all the white spaces and make it compact.

Online JSON Tree Viewer Tool

This is tool is located at http://www.jquery4u.com/demos/online-json-tree-viewer/. You can either click on Choose a file and upload a JSON file or you may click on Copy and Paste and simply copy JSON code from a source.

Once the code is there, click on the Generate JSON tree to obtain a tree view of the JSON code.

You can now Collapse and Expand the JSON tree. Another good feature of this tool is, when you select a component of the JSON tree, you can see a popup on the browser showing you the path of the JSON object selected.

You can not save, clear or remove white space using this tool though.

JSON Visualization

This is feature rich online JSON viewer, available at http://chris.photobooks.com/json/default.htm. You can paste the JSON code under Input. You may also click Load and load a JSON file from remote.

Click on render to generate either JSON or HTML, depending on the selection you have made under radio boxes of Output.

By clicking on Expand/Collapse you can expand and collapse the JSON tree rendered. You can click on any of the JSON components and it shows it's location in the JSON tree.

Clicking on validate will validate your JSON code.

Clicking on reencode will reencode the JSON code.

Json viewer

This tool is available at http://www.jsonviewer.com/. Like other tools, this also allows you to load JSON from either url or you can directly paste the code. Though the loading from url is available on IE only. After you click on Parse JSON data, Json Object view is rendered.

JSON Parser Online

You can access this tool at http://json.parser.online.fr/. Once you paste the code on the left-hand side panel, you can view JSON tree w.r.t string parsing and eval.

Clicking on the Options opens a menu and you can choose various options from there.

This tool has several JSON samples including one Invalid JSON sample which is great, particularly for beginners.

Free Online JSON Parser

http://jsonparser.com/ offers this tool. You can copy code, format, view JSON tree and collapse and expand the tree with this tool.

JSONView in Chrome

This browser extension for Chrome is an excellent tool. You can obtain it from https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en. You can use the context menu to copy the JSON path or the value.

This has an extension for Firefox also. You can obtain it from here:https://addons.mozilla.org/EN-us/firefox/addon/jsonview/.

Have you any other tool in mind? Let us know. And of course, share it with your friends and colleagues.

Previous: Structures of JSON
Next: Validate JSON with JSONLint