@rdub/file-tree

Storage-agnostic file browser for React. Plug a Store (S3, R2, GCS, an HTTP proxy, or an in-memory object) into <FileTree> and get directory listings, recursive sizes and a treemap, and viewers for parquet, CSV, JSON / JSONL, markdown, notebooks, SQLite, PDFs, images, video, audio, zip / tar archives, gzip / zstd-compressed files, and a hexdump for anything else.

file-tree.rbw.sh is these docs, browsed with the component itself.

Install

Not on npm yet; pin a build from the dist branch:

pnpm add github:runsascoded/file-tree#dist   # or #<dist-sha>, which is what consumers pin

Quick start

import { FileTree } from '@rdub/file-tree/react'
import { MockStore } from '@rdub/file-tree/stores/mock'

const store = MockStore({
  'README.md': '# hi',
  'data/q1.csv': 'a,b\n1,2\n',
})

<Route path="/files/*" element={<FileTree store={store} routeBase="/files" />} />

Swap MockStore for S3Store, GcsStore, R2Store (in a Worker) or HttpStore (in the browser, against createHandlers on a server). Quick start walks through the R2 + Worker + React setup.

Docs

Stores	The Store interface and every shipped implementation's options
Quick start	R2 + Cloudflare Worker + React; the server handlers
Downloads	Public, presigned, or proxied download URLs
Viewers	Per-format renderers, the viewer registry, customizing one
Tables	Parquet / CSV / in-memory tables: cell hooks, ditto runs, path elision, row groups
Tree sources	Recursive sizes, the treemap, snapshot history and diffs
Navigation	⌘K path search; view state in the URL
Theming	Light/dark: inherits the host page's
Subpath exports	Every entry point and its optional peer
Architecture	Design notes; roadmap

Demos

MockStore (in-memory fixture), HttpStore (Worker proxy over R2), S3 / R2 / GCS (any bucket, from the browser), Elide (clipped cell values), Fold (constant columns stated once), Runs (ditto runs, path trees, row groups), Snapshots (treemap over scan history).

Consumers: ctbk.dev, nj-crashes.com, awair, jc-taxes, disky.