Tree-style Expanding JS Object Viewer/Editor In jQuery - Expando

Expando is a tiny jQuery-powered JS Object Viewer/Editor that helps developers creates a very nice expandable tree hierarchy of your data.

With this plugin you can create an editable tree with collapsible branches to easily browse/edit JavaScript objects and their properties.

See Also:

• 10 Best JSON Viewer Tools To Format JSON Strings

How to use it:

1. Load the necessary jQuery and underscore.js libraries in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/underscore-min.js"></script>

2. Download and load the Expando plugin's files.

<link href="/path/to/css/expando.css" rel="stylesheet" />
<script src="/path/to/js/expando.js"></script>

3. Create an empty DIV to hold the JS Object Viewer.

<div id="expando"></div>

4. Define your data to be present in the tree.

var obj = {
    "?": "xml version=\"1.0\" encoding=\"UTF-8\"",
    "eddo:root": {
        "@xmlns:eddo": "ns:eddo",
        "child1": "text",
        "!": "-- you cant see me --",
        "child": {
            "grandchild": [
                "one",
                "two",
                "gggbffg"
            ]
        },
        "child3": {
            "@a2": "v2",
            "#": "complex text"
        }
    }
};

5. Call the function on the DIV container and the plugin will do the rest.

$(function(){
  $('#expando').expando(obj);
});

6. Return an object from the JS Object Viewer.

$('#expando').collapso();

7. Override the default collapse/expand/checkbox icons.

const image_base = 'image/';
const image_closed   = image_base + 'expandoClosed.png';
const image_open     = image_base + 'expandoOpen.png';
const image_property = image_base + 'property.png';
const image_blank    = image_base + 'blank.png';
const image_todo     = image_base + 'taskTodoIncomplete.png';
const image_done     = image_base + 'taskTodoComplete.png';

---

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