Toolkit · Interpretation
Family Tree
An interactive genealogical tree that lays itself out.
The problem
Family trees are usually published as a flat image, which means they can't be searched, can't be read on a phone, and have to be redrawn by a designer every time a fact changes.
How it works
People and relationships go in as data; the widget computes positions at runtime. Adding a person requires no coordinate work. Each person opens a sourced biography.
Worth knowing
The deploy is the part I'd copy. The workflow renders the entire tree in a headless browser and confirms every person places without overlapping and every biography opens — and only then publishes. A broken layout never reaches the live domain.
There's also a documented browser quirk worth knowing if you build shadow-DOM widgets: font-face rules are injected into the document head rather than the shadow root, because Chromium ignores @font-face declared inside a shadow tree.
The provenance work behind the data caught the Library about to publish the wrong death date for Roosevelt's own daughter, and recovered a grandchild the published books counted but never named.
Using it at your organization
- Replace the people and families data structures with your own.
- Layout is computed, so you never position anyone by hand.
- Keep the headless render check — it is the reason the tree never ships broken.
Stack: Vanilla JavaScript · shadow DOM · GitHub Actions render gate
Licence: MIT — use, modify and redistribute freely, commercially or not.
Hosting: static files; no server required.
Related tools
Built for the Theodore Roosevelt Presidential Library and released for anyone to use. See all 19 tools, or read how the whole system is built.