Skip to content
A react-based family tree builder
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

React Family Tree

A preliminary proof-of-concept for a React-based HTML tree structure builder. Primarily conceived for family trees, but applicable to all kinds of organizational charts where a tree structure is appropriate. A good exercise in recursive data structures in React.

Example / Usage

See the example at

Current Features:

  • Add and edit nodes, partner nodes, and child nodes.
  • Generates semantically meaningful nested HTML.
  • CSS is programatically customized to allow all sorts of relationships: multiple partners, different children with each partner, and more to come.

Planned features:

  • Customizable node data
  • Move nodes (including drag-and-drop)
  • Delete nodes
  • Save, reload, export to HTML.
  • Display a set number of levels. -- This will permit a mobile-friendly mode that displays one level at a time. -- Also, a nice SEO-friendly paradigm would be to pre-render a separate one-level page for every node.
  • New relationships: co-parents, anything else that comes to mind.

But how?

Built using

You can’t perform that action at this time.