Family trees and org charts for React apps.

@memoir/tree

@memoir/tree renders subject-centered family neighborhoods from your profiles, your relationship facts, and your card component.

Built for React 19By Memoir Labs

Generation 1Grandparent

Generation 2Parent

Generation 3Child

Subject-centered

Start with one person and render the relatives that matter around them.

Bring your own cards

Use your app's data and card component instead of fighting a fixed UI.

Measured layout

Cards can be different sizes while the tree keeps relationships readable.

Drop it in. Pass your data. Ship the tree.

The package owns the measured layout, connectors, and pan surface. Your app owns the data, profile UI, permissions, and mutations.

import { FamilyTree, rel } from "@memoir/tree";

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

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

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

Marengrandparentgrandparent