HTML5 Tree

Differences from flash tree

  • No Flash required; built on HTML5 standards
  • Built on top of our very well-documented API
  • Works in all modern browsers: mobile, desktop, refrigerator, etc.
  • Not feature-complete as compared to the Flash tree


  • Only entry points are link on the "No Flash Installed" page and on the Profile of the Day blog post 
  • Steady increase in usage since release, now averaging about 2,100 pageviews/day

What's left?

  • Transfer features from Flash tree to HTML5 Tree, weeding out unused features along the way, which include:
  1. Full-fledged Add Node and Edit Card
  2. Increases in API speed; eg. returning partial layouts for large trees, caching positions for trees which don't change often, etc.
  3. Define the look and feel, and enhance the UI 

Technologies Used

  • Front-end powered by Backbone.js
  • Back-end powered by Geni API (nearly 100% modular from main Geni app)
  • Kinetic dragging powered by Geni open source javascript library called Pep
  • Uses standard Javascript libraries like jQuery and Modernizr
  • Ajax used for all communication with back-end
  • Tree movement powered by CSS3 translate function 
  • HTML5 is fully responsive


geni html5 tree

By briangonzalez

geni html5 tree

  • 1,247
Loading comments...

More from briangonzalez