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.

Get started Browse examples

● 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.

Zoom & pan — fit-to-view, focus on any person, min/max scale limits.
Animated transitions — update the data and the layout morphs smoothly.
Search — find people by name and highlight matches.
Relationship paths — highlight the line connecting any two people.
Custom cards — render each person with your own HTML.
Read-only mode — a static option for embeds and displays.

Examples

Hosted, interactive demos.

Basicfocus controls Staggeredupper/lower split Mirroredroot centered European royalty459 people See all examples →

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.