Interactive Family Tree App
Why I Built This
Family history is deeply personal, and I wanted a tool that keeps your genealogical data completely private. Unlike online genealogy services that store your family information on their servers, this app runs entirely in your browser. Your data never leaves your device unless you explicitly export it.
The app was originally built to visualize my own family tree, and is available in both English and Turkish. It works for any family structure. All data is stored locally in your browser's storage, and you can export/import JSON files to back up or transfer your family tree.
Tech Stack
The visualization is powered by D3.js and the family-chart library. The entire application is contained in a single HTML file with no server-side dependencies, making it perfect for offline use and easy sharing.
Key Features
Interactive Visualization
Pan, zoom, and navigate through your family tree with smooth animations. Click on any person to focus on their branch.
Search & Navigate
Quickly find family members by name. Navigate by surname groups to jump to different branches of your family.
Add & Edit Members
Right-click on any person to add spouses, children, or parents. Edit details or remove entries as needed.
Import/Export JSON
Back up your family tree as a JSON file. Import existing data or share with family members.
Offline Support
Works completely offline. Data is stored in your browser's local storage and persists between sessions.
Privacy First
No accounts, no servers, no tracking. Your family data stays on your device.
How to Use
Navigation
- Pan: Click and drag on the canvas to move around
- Zoom: Use mouse wheel or pinch gestures to zoom in/out
- Focus: Left-click on a person to center the view on them
- Select: Right-click on a person to select them for editing
Adding Family Members
- Right-click on an existing person to select them
- Use the sidebar buttons to add a spouse, child, or parents
- Fill in the name and gender, then click "Add"
- Note: To add children, the person must have a spouse first
Saving & Loading Data
- Auto-save: Changes are automatically saved to your browser
- Export: Click the download button to save as JSON file
- Import: Click the upload button to load a JSON file
- Standalone: Download the HTML file to run completely offline
Try It Out
English Version
Turkish Version (Turkce)
Live Preview (English)
Tips
- Start with the oldest known generation and work your way down
- Use the "Reset to Root" button to jump back to the oldest generation
- Export your data regularly as a backup
- The JSON format is human-readable — you can edit it directly if needed