Installation

Add the treeview component to your project

Package Manager
npm 
 
 
pnpm 
 
 
 
yarn 
 
 
 
Verify Installation
 
Verify Import 
 
 
 
Requirements
 
Requirements
 
  • Svelte 5 - Uses modern runes syntax
    •  
  • SvelteKit - For proper module resolution
    •  
  • TypeScript - Optional but recommended
 
Browser Support
 
Modern browsers with ES2020 support. IE11 is not supported.
 
Quick Start
 
Get a basic tree up and running in minutes
 
Live Example
 
  
  
 
Complete Code
 
Basic Usage 
 
 
 
Key Concepts
 
Required Properties
 
  • data - Array of tree nodes
    •  
  • idMember - Property for unique IDs
    •  
  • pathMember - Property for hierarchical paths
    •  
  • displayValueMember - Property to display
 
Path Structure
 
Paths define hierarchy: "1" (root), "1.1" (child), "1.1.1" (grandchild).
						This LTree-inspired structure is efficient and flexible.
 
Basic Configuration
 
Customize behavior and appearance
 
Configured Tree
 
  
  
 
Configuration Code
 
With Configuration 
 
 
 
Configuration Options
 
Common Options
 
  • expandLevel - Auto-expand depth (default: 2)
    •  
  • shouldToggleOnNodeClick - Click to expand/collapse
    •  
  • sortCallback - Custom sorting function
 
Sorting
 
Sort callback receives array of tree nodes with .data property containing your original data object.
 
Custom Data
 
Add any properties to your data objects - they're accessible
						via node.data in callbacks and templates.
 
Next Steps
 
🌳
 
Basic Examples
 
Learn core features and configurations
 View Examples
 
🔍
 
Search & Filter
 
Add search functionality to your trees
 Learn Search
 
🔄
 
Drag & Drop
 
Interactive tree manipulation
 Try Drag & Drop
 
📚
 
API Reference
 
Complete component documentation
 API Docs
 
Common Patterns
 
File System Tree
 
File System Structure 
 
 
 
Navigation Menu
 
Navigation Structure