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

File Size: 29.1 KB
Views Total: 2025
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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": [
        "child3": {
            "@a2": "v2",
            "#": "complex text"

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


6. Return an object from the JS Object Viewer.


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.