Inspire Tree

A lean, clean, blazing fast javascript tree.

You need only a dom element and a data source:

var tree = new InspireTree({
  target: '.tree',
  data: [] // Array, callback, or promise

Listen for the load event and use the API:

tree.on('model.loaded', function() {

Nodes must include a text property.

[{ text: 'Features' }]

Children are nested:

  text: 'Features',
  children: [{
    text: 'Robust API'


Using NPM:

npm install --save inspire-tree

Using Bower:

bower install --save inspire-tree

Direct Download


We provide a variety of builds tailored to your needs.

"bundled" variants
Bundles core lodash code. This file has zero external dependencies.
"core" variants
Excludes DOM rendering logic, if you plan to use custom rendering.
"min" variants
Minified, production-ready files.
Tree + DOM code, requires lodash.

We also provide production-ready CSS, and our source SCSS for those who wish to custom compile.


The Old Fashioned Way.

<script src="inspire-tree-bundled.min.js"></script>
  new InspireTree( ... );

Using AMD for things like RequireJS

  require(['inspireTree'], function(InspireTree) {
    new InspireTree( ... );

Using CommonJS for things like Webpack, Browserify

var InspireTree = require('inspire-tree');

new InspireTree( ... );

API Overview

API Docs


Each incoming javascript object is wrapped as a TreeNode, which provides all single-node methods.



TreeNodes is an Array-like object which holds multiple TreeNode objects.

We map several TreeNode methods so you can easily invoke them on all nodes in the collection, or recursively.

Expands selected nodes:


Expands selected nodes and their children: