jQuery Script Blog

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

by jQueryScript,
tree view

What Is Tree View?

A Tree View is a user interface component that displays hierarchical data. Users can expand or collapse parent nodes to reveal or hide child items. It is common in file browsers, navigation menus, and organization charts.

The Best Tree View Plugins

You use a JavaScript Tree View to organize hierarchical data into user-friendly structures. jQuery plugins remain a strong choice for their maturity and extensive feature sets. Modern Vanilla JavaScript and CSS libraries offer excellent alternatives if you require zero dependencies or faster rendering.

You do not need to limit yourself to a single ecosystem. This post covers the best solutions for both approaches. You will find 5 robust jQuery plugins for legacy or feature-heavy projects and 5 lightweight Vanilla JS libraries for modern applications.

We have updated this collection to reflect the latest standards in 2026. You can explore the top 10 options below to decide which one fits your specific requirements.

Originally Published Feb 27 2018, updated Dec 10 2025

Table of contents:

jQuery Tree View Plugins:

Dynamic Collapsible Tree View For Bootstrap 5

This plugin upgrades the older jQuery BSTreeView. It integrates directly with the Bootstrap 5 framework to render collapsible lists.

Key Features:

  • Supports Bootstrap 5 styling.
  • Expands and collapses nodes dynamically.
  • Renders complex hierarchical structures.

Best For:

  • Projects already using Bootstrap 5.
  • Developers migrating legacy jQuery Bootstrap trees.

Dynamic Collapsible Tree View For Bootstrap 5

[Demo] [Download]

jQuery and jQuery UI Dynamic Tree View Plugin - Fancytree

Fancytree serves as a heavy-duty successor to the Dynatree plugin. It handles complex requirements like persistence and lazy loading for large datasets.

Key Features:

  • Supports drag and drop operations.
  • Includes checkbox selection for nodes.
  • Loads data lazily via AJAX.
  • Supports inline editing and filtering.
  • Provides WAI-ARIA accessibility support.

Best For:

  • Enterprise applications requiring keyboard navigation.
  • Complex file management interfaces.

jQuery and jQuery UI Dynamic Tree View Plugin - Fancytree

[Demo] [Download]

Powerful Dynamic Tree Plugin With jQuery - jsTree

jsTree defines the standard for jQuery-based tree components. It accepts data in HTML or JSON formats and provides an extensive API for interaction.

Key Features:

  • Accepts HTML and JSON data sources.
  • Supports AJAX data fetching.
  • Includes drag-and-drop functionality.
  • Allows inline editing of nodes.
  • Supports themes and custom icons.

Best For:

  • Legacy projects requiring a stable, documented solution.
  • Applications needing search and filter capabilities.

Powerful Dynamic Tree Plugin With jQuery - jsTree

[Demo] [Download]

jQuery Plugin for Tree Widget - jqTree

jqTree generates folder trees specifically from JSON data. It prioritizes performance and includes built-in state saving.

Key Features:

  • Loads JSON from local sources or servers.
  • Supports drag and drop.
  • Saves tree state (open/closed nodes) automatically.
  • Supports keyboard navigation.
  • Implements lazy loading for performance.

Best For:

  • Applications relying strictly on JSON data.
  • Interfaces requiring persistent user states.

jQuery Plugin for Tree Widget - jqTree

[Demo] [Download]

Windows File Explorer Like Folder Tree In jQuery

This plugin replicates the visual style and behavior of the Windows File Explorer. It fetches folder information via AJAX to allow directory browsing.

Key Features:

  • Fetches file data asynchronously.
  • Supports custom connector scripts.
  • Includes a resizable column view.

Best For:

  • Intranets mimicking desktop environments.
  • File system browsers.

Windows File Explorer Like Folder Tree In jQuery

[Demo] [Download]

Vanilla JS Tree View Plugins:

Dynamic Tree View With Checkboxes – Treejs

Treejs is a lightweight Vanilla JavaScript library. It renders hierarchical data with built-in checkbox support and zero dependencies.

Key Features:

  • Works with Vanilla JS, React, and Vue.
  • Includes an event system for state changes.
  • Fetches remote data via GET or POST.
  • Supports node selection via checkboxes.

Best For:

  • Modern frameworks (React/Vue) needing a framework-agnostic component.
  • Forms requiring multi-select nested categories.

Dynamic Tree View With Checkboxes – Treejs

Demo Download

Render Family/Organization Tree From JSON – treeMaker

A JavaScript library that renders a tree-like diagram from JSON or JS objects to show the structure and the relationship in an organization/agency/family.

treeMaker converts JSON or JavaScript objects into visual diagrams. It focuses on organizational charts and family trees rather than file folders.

Key Features:

  • Renders diagrams from JSON.
  • Uses plain JavaScript, CSS, and HTML.
  • Requires no Canvas or SVG elements.

Best For:

  • Organizational charts.
  • Family tree visualizations.

Render Family Organization Tree From JSON - treeMaker

Demo Download

Simple Folder Tree With JSON And JavaScript – tree.js

This library renders a directory view dynamically from JSON data. It offers a flexible structure for simple folder visualization.

Key Features:

  • Renders from hierarchical JSON.
  • Lightweight implementation.
  • Flexible styling options.

Best For:

  • Simple directory listings.
  • Lightweight projects.

Simple Folder Tree With JSON And JavaScript – tree.js

 

Demo Download

Full Featured File/Folder Tree In Pure JavaScript – TreeJS

TreeJS functions as a standalone library that mimics the Windows File Browser. It provides API methods to manage the tree structure programmatically.

Key Features:

  • Operates without third-party dependencies.
  • Mimics Windows File Browser behavior.
  • Provides API for tree management.

Best For:

  • Standalone file managers.
  • Projects requiring a native-feeling file tree.

Full Featued File/Folder Tree In Pure JavaScript – TreeJS

Demo Download

Pure Javascript TreeView Component – aimaraJS

aimaraJS renders an editable and robust tree structure. It includes advanced context menus and custom event handling.

Key Features:

  • Supports custom context menus.
  • Allows node editing.
  • Supports custom node icons.
  • Expands and collapses nodes programmatically.

Best For:

  • Admin dashboards.
  • Applications needing right-click context actions.

Pure Javascript TreeView Component – aimaraJS

[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

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]

Conclusion:

There are various types of tree view plugins in JavaScript and CSS available for us to learn and implement for our projects. However the ultimate decision regarding which plugin to use remains upon our need and usage. Hope this article helps you to find the best plugin according to your project requirement.

If you know any more tree views in JavaScript, CSS or jQuery then please do mention them in the comment section as always!

Looking for more jQuery plugins or JavaScript libraries to create awesome Tree Views on the web & mobile? See jQuery Tree View and JavaScript Tree View sections for more details.

More Resources: