The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    BonsaiJS is a graphics library and renderer
    Filed under  › 

    • 🔾45%Overall
    • 1,967
    • 41.3 days
    • 🕩189
    • 👥6


    (previously known as bikeshedjs)

    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. [source]


    Bonsai is a JavaScript graphics library. For the finer details, see the documentation (currently in construction).

    Bonsai's main features include:

    • Architecturally separated runner and renderer
    • iFrame, Worker and Node running contexts
    • Shapes
    • Paths
    • Assets (Videos, Images, Fonts, SubMovies)
    • Keyframe and regular animation (easing functions too)
    • Shape/path morphing
    • and much more...

    An example

    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:

    r.fill( color('red').darker() );

    Animate it:

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

    See more here: Bonsai Documentation/Overviews or join the IRC channel #bonsaijs on freenode and ask for help.

    Show All