Trees File Explorer

An IDE-style file tree with virtualized rows, git-status badges, drag-and-drop and keyboard navigation.

Trees File Explorer — an IDE file tree with virtualized rows, git badges, drag-and-drop, search, and keyboard navigation

How to use Trees File Explorer

  1. Browse the demo monorepo tree — click a folder to expand it.
  2. Type in the search box to filter to matching files and their parents.
  3. Click inside the tree and use arrow keys, Enter and F2 to navigate and rename.
  4. Drag any row onto a folder to move it there.
  5. Pick a Shiki theme and a density, then copy the tree or download it as JSON.

Features

  • Path-first model from @pierre/trees: state keyed by canonical paths, not numeric IDs
  • Virtualized rows: only the visible window renders, with overscan
  • Git-status badges in Shiki theme colours: added, modified, deleted, untracked, renamed, ignored
  • Drag-and-drop moves, inline rename, add file/folder and delete
  • Full keyboard navigation: arrows, Enter, F2, with roving focus and aria tree roles
  • Four Shiki/VS Code themes via themeToTreeStyles plus three densities and flatten-empty-dirs

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.