About trees
@pierre/trees is a JavaScript library for building interactive file trees, with core, React, SSR, and web component entry points. It suits developers integrating tree views into web applications.
Key features
- 01Core, React, SSR, and web component APIs
- 02Path-string state and callbacks
- 03Server-side tree preloading
- 04Theme application
- 05Search, rename, drag and drop, and git status
Use cases
- 01Render and update a file tree in React
- 02Build a tree view with vanilla JavaScript
- 03Preload a file tree on the server
- 04Add search and file operations to a tree
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/treesin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/api-core.mdapi-react.mdapi-ssr.mdapi-web-components.mdrecipe-interactions.mdrecipe-react.mdrecipe-ssr.mdrecipe-theme.mdrecipe-vanilla.mdDetails
From the project README@pierre/trees
Use @pierre/trees for an interactive file tree. Public state and callbacks use
path strings.
Install
pnpm add @pierre/trees
Install react and react-dom when the app uses the React entry.
Select an API reference
| Entry | Reference |
|---|---|
@pierre/trees | Core API |
@pierre/trees/react | React API |
@pierre/trees/ssr | SSR API |
@pierre/trees/web-components | Web components API |
Select a recipe
| Task | Recipe |
|---|---|
| Render and update a tree in React | Use React |
| Render and update a tree without React | Use vanilla JavaScript |
| Preload a tree on the server | Use SSR |
| Apply a resolved Shiki or VS Code theme | Apply a theme |
| Configure search, rename, drag and drop, and git status | Add interactions |
Comments
Markdown supported