Svelte Treeview Component

Hierarchical tree component from @keenmate/svelte-treeview — a Svelte 5 library with keyboard navigation, multi-select, checkboxes, drag-and-drop, and customizable styling via --stv-* CSS variables.

Demo: a small Svelte 5 app mounted into the page below. Theme switching affects both the pure-admin chrome (form controls, cards) and the treeview's own surfaces where its --stv-* tokens fall back to --base-* / --pa-* tokens.

Note: unlike web-multiselect, this is NOT a custom element — it requires a Svelte runtime. The demo bundles a small mount app via Vite; consumers in production would import <Tree /> directly into their own Svelte app.

Interactive Demo

Drag & Drop Between Two Trees

Two independent trees. Dragging a node within a tree reorders it (a move, auto-handled by the library); dragging a node across to the other tree copies its whole subtree in (placed by the demo in onNodeDrop via copyNodeWithDescendants, since the library can't move nodes that live in another tree). Multi-select drag, per-node pinning, and the built-in Ctrl/Cmd + C / X / V clipboard (a shared singleton across both trees) are all wired up.

Type / for commands, : to search a category, or just start typing

Settings

Press Ctrl+K to preview the palette.
Body text size. All elements scale proportionally.

John Doe

Administrator
  • Dashboard
  • Forms
  • Tables
  • Data Grid