Tree

A hierarchical list with expand, collapse, selection and lazy children.

Import
import { Tree } from '@texuli/primitives/tree';
Pattern
Tree view (WAI-ARIA APG)
Size budget
5.0 KiB gzip for @texuli/primitives/tree
Reference
packages/primitives/docs/prim-tree.md

Live demo

Loading the Tree demo…

Anatomy

Tree anatomy: each box holds the parts inside it.
  • Tree.Rootrows from data

Behavior checks

tests/behavior/scenarios/tree.spec.ts checks the Tree scenario in the browser (4 checks) on Chromium, WebKit and the Pixel 7.

  • tree exposes the APG pattern and supports keyboard expansion, navigation and selection
  • tree supports pointer selection and lazy child loading
  • tree supports touch selection on Pixel 7
  • tree remains axe-clean and virtualizes long lists

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 5.0 KiB gzip for @texuli/primitives/tree (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).