Getting Started
Install @memoir/tree and render your first family tree.
@memoir/tree provides React primitives for family trees.
The package keeps persistence, routing, styling, auth, and data fetching in the host app. The library focuses on:
- Normalizing relationship facts.
- Computing subject-relative family labels.
- Measuring custom cards.
- Rendering automatic layouts and SVG edges.
Install
bunx jsr add @memoir/treeMinimal Family Tree
import { FamilyTree, rel } from "@memoir/tree";
import type { FamilyCardProps } from "@memoir/tree";
const people = {
alex: { id: "alex", name: "Alex" },
morgan: { id: "morgan", name: "Morgan" },
casey: { id: "casey", name: "Casey" },
jordan: { id: "jordan", name: "Jordan" },
riley: { id: "riley", name: "Riley" },
};
const relationships = [
rel.parents("alex", ["morgan", "casey"]),
rel.partner("alex", "jordan"),
rel.children(["alex", "jordan"], ["riley"]),
];
function PersonCard({ person, relation, ...props }: FamilyCardProps<(typeof people)[string]>) {
return (
<article {...props}>
<strong>{person.name}</strong>
<small>{relation.label}</small>
</article>
);
}
export function Page() {
return <FamilyTree subject="alex" people={people} relationships={relationships} card={PersonCard} />;
}You can also omit card to use the built-in default card:
export function Page() {
return <FamilyTree subject="alex" people={people} relationships={relationships} />;
}Styling
Use normal CSS against stable data attributes:
[data-family-card] {
border: 1px solid currentColor;
border-radius: 16px;
padding: 12px 16px;
}
[data-family-card][data-relation="self"] {
border-width: 2px;
}
[data-family-edge] {
color: #94a3b8;
}