w3resource

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.

jsonviewer.stack.hu

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.

jsonviewer.stack.hu format

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.

jsonviewer.stack.hu view

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

jsonviewer.stack.hu 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).

josn online editor open

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.

josn online editor JSON to Editor

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

josn online editor tree

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

josn online editor search

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.

josn online editor format

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

josn online editor 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.

jquery4you json viewer

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

jquery4you json generate

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.

jquery4you json select

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.

json visualization

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

json visualization render

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.

json visualization selection

Clicking on validate will validate your JSON code.

Clicking on reencode will reencode the JSON code.

json visualization reencode

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 viewer

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.

JSON Parser online

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

JSON Parser online options

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

JSON Parser online samples

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.

online json parser

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.

JSON View

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



Follow us on Facebook and Twitter for latest update.