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

Introduction

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...
Community
  • For the finer details, see the documentation.
  • #bonsaijs on irc.freenode.net
  • Post your questions on stackoverflow and tag with #bonsaijs.
Featuring

It's at the heart of pixelplant.com and it's what makes it tick.

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:

r.fill('blue');

Change your mind... Make it darker:

r.fill(color('green').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.“