Beautiful, interactive family trees.

A small TypeScript library that turns a tree of people and partnerships into a living, zoomable SVG โ€” with animated transitions, search, and relationship highlighting.

โ— live โ€” drag, zoom, click

Quick start

Up and running in seconds.

pnpm i jsr:@phinnaeus/cedrine

import { createFamilyTree } from '@phinnaeus/cedrine';
import '@phinnaeus/cedrine/styles';

const tree = createFamilyTree(container, {
  data,
  renderCard: (p) => `<strong>${p.first_name} ${p.last_name}</strong>`,
});

Features

Everything in a few KB of d3.

Examples

Hosted, interactive demos.

Why "Cedrine"

cedrine| หˆsฤ“-drฤ“n |

adjective

of or relating to the cedar tree or its wood.

named for the cedars of Lebanon, where my family originally came from.