10 Best Tree View Plugins In JavaScript And Pure CSS (2020 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 25 2020

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]


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]


jQuery and jQuery UI Dynamic Tree View Plugin - Fancytree

Fancy Tree is a jQuery tree view plugin that allows developers to dynamically render powerful, user-friendly tree view interfaces from HTML lists, JavaScript arrays/objects, and/or JSON data.

jQuery and jQuery UI Dynamic Tree View Plugin - Fancytree

[Demo] [Download]


jQuery Plugin for Tree Widget - jqTree

jqTree is a jQuery based Tree Widget that allows you to create folder tree from JSON data with some fancy animations.

jQuery Plugin for Tree Widget - jqTree

[Demo] [Download]


Simple and Flexible jQuery Tree Grid Plugin - TreeGrid

TreeGrid is a lightweight and flexible jQuery plugin to create a tree grid component that renders hierarchical, nested and flat data in a table.

Simple and Flexible jQuery Tree Grid Plugin - TreeGrid

[Demo] [Download]


Vanilla JS Tree View Plugins:

Collapsible Folder Tree With Pure JavaScript – jslists

jslists is a standalone JavaScript plugin that converts nested HTML lists into a collapsible, multi-level tree list.

Collapsible Folder Tree With Pure JavaScript – jslists

[Demo] [Download]


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]


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]


Pure CSS Tree View Libraries:

Minimalist Tree View In Pure CSS

A minimalist pure CSS tree view for presenting hierarchical data in a tree structure. Hover over a node and it highlights all child nodes.

Minimalist Tree View In Pure CSS

[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: