trees

Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag and drop, icons, git status, and themes.

Install
npx skills add 'https://github.com/pierrecomputer/pierre/tree/main/skills/trees'
Download bundle ↓
main · 1831817Scanned 2026-09-15

Contributors

GitHub-linked commit authors for this SKILL.md at the saved revision. Co-authors and history before file renames are not included.

File history ↗
View on GitHub
← Back to SKILL.md

Recipe: add file tree interactions

Enable only the interactions that the product exposes:

const tree = new FileTree({
  paths,
  search: true,
  renaming: {
    onRename(event) {
      renamePath(event.sourcePath, event.destinationPath);
    },
  },
  dragAndDrop: {
    canDrop({ target }) {
      return target.kind === 'directory';
    },
    onDropComplete(event) {
      saveMove(event);
    },
  },
  gitStatus,
});

Use openSearch() to open search from an application command. Use startRenaming(path) to start rename from a menu. Use setGitStatus() or applyGitStatusPatch() after repository state changes.

Directory input paths end with /. File input paths do not end with /.

Referenced from SKILL.md