jQuery Plugin For Easily Readable JSON Data Viewer

Yet another jQuery JSON viewer plugin which renders JSON objects in HTML with support for syntax highlighting and collapsible/expendable navigation.

See also:

How to use it:

1. Load the required jquery.json-viewer.css for the basic styles of the JSON viewer.

<link href="jquery.json-viewer.css" rel="stylesheet">

2. Load the jQuery JSON Viewer's script after you've have jQuery library installed.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.json-viewer.js"></script>

3. Create an container element for the JSON viewer.

<pre id="json-viwer"></pre>

4. Prepare your JSON data and the plugin will take them as input which will be converted into html and added into the container element you just created.

$('#json-viewer').json_viewer(input);

5. Collapse all nodes on init.

$('#json-viewer').jsonViewer(input, {
  collapsed: true
});

6. All JSON keys are surrounded with double quotation marks. Default: false.

$('#json-viewer').jsonViewer(input, {
  withQuotes: false
});

7. Make the valid links clickable. Default: true.

$('#json-viewer').jsonViewer(input, {
  withLinks: false
});

Changelog:

2019-03-10

2017-03-22

• Fixed Arrow Size Issue

2016-10-01

• js update

2016-04-27

• Added withQuotes option

2016-02-17

• Added option for collapsing all node on init

2015-04-03

• Escape XML/HTML tags in JSON content

2015-02-21

• Made dict key names clickable

2014-12-25

• Toggle block when placeholder is clicked, use 'em' instead of 'px' in CSS

This awesome jQuery plugin is developed by abodelot. For more Advanced Usages, please check the demo page or visit the official website.