You are here

Example of simple jsTree with static JSON data

Submitted by Asif Nowaj, Last Modified on 2019-12-10

If you want to create a tree using JavaScript and HTML, you can use jsTree library for that. This is actually jQuery plugin that provides flexible and interaction tree view. This library is absolutely free to be used for your work. This library is free and can be configured quickly and without any difficulty as per your requirement. You can also use different theme for it to give nice look. The most important feature is you can extend or customise library if you face any limitation. If you are looking for jquery treeview json example you are at the right place.

Different features of jsTree as an jstree example
This has multiple features that worth look at like

For details of all available APIs, you can go though

How to create jsTree with JSON data
I’ll explain how to create a basic tree view using jsTree library or build jquery treeview json example. For data supply, static JSON data will be used here for simplicity.

To get started, first you need to download the jsTree library and use CDNJS. I’ll be using CDNJS in my jstree example.

We need to include the following in the html page.

  • jsTree theme css
  • HTML container element
  • jQuery [1.9.0 or greater]
  • jsTree js
  • Initializer of the tree

To populate the tree with a JSON object, we need to use $ .

My example of the jquery treeview json example simple jsTree example is below. I have highlighted the important piece of information that is tricky.
Simple JSTree

Code file is below, so that you copy it and can be tested.

<!DOCTYPE html>
<html lang="en" xmlns="">
    <meta charset="utf-8" />
    <title>Simple jsTree</title>
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },


        function createJSTree(jsondata) {            
                'core': {
                    'data': jsondata
    <div id="SimpleJSTree"></div>

The outcome of jsTree example will as like below
Simple jsTree Outcome

If you want to know how to create a jsTree using dynamic JSON data , please go through this article. You can find many more example code of jstree feature at the right hand side bar.

Discussion or Comment

If you have anything in mind to share, please bring it in the discussion forum here.