Tiny jQuery Plugin For Pretty JSON Print - JSON Browse

File Size: 6.29 KB
Views Total: 3154
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Tiny jQuery Plugin For Pretty JSON Print - JSON Browse

Yet another JSON viewer jQuery plugin which presents your JSON data in a more readable, expandable tree structure with syntax highlighting support.

How to use it:

1. Add references to jQuery library and the jQuery JSON Browse plugin's files into the html page.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="jquery.json-browse.js"></script>
<link href="jquery.json-browse.css"rel="stylesheet">

2. Create a 'pre' element where to place the pretty JSON data.

<pre id="json-renderer" class="json-body"></pre>

3. Call the function on the 'pre' element to beautify your custom JSON data.

var input = {
    // json data here


4. The option to collapse all child nodes on page load.

  collapsed: true

5. The option to surround all JSON keys with double quotation marks.

  withQuotes: true

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