Building the product · Edition No. 7 · 1 Sep 2026

jameskerr/react-arborist

Virtualised React tree with keyboard navigation and filtering — the mobile and accessible view of the subtopic map.

← Building the productRead the whole edition →

3.7k stars · MIT · v3.16.0 (2026-07-25)

Virtualised React tree with keyboard navigation and filtering — the mobile and accessible view of the subtopic map.

Repo detailsthe review · specs · pros & cons · install

What it is

A React tree component: virtualised so it stays fast with thousands of nodes, with keyboard navigation, multi-select, inline renaming, drag-and-drop reordering and built-in filtering. Every row is your own React component.

Why it matters

Your traffic is going to arrive from YouTube, and a large share of YouTube traffic is on a phone. A pan-and-zoom node canvas — React Flow with elkjs — is the right thing on a laptop and close to unusable on a five-inch screen, where the nodes are either too small to read or too large to see two at once. So the honest position is that Grasppy needs two views of the same tree, and the second one is a list. This is the component for it: virtualised, so a 500-message thread does not stall the browser; searchable, which on mobile is faster than any amount of zooming; and keyboard-navigable, which is also the accessible path and the one a screen reader can follow. There is a strategic point underneath the practical one. A map that only works on a desktop makes every video you publish half as effective, because the viewer watching on their phone cannot try the thing you just demonstrated. Fixing that is worth more than most features.

Stars3.7k
LicenceMIT
Latestv3.16.0 (2026-07-25)
Good
  • MIT and actively released — v3.16.0 landed five weeks ago, so this is not one of the many abandoned React tree components
  • Virtualisation and keyboard navigation are the two hard parts, and both are already done
  • Rows are your own components, so the node cards you already built for the canvas can be reused rather than redesigned
Watch for
  • Two views of one data structure means two things to keep in sync. Keep the tree in one place in state and render both from it, or they will drift
  • 238 commits and a small team at Brim — mature for its size, but not a large-community project. Read the source once before depending on it
  • A tree cannot show relationships between branches, which is part of what makes the map view valuable. This is a companion, not a replacement
Install
npm install react-arborist

Get the next edition in your inbox

A dozen repositories, opened and checked. The licence read, the last release dated, and the ones that did not make it named with the reason. It is the half most lists leave out.

No tracking pixels. One click to leave. The archive stays free either way.

We use your address to send the edition and nothing else. Confirm by email, leave in one click. How we handle it.