Description

jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML IE 8 and below. The latest version - 1.3.4 - can be used with jQuery, MooTools and YUI3. Full transparent support for dragging is included.

The project started out life on Google Code and has been hosted here for the last two years; from version 1.3.4 onwards it also lives on GitHub (sporritt/jsPlumb). The source repo is now being synchronised between the two, in part thanks to the excellent instructions I found here. I did this because I didn't want to lose the project history (issues etc), and I know some people checkout the source from here.

for users upgrading from earlier versions to 1.3.x - there are a few minor backwards incompatibilities. Please see the changelog

if you're new to jsPlumb, please do take the time to read the documentation. There are a few integration issues that you should be aware of: z-index needs special attention, for example.

Requirements

jQuery:

jsPlumb requires jQuery 1.3.x or later; it has been tested on 1.3.2, 1.4.2, 1.4.3, 1.4.4, 1.5.0 and 1.6.0. To support dragging, you will need jQueryUI 1.7.x or 1.8.x. I've tested both.

There is a bug in jQuery 1.6.x and 1.7.x's SVG support for IE9 which means that hover events do not get posted. This is quite a bummer since the default renderer for jsPlumb, from 1.3.4 onwards, is SVG, and I was hoping to encourage everyone to make use of the fact that you can use CSS with SVG to style your plumbing rather than rely on the old-skool paintStyle stuff.

MooTools:

jsPlumb requires MooTools 1.3.x or 1.2.4 (tested on 1.3.2 and 1.2.4; it might work on other versions). To support dragging in MooTools, you will need Drag.Move from MooTools More. jsPlumb has been tested with Drag.Move from MooTools More 1.3.2.1 and 1.2.4.4, but I would recommend using 1.3.2.1 as there were bugs on IE with the getPosition() function of MooTools, which the Drag.Move class uses.

YUI3:

jsPlumb requires YUI 3.3.x (tested on 3.3.0; it actually might work on other versions). You do not need to include anything other than 'node' in your code that works with jsPlumb, but due to the asynchronous nature of module loading with YUI, you need to ensure you use jsPlumb.ready(function() { ...} ) to wrap your initialisation code, or you cannot be sure that everything that is required is available.

jsPlumb in action

Links to various demonstrations can be found here.

TweetPlumb is a great Twitter visualisation built (I say it's great because I built it myself!) using jsPlumb.

Discussion Group

There is a discussion group here: http://groups.google.com/group/jsplumb

It's only been around since version 1.3.4 was released so doesn't yet have very much content.

Documentation

Documentation can be found in the doc folder of the project, or you can view it online here.

API documentation is in the apidoc folder of the project, and online here

The Bezier curve functions used by jsPlumb have been extracted to a separate project:

http://code.google.com/p/jsbezier

Tests

The qUnit test suite can be found here

Twitter

We have a Twitter account that we use for various announcements:

http://twitter.com/jsplumblib

..but of course things fall through the cracks with Twitter. So maybe use this instead:

Mailing List

Sign up for the jsPlumb announcements mailing list here

License

Google Code only allows me to select one license type, but jsPlumb is actually dual-licensed under both MIT and GPL version 2. In fact, it's triple-licensed: you can treat it as free-as-in-beer if you like, too.