TreesOverview
Trees uses one path-first model. The model works the same across React, vanilla, and SSR hydration. Selection, focus, search, rename, drag and drop, Git status, and row annotations all use canonical paths.
These docs are guide-first. First, select your runtime. Next, shape the tree data before it reaches the UI. Then add search, item actions, styling, icons, row signals, or SSR when you need them.
Build with agents
Agent skill
Install the
trees agent skill with
the Skills CLI for access to the entire API and
common recipes, regardless of your integration method.
1npx skills add pierrecomputer/pierre --skill treesPrompt an agent
Alternatively, you can copy-paste this prompt to your agent to install the skill and point it to these docs as plain-text.
12345678Set up @pierre/trees in this project.
Install its agent skill first so you have the full API reference:npx skills add pierrecomputer/pierre --skill trees
Then follow that skill to add @pierre/trees.Docs: https://trees.software/docsFull reference for LLMs: https://trees.software/llms-full.txtThe "For Agents" button on the home page copies the same prompt.
Plain-text docs
Our documentation is also available in condensed Markdown text, available in two versions:
- llms.txt is a short index of the sections
- llms-full.txt is the everything in the docs — prose, API tables, and code examples
Copy and paste as needed, or provide the URLs to your agent.
Guides
@pierre/trees gives you one path-first model and two primary runtime entries:
a thin React layer in @pierre/trees/react and the
vanilla class in @pierre/trees.
Choose your integration
1. Path-first identity
Use canonical path strings as the public identity for each item in the tree. For
example, src/components/Button.tsx is more than a label on screen. It is the
value that you read from selection state. It is the path that you focus in code.
It is also the target that you rename or move later.
To learn the shared terms behind this rule, read Shared concepts.
2. React vs Vanilla JS
Use the React entry point when your UI is already in React. For more information, read the getting started with React guide.
1234567import { FileTree, useFileTree } from '@pierre/trees/react';
export function ProjectTree({ paths }: { paths: readonly string[] }) { const { model } = useFileTree({ paths, search: true });
return <FileTree model={model} className="h-96 rounded-lg border" />;}Use the vanilla class in two cases. Use it when your app is not React-based. Also use it when another framework must own the lifecycle around an imperative model. For more information, read getting started with vanilla JS.
1234567891011import { FileTree } from '@pierre/trees';
const fileTree = new FileTree({ paths: ['README.md', 'src/index.ts', 'src/components/Button.tsx'], search: true,});
const container = document.getElementById('project-tree');if (container instanceof HTMLElement) { fileTree.render({ fileTreeContainer: container });}3. Understand tree-shape
Both runtimes use the same tree data. Small examples can start with raw paths.
But real application trees must move to prepared input. This step prevents the
client from doing the shaping work on every load. Read
Shape tree data for fast rendering after
your runtime quickstart. This step applies to both React and vanilla JS.
Get started with React
Use the React entry point when your UI is already in React. The hook creates one stable tree model. The component mounts that model into the host element.
Install @pierre/trees
Use the package root for the vanilla runtime. Use the /react entry point for
the React wrapper.
1234pnpm add @pierre/trees# npm: npm install @pierre/trees# bun: bun add @pierre/trees# yarn: yarn add @pierre/treesCreate the model with useFileTree(...)
useFileTree(...) from @pierre/trees/react creates the model one time for the
component lifetime. Later option changes do not update the model. Update the
model through methods when the tree data or runtime behavior changes after
mount. The methods include resetPaths(...), setComposition(...),
setGitStatus(...), and setIcons(...).
For small trees, pass raw paths. For scalable trees, use preparedInput.
Create preparedInput on the server or another non-UI boundary.