A lightweight graphics library with an intuitive graphics API and an SVG renderer.


Bonsai is a JavaScript graphics library.

Bonsai's main features include:
  • Architecturally separated runner and renderer
  • iFrame, Worker and Node running contexts
  • Paths
  • Assets (Audio, Video, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing
  • and much more...
  • For the finer details, see the documentation.
  • #bonsaijs on irc.freenode.net
  • Post your questions on stackoverflow and tag with #bonsaijs.

How to use Bonsai

Draw a 100x200 rectangle to the stage at {0,0}:

var r = new Rect(0, 0, 100, 200).addTo(stage);

Fill it:


Change your mind... Make it darker:


Animate it:

r.animate('400ms', {
  x: 50,
  y: 50,
  width: 200

Go and give Bonsai a testdrive with our online editor, Orbit.

Supported Browsers

Chrome >= 20 Safari >= 5 Firefox >= 18 IE >= 9 Opera >= 12

Some of the things you can create with Bonsai

The art of bonsai tells a story through living illusion. A bonsai artist searches for ways to express his personal creativity by mixing form and thought in a miniature world.