@keenmate/web-treeview

A framework-agnostic treeview web component with drag & drop, search, context menus, and flexible LTree data structure. Works with any framework or vanilla JS.

🚀 Get Started 🌳 View Examples GitHub

🌐

Framework Agnostic

Native web component that works with any framework — React, Vue, Svelte, Angular, or vanilla JS

🌳

LTree Structure

Path-based hierarchical data structure inspired by PostgreSQL LTree for efficiency

🔍

FlexSearch Integration

Built-in search with async indexing and node filtering

🔄

Drag & Drop

Reorder nodes with drop zones, cross-tree transfers, and validation callbacks

🎨

125+ CSS Variables

Full theming control with CSS custom properties and --base variable fallbacks

⚡

Virtual Scrolling

Flat and virtual rendering modes for optimal performance with large datasets

Quick Installation

Get started in seconds

Package Manager

npm

pnpm

Import

ES Module (registers <web-treeview>)

Usage

Simple to Use

Import the package to register the <web-treeview> custom element, then use it in any HTML page.

Zero Framework Dependencies

Built with vanilla TypeScript. No React, Vue, or Svelte required. Works everywhere custom elements are supported.

Shadow DOM Encapsulation

Styles are encapsulated in Shadow DOM. Theme via CSS custom properties on the host element.

Example Usage

Basic Tree

Advanced Tree

🌐

Framework Agnostic

🔍

Search & Filter

🔄

Drag & Drop

⚡

Virtual Scrolling