Tree view · folders
A tree with folders that open smoothly, indent guides, single, multiple or checkbox selection, children loaded on demand, a filter that opens what it finds, drag-and-drop moves, inline rename, and the full tree keyboard.
A file explorer · drag to move · F2 or double-click renames · node_modules loads on demand · type to jump
src
5
assets
node_modules
package.json
README.md
Selected
—
Opened (Enter / double-click)
—
Keys: ↑ ↓ · → opens / goes in · ← closes / goes up · * opens the siblings · Home / End · letters jump.
Checkboxes · a folder ticks its whole branch, half-ticked when some are
Content
Read posts
Write posts
Publish
Delete
People
Invite members
Change roles
Billing
See invoices
Change plan
Settings
Integrations
Security
Danger zone
0 permissions granted
Usage
import { signal } from "./index.js";import { Tree } from "./components/tree.js"; const files = signal([{ id: "src", label: "src", children: [{ id: "app", label: "app.js", meta: "3 KB" }] }, { id: "nm", label: "node_modules", hasChildren: true }]); // loaded when openedTree({ data: files, filter: query, draggable: true, load: (node) => fetch("/ls?dir=" + node.id).then((r) => r.json()), onRename: (node, label) => api.rename(node.id, label), // F2 / double-click onMove: ({ node, parent, index }) => api.move(node.id, parent?.id, index), onActivate: (node) => open(node) }) // Enter / double-click Tree({ data: perms, selection: "checkbox", checked: signal(new Set()), defaultExpanded: true })// selection: "single" | "multiple" (Ctrl / Shift) | "checkbox" | "none"