What is jsTree?

jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.

jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.

Getting Started - everything at a glance

Include a jsTree theme

Themes can be autloaded too, but it is best for performance to include the CSS file.

<link rel="stylesheet" href="dist/themes/default/style.min.css" />

Setup a container

This is the element where you want the tree to appear, a <div> is enough. This example has a nested <ul> as there is no other data source configured (such as JSON).

<div id="jstree_demo_div"></div>

Include jQuery

jsTree requires 1.9.0 or greater in your webpage.

<script src="dist/libs/jquery.js"></script>

Include jsTree

For production include the minified version: dist/jstree.min.js, there is a development version too: dist/jstree.js

<script src="dist/jstree.min.js"></script>

Create an instance

Once the DOM is ready you can start creating jstree instances.

$(function () { $('#jstree_demo_div').jstree(); });

Listen for events

jsTree uses events to notify you when something changes while users (or you) interact with the tree. So binding to jstree events is as easy binding to a click. There is a list of events and what information they provide in the API documentation.