Customizable Hierarchical Tree and Built-in Tree Styles | TreeX

TreeX is a JavaScript library to provides customizable tree styles and built-in tree styles. It helps you to get the tree design by providing the frame icon that allows you to create a vertical tree structure that represents hierarchical data on a web application.

hierarchical tree structure in html, hierarchical tree structure in html css, tree structure in javascript dynamically, create dynamic tree view using javascript, javascript tree view


  • Well-defined data structure and operations for the tree
  • Collapse, expand, multiple-choice, icons
  • Checkbox with tri-state
  • Scalability to customize templates and patterns
  • Default templates

How to make use of it:

1. Import the TreeX.js JavaScript library into the HTML.

<script src="treex.js"></script>

2. Define your personal nodes to be displayed within the tree.

const node1 = {
      data: "JavaScript",
      children: [node2, node3, node4]
const node2 = {
      data: "Vanilla",
      children: []
const node3 = {
      data: "jQuery",
      children: []
const node4 = {
      data: "React",
      children: []
// ...

3. Create a container to hold the tree.

<div id="example"></div>

4. Render a tree contained in the container you simply created.

let tree = treex.Tree.createTree(node1);
let element = treex.TreeX.createTree(tree, { document });
let example = document.querySelector('#example');

5. Create an input filed to filter by way of the info.

<input class="filter" type="text" placeholder="filter"/>
let filterEl = document.querySelector('input.filter');
  filterEl.oninput = () => {
    tree.getNodes().forEach((n) => {

6. Remove a node from the tree.

// remove node 1 

7. Determine whether to hide the basis node.

let element = treex.TreeX.createTree(tree, { document, trueORfalse });

Vertical Hierarchical Tree, TreeX Plugin/Github, dynamic tree structure using jquery, treeview jquery bootstrap, javascript tree visualization

See Demo And Download

Official Website(qwefgh90): Click Here

This superior jQuery/javascript plugin is developed by qwefgh90. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…