Drawing tree structures with SVG and JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 2 commits behind westonruter:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


SVG Tree Drawer

This project provides a JavaScript library for constructing interactive SVG images of tree structures. This is useful in depicting parse trees as are common in linguistics and computer science. The library provides hooks for toggling the collapsing or extending branches in the tree.


The first iteration of this project I developed back in 2004, and the old project page with original demos is still available. In Autumn 2009 I took an online syntax course through the University of Washington's CLMA program, and this course required a lot of tree drawing. Having previously created an SVG tree drawer, I wanted to do my course work using a browser-based technology instead of using LaTeX. However, since the course was about HPSG, each node in the tree was not a simple label as I had been used to, but rather a complex attribute-value matrix (AVM). So I set out to rewrite my SVG tree drawer to bring it up to date and to allow arbitrary content in each of the nodes so that I could use MathML to render the AVMs.


The following screenshots link to interactive SVG images of the examples:

Simple tree: “The boy plays with the ball.”

Tree of “The boy plays with the ball.”

Tree with AVMs: “They seemed close to me.”

Note: This example uses XHTML (application/xhtml+xml), XSLT, XML, MathML, and SVG together; your browser may not support all of the necessary technologies.

Parse tree with AVMs for “They seemed close to me.”


Developed by Weston Ruter (@westonruter). Code licensed GPL