Basic Concepts

The jsPlumb Toolkit is a data binding and rendering wrapper around the open source jsPlumb library. At its core is the concept of a graph, representing the entities and relationships in your data model. Each instance of the Toolkit manages a single data model (a single graph), and can be rendered to zero or more UI elements. Each of these renderers is assigned its own instance of jsPlumb.

Instantiating the jsPlumb Toolkit

You create a new instance of the Toolkit by calling the newInstance method:

var toolkit = jsPlumbToolkit.newInstance();

This gives you an instance of the Toolkit with no data loaded and with no renderers assigned.

Loading Data

You can get data into the Toolkit in a few different ways:

  • Passing it in to the newInstance method:
var toolkit = jsPlumbToolkit.newInstance({
      { "id":"foo", "name":"foo" },
      { "id":"bar", "name":"bar" }
      { "source":"foo", "target":"bar" }
  • Calling load on an existing Toolkit instance:
  data:[ .... ]
  • Calling the addNode method on an existing Toolkit instance.

Notice the format of the data in the first example here. This is the Toolkit's default data format, which is a close analog of the structure of GraphML, but in JSON of course. In examples 1 and 2 here, there is an implicit dataType parameter whose value defaults to json, which indicates data in this format.

There are two default data formats supported by the Toolkit:

  • Graph JSON

The syntax shown above. Discussed in detail on this page

  • Hierarchical JSON

An alternative syntax in which every Node has an optional children list; there is an implicit Edge between each Node and the contents of its children list. the entire graph is nested in this way. Discussed in more detail on this page.

It is possible to write and supply your own data loader to an instance of the jsPlumb Toolkit. This is discussed in more detail here.

Loading via Ajax

Instead of passing in the data directly, you can use the url parameter to have the Toolkit load data via json.


Here we've loaded myGraph.json from


Rendering your data is handled by what the Toolkit calls a Surface.

You can register an arbitrary number of elements as renderers with any given Toolkit instance, using the render method:

var toolkit = jsPlumbToolkit.newInstance({...});
var renderer = toolkit.render({
  jsPlumb:{  ... jsPlumb defaults ... }

Notice here the jsPlumb parameter: these are defaults for the underlying jsPlumb instance. Every Surface is backed by its own instance of jsPlumb, which can be configured however you like, but which of course ultimately defers to jsPlumb.Defaults.

Whenever a change occurs to the graph - addition/deletion of nodes, import of data etc - every renderer is notified to repaint itself.

Rendering is discussed in detail on this page