10 Best Tree View Plugins In JavaScript And Pure CSS (2021 Update)

by jQueryScript,

What Is Tree View?

Tree view is a UI component that provides a hierarchical view of the lists, folders, files, libraries that allow the user to expand and collapse nodes by click.

The Best Tree View Plugin

In this blog post, you will fid a list of 10 best jQuery, Vanilla JavaScript, and Pure CSS libraries that make it easier to generate the tree view in your web applications. Have fun.

Originally Published Feb 27 2018, updated Jan 06 2021

Table of contents:

jQuery Tree View Plugins:

Powerful Dynamic Tree Plugin With jQuery - jsTree

jsTree is a powerful jQuery plugin used to generate dynamic, interactive tree views (for example folder tree) with support for inline editing, drag'n'drop, checkboxes, keyboard navigation and more.

Powerful Dynamic Tree Plugin With jQuery - jsTree

[Demo] [Download]


Collapsible Tree View With Checkboxes - jQuery hummingbird-treeview

hummingbird-treeview is a jQuery plugin that transforms nested html lists into an expandable, collapsible, searchable, checkable, hierarchical tree structure.

Collapsible Tree View With Checkboxes - jQuery hummingbird-treeview

[Demo] [Download]


jQuery and jQuery UI Dynamic Tree View Plugin - Fancytree

Fancy Tree is a plugin for jQuery and jQuery UI that allows to create dynamic tree view controls with support for persistence, keyboard, checkboxes, drag and drop, and lazy loading.

jQuery and jQuery UI Dynamic Tree View Plugin - Fancytree

[Demo] [Download]


Powerful and Multi-Functional jQuery Folder Tree Plugin - zTree

zTree is a powerful and fast jQuery 'Tree' Plugin for creating Multi-functional Folder Trees with excellent performance and flexible configurations.

Powerful and Multi-Functional jQuery Folder Tree Plugin  - zTree

[Demo] [Download]


Multi-select Treeview With Checkbox - jQuery TreeView

A lightweight, dynamic jQuery treeview plugin which enables the user to select multiple tree nodes with checkboxes.

Multi-select Treeview With Checkbox - jQuery TreeView

[Demo] [Download]


Vanilla JS Tree View Plugins:

Dynamic Tree View With Checkboxes – Treejs

A lightweight tree view plugin that displays hierarchical data in a collapsible, selectable tree structure with checkboxes.

Dynamic Tree View With Checkboxes – Treejs

[Demo] [Download]


Visualize Hierarchical Tree Structures Using D3.js – d3-mitch-tree

The d3-mitch-tree JavaScript library lets you render an interactive diagram from JS objects/arrays to visualize the hierarchical tree structures in an elegant way.

Visualize Hierarchical Tree Structures Using D3.js – d3-mitch-tree

[Demo] [Download]


Simple Folder Tree With JSON And JavaScript – tree.js

A simple, flexible tree library which dynamically renders a tree view of a directory/folder from hierarchical JSON data you provide.

Simple Folder Tree With JSON And JavaScript – tree.js

[Demo] [Download]


Pure CSS Tree View Libraries:

Semantic Hierarchy Tree In Pure CSS – Treeflex

The Treeflex CSS library lets you create a flexible, responsive, semantic, SEO-friendly hierarchy tree from nested HTML lists.

Semantic Hierarchy Tree In Pure CSS – Treeflex

[Demo] [Download]


Pretty Clean Tree Diagram In Pure CSS

A Pure CSS solution to generate a pretty clean tree diagram from nested HTML lists.

Pretty Clean Tree Diagram In Pure CSS

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Tree View on the web & mobile? Check out the jQuery Tree View and JavaScript Tree View sections.

More Resources: