An interactive family tree explorer for webtrees — the leading open-source genealogy application.
Built to deliver a clean, modern card-based UI that feels cohesive and powerful for exploring multi-generational family trees. This module was inspired by the webtrees Interactive Tree and the excellent huhwt-xtv plugin by huhwt. The goal was to create a convenient and familiar genealogy visualization for people used to popular web genealogy platforms, combining modern UI design with powerful navigation features.
Repo: https://github.com/szporwolik/webtrees-tree-explorer
Szymon Porwolik — szymon.porwolik.com
• Appears in the Diagrams menu as "Tree Explorer"
• Drag-and-pan canvas for exploring large trees
• Expand / collapse branches with click
• Center on root person
• Fullscreen toggle
• Gender-coded card borders (blue = male, pink = female)
• Search dropdown to find and navigate to any person in the tree
• Multiple marriages support — all spouses and children from all marriages displayed
• Unknown parent placeholders — when siblings exist but parents don't, synthetic "?" boxes are created
• Source / note / media badges and quick actions on person and family cards
• Configurable default view settings for details, sources, and advanced controls
• Print-friendly styling
• AJAX-powered lazy loading of tree branches
• Share link support for direct navigation
- Download or clone this repository
- Copy the folder into your webtrees
modules_v4/directory - Rename it as you prefer (e.g.
sp_tree_explorer) - Go to Control Panel → Modules → Charts and enable the module
- Access via Diagrams → Tree Explorer from any individual page
• webtrees 2.x
• PHP 7.4+
• Modern web browser with JavaScript enabled
Runtime translations are loaded from PHP array files in resources/lang/.
Currently included locales:
cs, da, de, es, fr, it, nb, nl, pl, pt, pt-BR, ro, ru, sv, tr, uk
English uses the built-in source strings and does not need a separate language file.
├── module.php # Entry point (returns module instance)
├── SpTreeExplorer.php # Main module class
├── SpTreeExplorerHandler.php # AJAX request handler
├── autoload.php # PSR-4 autoloader
├── README.md
├── latest-version.txt
├── screenshots/ # README images
├── Exceptions/
│ └── NavigatorActionMissing.php
├── Module/
│ └── TreeNavigator/
│ └── FamilyTreeRenderer.php # JSON tree data generator
├── Traits/
│ └── DiagramChartFeature.php # Chart menu integration
├── resources/
│ ├── lang/ # Translation files (PHP arrays, 16 locales)
│ ├── css/
│ │ └── navigator.css # Complete module stylesheet
│ ├── js/
│ │ └── navigator.js # Main navigation engine
│ └── views/
│ ├── inject-script.phtml
│ ├── inject-style.phtml
│ └── modules/
│ └── spNavigator/
│ ├── diagram.phtml
│ ├── settings.phtml
│ └── viewport.phtml
Core:
• webtrees 2.x — Genealogy application framework (GPL v3)
• Uses webtrees API: Individual, Family, Tree, Auth, Registry, I18N, etc.
JavaScript:
• ES5 JavaScript — no external frameworks required
• Uses standard browser APIs: Canvas, XMLHttpRequest, DOM manipulation
• PNG export — Diagram export to image file (planned for future release)
This is a personal project. Issues are welcome, and pull requests are accepted — please open them against the dev branch.
GPL-3.0-or-later — same license family as webtrees itself.
Copyright (C) 2025-2026 Szymon Porwolik