CoffeeScript HTML CSS
Clone or download
yesmeck Merge pull request #31 from aartek/patch-1
Updated "main" property in bower.json
Latest commit 01b1eb8 Jun 13, 2017
Failed to load latest commit information.
dist s Apr 18, 2016
src s Apr 18, 2016
test New feature: toggle when clicks on prop name Apr 13, 2016
.gitignore remove build dir May 17, 2014 Update readme May 16, 2017
bower.json Updated "main" property in bower.json Jun 13, 2017 build min file Feb 11, 2016
jsonview.jquery.json Bump version Nov 9, 2015
package.json build min file Feb 11, 2016

jQuery JSONView

Formats & syntax highlights JSON.

Port of Ben Hollis's JSONView extension for Firefox:

Live demo



var json = {"hey": "guy","anumber": 243,"anobject": {"whoa": "nuts","anarray": [1,2,"thr<h1>ee"], "more":"stuff"},"awesome": true,"bogus": false,"meaning": null, "japanese":"明日がある。", "link": "", "notLink": " is great"};

$(function() {
  // with options
  $("#json-collasped").JSONView(json, { collapsed: true });


jQuery JSONView can be configured using the following options.

  • collapsed - Collapse all nodes when rendering first time, default is false.
  • nl2br - Convert new line to <br> in String, default is false.
  • recursive_collapser - Collapse nodes recursively, default is false.
  • escape - Escape HTML in key, default is true.
  • strict - In strict mode, invalid JSON value type will throw a error, default is false.


jQuery JSONView provide following methods to allow you control JSON nodes, all methods below accept a level argument to perform action on the specify node.

  • jQuery#JSONView('collapse', [level]) - Collapse nodes.
  • jQuery#JSONView('expand', [level]) - Expand nodes.
  • jQuery#JSONView('toggle', [level]) - Toggle nodes.