json-browse

json-browse is a jQuery plugin to easily browse and highlight your JSON.

• Syntax highlighting
• Collapse and expand child nodes on click
• Clickable links
• Easily readable and minimal DOM structure

demo page!

Usage

Import jquery.json-browse.js and jquery.json-browse.css in your application.

Then just call the jsonBrowse() method passing in an object:

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

var data = {
  "foobar": "foobaz"
};
$('#json-renderer').jsonBrowse(data);

Options

The jsonBrowse method accepts an optional options hash as a second argument:

Option	Type	Default	Description
collapsed	boolean	false	All nodes are collapsed.
withQuotes	boolean	false	All JSON keys are surrounded with double quotation marks

Example:

$('#json-renderer').jsonBrowse(data, {collapsed: true, withQuotes: true});