@memoir/tree

Family trees and org charts for React apps.<br>@memoir/tree renders subject-centered family neighborhoods from your profiles, your relationship facts, and your card component.<br>Read the docsSee the renderer<br>Built for React 19By Memoir Labs

Generation 1Grandparent<br>Generation 2Parent<br>Generation 2Parent<br>Generation 3Child

Subject-centered<br>Start with one person and render the relatives that matter around them.

Bring your own cards<br>Use your app's data and card component instead of fighting a fixed UI.

Measured layout<br>Cards can be different sizes while the tree keeps relationships readable.

Drop it in. Pass your data. Ship the tree.<br>The package owns the measured layout, connectors, and pan surface. Your app owns the data, profile UI, permissions, and mutations.

Install<br>bun add @memoir/tree<br>import { FamilyTree, rel } from "@memoir/tree";

const people = {<br>maren: { id: "maren", name: "Maren" },<br>june: { id: "june", name: "June" },<br>ellis: { id: "ellis", name: "Ellis" },<br>noa: { id: "noa", name: "Noa" },<br>sol: { id: "sol", name: "Sol" },<br>river: { id: "river", name: "River" },<br>};

const relationships = [<br>rel.parents("june", ["maren"]),<br>rel.parents("noa", ["june", "ellis"]),<br>rel.partner("noa", "sol", { relation: "spouse" }),<br>rel.children(["noa", "sol"], ["river"]),<br>];

export function Tree() {<br>return (<br>FamilyTree<br>people={people}<br>relationships={relationships}<br>subject="noa"<br>/><br>);<br>Maren grandparentgrandparent

Ellis parentparent

June parentparent

Noa subjectroot node

Sol spousepartner

River childchild