I Built a Free Family Tree App — Here’s Everything That Went Into It
There's a moment at every family gathering where someone pulls out a piece of paper — or worse, a badly formatted Excel sheet — and tries to explain how everyone is related. Cousins twice removed, step-siblings, blended families. It becomes a mess fast.
I wanted something better. Something visual, private, and free. So I built it.
What Is It?
Build My Family is a browser-based family tree builder. You open the link, start adding people, drag them around a canvas, draw connections between them, and your family history takes shape right in front of you. No account needed, no subscription, no data going anywhere near a server.
Everything is stored locally on your device. That's a deliberate choice, not a limitation.
Try it here: https://legacy-app-ten.vercel.app
Why Privacy-First?
The big genealogy platforms are powerful, but they come with a cost beyond the subscription fee. Your family's data lives on their servers, feeds their databases, and you're locked into their ecosystem.
For a lot of people, that's fine. But for a lot of others, it isn't. Family history includes sensitive details — health conditions, estrangements, births out of wedlock, immigration records. That information belongs to the family, not a platform.
With Build My Family, none of that leaves your browser. Your tree is saved in your device's local storage, and you can export it as a file to back it up yourself.
What Can You Actually Do With It?
Build your tree visually. The canvas is drag-and-drop on a dotted grid. Add a member, place them on the canvas, connect them to others. Parent-child relationships and spousal unions are both supported — spouses are linked with dashed red lines, parent-child relationships with curved connectors. You can pan, zoom, and rearrange freely. There's also an Auto-Structure button that tidies the whole layout in one click.
Fan chart view. Switch to Fan mode to see your ancestry in a radial layout. The root couple appears in the center circle, with each generation fanning outward in colour-coded rings. It's exactly the kind of chart you'd see on a genealogy poster. You can export the fan chart as PNG or SVG directly from the fan view toolbar.
Export in multiple formats. From the Export button in the toolbar you get: PNG Image (portrait or landscape), Print/PDF (portrait or landscape), JSON Backup for saving a project file, and GEDCOM Export compatible with Ancestry, FamilySearch, and MyHeritage.
Full member profiles. Each person can have a first name, last name, gender, birth date, birthplace, a photo, a biography, wedding date, and wedding place. There's also a card colour picker (with a reset button) and a DECEASED toggle that visually distinguishes those who've passed. The editor panel slides in from the left side and stays out of the way while you work.
Works on mobile. Pinch to zoom, swipe to dismiss the editor panel, responsive layout throughout. It wasn't an afterthought — it was built in from the start.
The first version was functional but rough. The kind of rough where things work but nothing feels considered. So I ran four structured rounds of improvements.
Round 1 was about basics that should've been there from day one: clicking a card opens the editor (it didn't), save status labels were confusing, and the delete button had no confirmation step. One accidental click could wipe a person. Fixed.
Round 2 focused on accessibility and information density. Text was too small in places. The Rewire Lineage section was cluttering the editor — it got moved into a collapsible accordion. Aria-labels were added to every icon-only button.
Round 3 was about interactivity and polish. Tree nodes became keyboard-navigable. The dashboard tells you how many projects you have. When the canvas is empty, a hint overlay explains how to pan and zoom.
Round 4 tackled mobile. Pinch-to-zoom was the most-requested feature. Swipe-to-dismiss was added on the editor sidebar. A duplicate settings panel that existed in two places and was silently diverging got removed.
PNG export sounds simple. It isn't.
The original approach captured the canvas div as an image — which meant portrait exports came out the wrong dimensions because the output size was tied to the viewport, not the tree content. The fix: export the SVG element directly, compute the bounding box of all nodes, and derive the output dimensions from the content's own aspect ratio. Portrait mode now produces a properly proportioned image regardless of screen size. At 6× pixel ratio, it's good enough to print at A3 size.
What's Under the Hood
For those who are curious: React + Vite for the build, Tailwind CSS v3 for design tokens, localStorage for all project data (no backend needed), File System Access API to link a .familytree file on disk, Supabase for anonymous analytics only, driver.js for the onboarding tour, and html-to-image for the PNG export pipeline.
Who Is This For?
Honestly, anyone who has thought about mapping out their family tree but found the big platforms either too expensive, too complicated, or too invasive.
It's also good for a grandparent who wants a visual record to print and frame, a family reunion where someone needs to explain relationships at a glance, or someone doing genealogy research who wants a scratchpad that exports to GEDCOM when they're ready to move to a dedicated platform.
Try It
It's free. No account. No card. No catch.
Open it, spend five minutes adding a few people, and see what your family looks like on a canvas.
Feedback — good or critical — is genuinely welcome. Drop a comment or reach out directly.
Built with React, Vite, and an unreasonable amount of attention to export alignment.
Comments