Beautiful JSON Viewer With Callback Support - jQuery JVC

File Size: 22.5 KB
Views Total: 2023
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Beautiful JSON Viewer With Callback Support - jQuery JVC

JVC is a feature-rich JSON viewer plugin that transforms JSON objects, strings, and arrays into a beautifully structured, collapsible/expandable tree structure.

The plugin also supports callback functions which allow you to define and execute specific actions when a node in the tree is interacted with.

How to use it:

1. Include the jQuery JVC plugin's files on the web page.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery JSON-viewer -->
<script src="/path/to/jvc.js"></script>
<link rel=stylesheet href="/path/to/jvc.css"/>

2. Create an empty container in which the plugin will render the JSON tree.

<div id="example"></div>

3. Prepare your JVS object as follows:

json = {
  // test object
  "testObject": {
    "null": null,
    "true": true,
    "false": false,
    "undefined": undefined,
    "text": "\"text&nbsp;'text'\t`text`<br>\ntext\"",
    "url": "",
    "array": [0, 0.1, 2, [], {}],
    "function": function(a,b){return a+b},
    "arrowFunction": (a,b)=>{return a-b}
  // callbacks
  "ajaxCallback": {"jvc-cb": "/file.json"},
  "slowCallback": {"jvc-cb": "/slow"},
  "failCallback": {"jvc-cb": "/fail"},
  "longCallback": {"jvc-cb": "/long"}

4. Initialize the plugin on the JSON tree container and specify the callback function.

$('#example').JVC(json, {
  callback: jsonAjax

// callback function
var jsonAjax=function(event, element, data, cb){
    if(data=='/slow')return setTimeout(cb, 10*1000, ['json-slow']);
    var ajax=data;
    if(typeof data==='string')var ajax={url:data,dataType:"json"};
    .fail(function(xhr, status, err){
      cb({"jvc-fail": status+' ('+(err? err :xhr.status)+')'})

5. Print strings & arrays.

// print string
$('#example').JVC("Hello\n\tworld!<br>\n", {
  // options here

// print array
var myArray = [1, {"a": 3, "<br>\n": "<br>\n"}];
$('#example').JVC(myArray, {
  key: "obj", 
  withQuotes: true, 
  collapsed: true, 
  showJSON: true

6. Available options.

$('#example').JVC(json, {
  key: undefined, // // "str" or "obj"
  invertColors: false,
  withLinks: true,
  bigNumbers: false,
  withQuotes: false,
  withFunctions: true,
  collapsed: false,
  showConf: false,
  showJSON: false,
  debug: console.debug,
  error: console.error,
  callback: null,
  onChange: null

7. Setters, getters, and triggers.

// Tab-Size (spaces)

// Font-Size

// Font-Family

// no-style, jvc-default, night-owl, etc.

// JVC Getters:
var text=JVC.getJSON($('#example').get(0));

// JVC Triggers:
$('#example').on('JVC:change',function(doc){console.log(JVC.getJSON(doc))})  }



v2.0.0 (2023-07-26)

  • jQuery JSON Viewer With Callback Support
  • CSS update


  • Update CSS


  • Added Setters and Getters

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