a lightweight tree widget, compatible with originaljs/react/vue, 9.6kb size for tree.min.js&tree.min.css without gzip.

Version: 1.8.3 Updated: 11/13/2019

By: daweilv License: MIT

Downloads Last 30 Days: 1k


npm i @widgetjs/tree
yarn add @widgetjs/tree

Repository: https://github.com/daweilv/treejs


bundle.run: https://bundle.run/@widgetjs/tree

jsDelivr: https://cdn.jsdelivr.net/npm/@widgetjs/tree

unpkg: https://unpkg.com/@widgetjs/tree


NPM version David deps npm downloads gzip size

A lightweight flexible tree widget.


  • 🚀 Compatible with VanillaJS / React / Vue
  • ✂️ Tiny size after gzip
  • 🎊 Zero dependence
  • 🎉 Events supported


Online Demo



npm i -S @widgetjs/tree


React/Vue usage

import Tree from '@widgetjs/tree';

VanillaJS usage

<script src="path/to/tree.min.js"></script>


new Tree(treeContainer, parameters), returns initialized Tree instance.

  • treeContainer - string - css selector of the tree container(document.querySelector inside).
  • parameters - object - options of the tree.

Basic Node Format

  "id": "unique_ID",
  "text": "node-0",
  "attributes": {},
  "children": [],
  "check": true
Name Type Description Required
id any unique id Required
text string tree node label Required
attributes object custom attributes of the node Optional
children array children of current node Optional
check boolean whether the node is selected or not Optional


const myTree = new Tree('#container', {
  url: '/api/treeJson',


Name Type Description
url string a URL to retrieve remote data,or use data
method string http method(GET/POST), default 'GET'
data array the json tree data
values array ids which you want to check
closeDepth integer expand level
beforeLoad function invoke before the tree load data. Format raw data in this function.
loaded function invoke after the tree load data
onChange function invoke when the node status change


const treeData = [
    id: '0',
    text: 'node-0',
    children: [
        id: '0-0',
        text: 'node-0-0',
        children: [
          {id: '0-0-0', text: 'node-0-0-0'},
          {id: '0-0-1', text: 'node-0-0-1'},
          {id: '0-0-2', text: 'node-0-0-2'},
      {id: '0-1', text: 'node-0-1'},
    id: '1',
    text: 'node-1',
    children: [{id: '1-0', text: 'node-1-0'}, {id: '1-1', text: 'node-1-1'}],

const myTree = new Tree('#container', {
  data: treeData,
const myTree = new Tree('#container', {
  url: '/api/treeJson',
  method: 'GET',

  values: ['1', '2', '3'],

  // only expand level 1 node
  closeDepth: 1,

  beforeLoad: function(rawData) {
    function formatData() {
      // do some format
    return formatData(rawData);

  loaded: function() {
    // do something or set values after Tree loaded callback
    // do not use arrow function `()=>` , if you use `this`, use function instead.
    // this context bind current tree instance
    this.values = ['0-1'];

  onChange: function() {


Property Type Operation Description
values array get/set selected values.
selectedNodes array get selected nodes data with attributes.
disables array get/set get disabled values, or set disable nodes.
disabledNodes array get disabled nodes data with attributes.


// get
const values = myTree.values;

// set
tree.values = ['0-1'];


// get
const selectedNodes = myTree.selectedNodes;


// get
const disables = myTree.disables;

// set
tree.disables = ['0-1'];


// get
const disabledNodes = myTree.disabledNodes;


Event Parameters Description
beforeLoad current data invoke before the tree load data
loaded null invoke after the tree load data
onChange null invoke when the node status change



Like @widgetjs/tree? just 🌟 star the project! Create issues if you find bug.

Categories: Vue js