Searchable Tree

Bring your own input — TreeKit filters to matches and keeps the path to reach them visible.

Engineering

Design

Marketing

Show code

const [search, setSearch] = useState("");

<input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search…" />
<TreeKit data={data} searchValue={search} />

Try searching "vue" or "python" — non-matching siblings disappear, but the ancestor chain down to the match stays put. Full API in Search.