Stemma is a genealogical browser and viewer/editor for GEDCOM files, the format most genealogy programs export. A file (GEDCOM, JSON or YAML) can be loaded, explored as a chart, a force graph or a 3D scene, edited, and saved back out. It runs entirely in the browser, so the file is never uploaded.

Family tree chart focused on one person, showing parents, grandparents, siblings and children with birth and death years

Focus mode: one person plus relatives out to a chosen distance, with a badge counting the relatives folded away behind each link.

Motivation

Our family tree only existed as a scanned chart and a PDF. The desktop genealogy programs I tried were either too large and complex for what I needed or required a license. I wanted a tool that opens the file, shows its structure and lets me correct errors such as a wrong birth year, so I built it as a single static web page.

A tree with about 160 people is already too large to read as one chart. Most of the work therefore went into the views: a focus mode that reduces the tree to one person and their relatives, a 3D scene that arranges generations along a time axis, and a map that shows where the family lived over a century.

The same tree as a 3D force graph, generations stacked along a vertical time axis

The 3D view arranges people along a time axis and can be orbited. Large trees switch to instanced rendering and a distance cull.

Features

  • Three views of the same data: a classical family tree chart, a force graph, and a 3D scene ordered by time or generation
  • Focus mode, which shows one person and their relatives up to a chosen distance and counts the relatives hidden behind each link
  • A map of all births, deaths and marriages that name a place, with a year range to see how the family moved. Missing coordinates are looked up one at a time and, after confirmation, written back into the records as PLAC/MAP subtrees, so later loads need no lookup
  • Editing of people and families, including adding parents, spouses and children, with a field-level change log of everything changed since the file was opened
  • Merging of another GEDCOM, JSON or YAML file with a review step, and import of plain text and scanned charts through OCR
  • A statistics panel with lifespans, ages at marriage, children per family, births per decade and data coverage. Each figure links to the people behind it
  • In Chromium browsers the last file can be reopened and saved in place. Other browsers fall back to a download
Map of Switzerland with orange circles over cities, sized by how many family events happened there

The map: circles sized by event count, a year slider, and a places list for correcting wrong geocodes.

Tech Stack

  • Vanilla JavaScript as native ES modules, without a framework or a build step
  • D3 for the 2D chart and force simulation, three.js and 3d-force-graph for the 3D scene, both included in the repository so there is no CDN dependency
  • A hand-written GEDCOM parser and serializer that keeps lines it does not understand, so saving does not drop data written by another program
  • OpenStreetMap tiles and Nominatim for the map and Tesseract.js for OCR. These are optional and not contacted on load
  • localStorage for settings and an autosave slot, with all settings declared in one registry that checks stored values against their allowed range
  • Node test suites on top of jsdom

There is no database or session, the file is the state. The parsed tree is held in memory, the change log compares it to the loaded file, and saving serializes it back to GEDCOM. The views are all built on that one structure.

Statistics panel showing counts, average lifespan, family sizes and a births-per-decade histogram

Statistics over the whole tree. Every figure links to the people it was computed from.

Stemma is available at stemma.lucafluri.ch. The source code is on GitHub.