Family Tree

This was a quick sideproject done with the help of few friends. built with React flow.

example data (fake ofc): example


  1. The Family Tree automatically arranges families based on with inner family advantages.
  2. Support for Complex Couples – Handle complex family structures such as divorces, shared kids, and other intricate relationships.
  3. Maintained Generations – Generations are visually maintained, providing a clear distinction between different family layers.
  4. Color-Coded Family Edges – Each family edge is assigned a unique color, helping you distinguish between different branches of your family.
  5. Non-Colliding Edges with Offset – To enhance the clarity of your family tree, edges are arranged to avoid collisions.
  6. Portrait Image support – Include images to personalize your family tree.
  7. Very configurable

Getting Started

  1. Clone the repository:
git clone
  1. Install dependencies:

cd family-tree-react-flow
npm install

Start the development server (using vite):

npm start


If you find issues or have suggestions for improvements, please open an issue or submit a pull request. Your contributions are highly valued!


This project is licensed under the MIT License – see the file for details.

Happy family tree mapping! 🌳


View Github