WebTree Project Home


This project's aim is to create the simplest possible API for creating dynamic HTML/Javascript tree controls on a web page. Common applications are managing a hierarchy of users, xml elements, a file system, or an LDAP tree. Basically anywhere you would like to present a hierarchial structure to the end user.

If you are a developer wanting to get started immediately, see our Getting Started tutorial. This will lead you through the simple process of setting up your own custom data source for the tree.

Here are installation instructions.


Rendered on the console

Rendered in the browser


From working with more mature APIs, such as M$ and Java Swing, it was obvious that abstracting out the concepts of trees and nodes was a problem that had already been tackled more than once before. But, I really wanted an API that made it easy to write tree controls that were suited for the web.

So I abstracted out the core components of a tree:

click for the full UML diagram (pdf)

Using these abstractions, it is simple to plug in your own data model for use in the HTML tree. Also, you can test each part of your tree implementation separately. For example, you can:

By separating view from model from rendering mechanism, you can easily unit test outside a web environment.


In order to jump start your development efforts, I wrote the most common implementations of these abstractions.


The package includes an XML data source, and file system data source. By simply pointing at one of these sources of data, you can have a fully functional tree in seconds.


The package includes a renderer for the shell (text only) and an HTML renderered view.


So far there has been no need to extend the BaseTreeView, as it has served all the functionality of our custom renderers.


The Getting Started tutorial takes you through the most common use case with this package, creating your own custom data model for the control. It only takes about 20 minutes to go through.

The install document can help in deploying webtree.

A more detailed UML diagram of the architecture is available in pdf format.

The javadocs are available here.


Project page: http://sourceforge.net/projects/webtree/

Download page: http://sourceforge.net/project/showfiles.php?group_id=75409


See the Installation documentation.