File Tree Explorer
An IDE-grade file explorer: a keyboard-complete ARIA tree with indent guides that light up the active branch, spring chevrons, height-animated folders, per-type file glyphs, git status letters, a selection highlight that slides between rows, F2 inline rename, and a breadcrumb plus code preview pane.
DOM + CSS0 deps1 file · 44 KB TSXreduced-motion aware
Props
"use client";
/*
* FileTreeExplorer: an IDE-grade file explorer.
*
* A sidebar tree (WAI-ARIA tree: roving tabindex, arrows, Home/End, type-ahead,
* F2 rename) beside a preview pane (tab, breadcrumb, syntax-tinted code, an image
* placeholder, or a folder listing). One selection highlight slides between rows on
* a spring and follows rows while folders open and close.
*/
import {
createContext,
useContext,
useEffect,
useMemo,
useRef,
useState,
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
The tree is nested role=tree / treeitem / group markup with a roving tabindex: one row is the Tab stop and the active row is also the selection, so arrowing through the list updates the preview as you go. Folders open by animating grid-template-rows between 0fr and 1fr, which gives a true height animation with no measuring, and a collapsed group is visibility:hidden so its rows leave both the tab order and the accessibility tree. The selection highlight is a single element driven by a small spring in a requestAnimationFrame loop: every frame it re-reads the active row's position from the DOM, so it slides on selection changes and keeps tracking the row while a folder above it opens or closes. Indent guides are drawn per row, one segment per ancestor, and the ancestors of the active node light up. Keys: arrows, Home/End, Enter/Space, * to open siblings, type-ahead on the first letters, F2 or double-click to rename inline with validation (empty, slashes, duplicates). Git letters sit in the right gutter and folders show a rolled-up dot. Below 672px of container width the preview moves behind a Files / Preview toggle. Pass your own tree; there is no virtualisation, so very large trees should be windowed.
Curator’s note
Rebuilt in October as a full explorer: it started as a bare roving-tabindex list and now carries the details people expect from an editor sidebar.
