Site / Changelog


20th May 2021

  • Fixed an issue in React integration that caused empty elements to be left in the DOM when a node/group was removed from the model.


  • This version of the Toolkit no longer includes the "legacy" React integration. See original notes from release 2.3.0.


1st May 2021

  • Updated the wheel listener to be calibrated better for recent versions of Firefox on Windows. If you prefer the previous calibration you can call

to reset it. Given Firefox's proactive approach to keeping everyone on a recent version it seems unlikely the previous calibration will be widely needed, if at all.


25th April 2021

  • Fixed an issue where in some cases dragging an anchor while editing a connector path did not result in the connector correctly reporting it had been edited
  • Updated the Vue 2 integration to pass in the parent component to each of the node/group components the Toolkit creates.


29th March 2021

  • Fixed an issue where Ports on a Group were not being loaded by the JSON loader.
  • Added support for passing Selection objects in to the addClass and removeClass methods of the Surface widget.


15th February 2021

  • Fixed an issue where in some circumstances Endpoints associated with Ports were not being removed.


3rd February 2021

  • Updated the drop manager to fix an issue where an element dropped on the canvas placeholder was not being recognised.


21st January 2021

  • Updated the React .d.ts files to remove references to the addNewPort method on BaseVertexComponent, which was dropped in 2.3.0 (because it's just a very thin wrapper around a call to the Toolkit)

  • Tweaked the port rendering process in React to ensure that newly rendered port components can be interacted with immediately.


14th January 2021

  • Various minor internal changes to ensure continued support for IE11


4th January 2021


15th December 2020

  • Fixed issue with an error being thrown when a lasso was used over a decorator.


14th December 2020

  • Fixed issue with zoomToSelection and animateToSelection failing in Surface.
  • Added extra tests for zooming to selections.
  • Internal refactor of several "destroy" methods, with a view to ensuring no stale objects are left, in Toolkit core and Angular integration.


8th December 2020

  • Updates to the CSS for various demonstrations.


3rd December 2020

  • Fixed issue with React database visualiser demonstration, in which the name of a column could not be changed.
  • Added React skeleton using Hooks demonstration.


  • The original React integration package has been renamed to jsplumbtoolkit-react-legacy. There is no functional change in this package from the jsplumbtoolkit-react package that shipped in 2.2.8. If you use the React integration and you don't wish to upgrade to the new integration package discussed below, just switch your import to jsplumbtoolkit-react-legacy. Note that if you are still using JsPlumbToolkitPaletteComponent in your app, which has been deprecated for some time, you will need to switch to the legacy React support, as it is not included in the main React support anymore.

  • The jsplumbtoolkit-react package includes a rewrite of the JsPlumbToolkitSurfaceComponent and its companion components BaseNodeComponent, BaseGroupComponent and BasePortComponent. You can read about these changes in more detail in the React documentation, but at a high level they are:

    • Nodes/groups are now rendered as child elements, from React's point of view, of the component that renders the Surface. This allows you to control aspects of the node/group components via the props/state of your own components, independent of model changes in the Toolkit.

    • You can pass arbitrary JSX in a View to represent a node/group, rather than just a reference to a component class

    • The getNode() method of BaseNodeComponent has been replaced with direct access of the node property.

    • The getGroup() method of BaseGroupComponent has been replaced with direct access of the group property.

    • The JsPlumbToolkitPaletteComponent has been removed. You can still find it in the React legacy support.


8th November 2020

  • Updated the magnetizer code to honour node rotation.


26th October 2020

  • Upgraded to Community edition 2.15.0.
  • Updated the edge connector code to deactivate any editors if clear() is called on the associated Toolkit instance while editing is active.
  • Fixed issue in editable flowchart connector that would cause its anchor position to be incorrectly reported after rotation of node.


15th October 2020

  • Upgraded to Community Edition 2.14.7
  • Added support for rotating nodes, via a rotate(id, amount) method on Surface. Currently this does not work with the anchor dragging functionality associated with editable connectors.
  • Added optional overlays member to ViewPortOptions in typings
  • Fixed occasional positioning issue when a jtk-source or jtk-target element in the root of a node template declares a port-id. This was not a fatal issue, but resulted in some spurious console logging.


3rd September 2020

  • Updated the setSource and setTarget methods to properly support a Port as argument.


2nd September 2020

  • Updated to Community Edition 2.14.5
  • Fixed issue with spacing in Hierarchical layout after a node is reduced in size.


23rd August 2020

  • Added support for the canvasSelector option to be passed from Angular drop manager into the underlying drop manager. This extends out the canvasSelector support added in 2.2.1 to Angular.

  • Updated undo/redo manager to properly support undo/redo of edges that have geometry set (using EditableFlowchart connectors)

  • Updated Djikstra shortest path algorithm to better handle the case that the source/target of a path is a Port on a Node.


29th July 2020

  • Added a miniview to the Vue flowchart builder demonstration.


24th July 2020

  • added optional canvasSelector parameter to jsPlumbToolkitDropManagerOptions and SurfaceDropManagerOptions. This can be used to augment the list of elements the drop manager should consider to be the "canvas" when dragging new nodes/groups on. One specific use case for this is when you have a decorator applied to your layout - you might want to include an appropriate selector for the elements created by the decorator so that they are treated as background by the drop manager.

  • fixed issue with Nodes being removed in certain cases when they have the same ID as Port that is removed.


17th July 2020

  • allowNodeDropOnCanvas optional flag added to drop manager. By default this is true, which is the current behaviour. But you can set this to false and then only allow nodes to be dropped directly onto groups.

  • Updated to Community Edition 2.14.2

  • A style was added to the default stylesheet:

.jtk-connector {

To account for any situations where an overlay or connector would extend beyond the bounds of the SVG.


2nd July 2020

  • Added getDirectEdges, getPortEdges, getDirectSourceEdges, getDirectTargetEdges, getPortSourceEdges and getPortTargetEdges, getAllSourceEdges, getAllTargetEdges methods to Node.


20th June 2020

  • Updated to Community edition 2.13.3. No functional change; this was to support the ongoing process of merging the documentation for the Community and Toolkit editions.

  • Updated Vue demo to fix import versions. No functional change.


11th June 2020

  • Minor refactoring to the internals of the Surface when a node is removed. In certain rare circumstances there could be endpoints that did not get cleaned up.


30th May 2020

  • In the Angular integration, jsPlumbDragDropComponent and jsPlumbSurfaceDropComponent refactored to be Directive rather than Component. This makes no difference to their operation, but it is more correct conceptually, and also allows you to extend them with your own Directives.

  • updated types: added elementFilter as optional to MiniviewOptions

  • added support for [elementFilter] on jsPlumbMiniview Angular component

  • added redraw method to jsPlumbMiniview Angular component


19th May 2020

  • added onDemand flag and edit method to drawing tools, to enable on-demand attachment of drawing tools instead of via Toolkit selection.
  • fixed issue in which it was not possible to lasso nodes that were previously in a group that was deleted.
  • ensure groups on which nodes are dropped have their layout re-run
  • fixed a race condition in the auto save mechanism that could cause incorrect values for nodes previously belonging to a group that has been removed.


10th May 2020

  • Fixed issue in which a node removed from a group did not have its position updated in the model (when storePositionsInModel is set to true)
  • Added jsplumbtoolkit-testing package. This provides a set of helper methods for you to use when testing a UI that includes the jsPlumb Toolkit.


- `jsplumbtoolkit-vue2.tgz` now contains a version of our components that require you to use the `Vue.use(...)` approach 
to including the library. For more information see

For the time being, the original version of the Vue integration is available in `jsplumbtoolkit-vue2-runtime.tgz`, but 
this will at some point be removed.


1st May 2020

  • upgrade to Community edition 2.13.2
  • group:addMember and group:removeMember added to the list of events that instigate an auto save.
  • added context as an argument to edge factory. This provides all of the context information for the edge being created - source, target, etc. For more information search "edge factory" on
  • performance enhancements for large numbers of nodes/edges


27th April 2020

  • Fixed issue with miniview ignoring the wheelReverse setting of its associated surface.
  • Update Angular, React and Vue integrations to ensure components are destroyed when the Toolkit is cleared (via the clear() method).
  • added a clear button to all of the Flowchart demonstrations.
  • Undo/redo manager clears its history when the related Toolkit is cleared.


- The internal representation of `templateRenderer` now expects it to be an object containing a `render` method and a `cleanup` method. If you
have a custom template renderer then you need to update it to satisfy this contract. The `render` method should just be whatever your 
current `templateRenderer` function is.  `cleanup` is expected to perform any deregistration that is required, and also to remove the
rendered element from the DOM.


14th April 2020

  • Updated all Angular demonstrations to Angular 9 (with aot)

  • Minor updates to internal packaging of Toolkit code

  • Updates to the database visualizer demonstrations:

    • separated out id and name members of columns. Previously, the id of the column was also its name, which was mostly just a conceptual problem, but for the React database visualizer it meant the inclusion of some extra code to generate a unique 'key' for each column.
    • introduced a 'contacts' table, linked to Author, Publisher
    • set detachable:false on edge definition so the user has to use the X button to delete a relationship
  • Added support in the Undo/redo manager for adding node to/removing node from Groups.

  • setPosition method of Surface now stores new position in model if configured to do so

  • Added support in undo/redo for group drag

  • fixed an issue where in some cases a Node programmatically removed from a Group was not appended back to the canvas.

  • upgrade to Community edition 2.13.1


1st April 2020

  • Fixed an issue with jtk-source elements specifying endpoint: if their type definition was specifying a maxConnections for the port, the Toolkit was overwriting that with a value of -1 (unlimited connections).

  • Updated the template engine to cover a couple of edge cases when a template contains r-if statements and is updated. This only has any bearing if you use "vanilla" Toolkit and not Angular/React/Vue.

  • added support for autoSaveHandler in the Toolkit constructor and in the setAutoSave method. If you supply this then the Toolkit will decide on when an auto save needs to occur, honouring any autoSaveDebounceTimeout you supply, but your function will handle the actual save.


23rd March 2020

  • Surface correctly informs the underlying pan/zoom widget when a group has been removed.


20th March 2020

  • faster uuid method in util

  • updates to the typescript definitions.

  • Updated to Community edition 2.13.0. Versions 2.12.10 - 2.13.0 together contain:

    • a performance enhancement for painting Bezier/StateMachine connectors
    • a fix for connector overlays that can in some circumstances disappear when switching type
    • a couple of fixes related to source/target drag methods when setId or setIdChanged is used (does not affect the Toolkit edition)
    • a fix for touch events on certain Windows computers running Chrome.
  • fixed an issue rendering Groups in the React integration


22nd February 2020

  • added editable flowchart connectors
  • added editable bezier connectors
  • upgraded all flowchart demonstrations to use editable connectors and new flowchart example
  • removed legacy Vue demonstration and support
  • removed Webpack bundling demonstration (the React demonstrations use Webpack if you're looking for an example)
  • Storage is now in jsPlumbUtil.Storage, not jsPlumbToolkit.util.Storage
  • Cookie support removed from Storage. It was a fallback for browsers that did not support local storage.
  • added getVersion() method to jsPlumbToolkit class


30th January 2020

  • Updated to Community edition 2.12.9


11th December 2019

  • Improve tracePath so that the tracing can be paused while traversing nodes.
  • Updated to Community edition 2.12.8


3rd December 2019

  • added optional onReload constructor parameter to Selection. If a generator is provided, this function is called whenever the generator has been run.
  • added optional onBeforeReload constructor parameter to Selection. If a generator is provided, this function is called before the Selection is cleared and then generator re-run.
  • added optional autoFill constructor parameter to Selection. If true, and a generator is provided, whenever a new Node is added to the Toolkit, the selection is cleared and the generator run automatically.
  • refactored the Hierarchical and Balloon layouts to extend AbsoluteBackedLayout. By default this functionality is switched off, but setting absoluteBacked:true switches it on, and then any nodes that are disconnected from all other nodes can be placed via their left and top properties. Useful for drag/drop when using these layouts.


30th November 2019

  • Added setSurface method to the SurfaceDropManager and DropManager. This allows you to use a single drop manager with multiple Surfaces.


29th November 2019

  • Upgraded to community edition 2.12.7, which contains a couple of fixes for working with the drag selection:

    • nodes inside groups cannot be added to the drag selection. Only "top level" nodes and groups can be added to the drag selection.
    • nodes in the drag selection that are subsequently added to a group are removed from the drag selection


16th November 2019

  • added addClass, hasClass and removeClass methods to the Surface widget. These wrap their corresponding methods on the underlying Community instance.

  • some internal changes to support the upcoming ability to drag flowchart connector paths.

  • updated the tracePath method to return a handler that exposes play(), pause() and cancel() methods, so the animation can be started/stopped and cancelled.

  • updated the tracePath method to support paused as an argument. When this is set to true, the animation begins in the paused state.


29th October 2019

  • updated to Community edition 2.12.5

  • Added setAutoSave(options) method to Toolkit instance, to configure auto save after instantiation. This method can be called any number of times, and each time it is called any previous auto save setup is discarded.

  • added lassoEdges:boolean constructor option for Surface widget. When true (defaults to false), edges are included in selections made with the lasso. All edges connecting any two nodes/groups (or ports on nodes/groups) that have been lassoed are included in the selection.

  • added jsPlumbToolkitLabelDragManager in an optional include, jsplumbtoolkit-labels.tgz. For a discussion of this and of labels in general, see


16th October 2019

  • Updated the default template engine to reinstate support for custom tags. These were supported in Rotors, the original default template engine, but removed in Knockle, to which we updated recently. After some consideration we decided that custom tags can be useful, and so they're back in.

  • Added webpack dev server and associated npm script to all the React demonstrations

  • Updated the readme for licensed/evaluation distributions.


10th October 2019

  • minor updates to the way updates are handled by the text search add-on
  • fixed an issue with dragging elements from a palette on touch devices.


4th October 2019

  • removed the jsplumb-palette component from the Angular integration. It had been deprecated for a few versions. Use the drop manager instead.

  • added radius to EndpointOptions in types

  • updated eachNode, eachGroup and eachEdge mthod signature in types; they were missing the idx parameter.

  • added new full text search plugin. This is an optional import - jsplumbtoolkit-search. The data member of all nodes, groups, ports and edges is used to populate a reverse text index, which you can then search via an API. Full documentation available on - search "text search".

  • extended the Undo/redo manager to support changes made to the dataset via the update*** methods (updateNode, updatePort etc).

  • extended the Undo/redo manager to support node/group move events. To enable these events you now need to pass a Surface to the Undo/redo manager constructor, not a Toolkit, as move events are specific to the Surface widget and not something the Toolkit deals with.


24th September 2019

  • support autoSaveDebounceTimeout parameter on Toolkit constructor. Allows requests generated by the auto save mechanism to be regulated a little.


23rd September 2019

  • added support for specifying edge label directly in an edge definition in a view (without needing to declare it as a Label overlay)
  • added support for specifying label location inside the backing data for an edge


17th September 2019

  • updated default template engine to Knockle, which is a port of the previous Rotors template engine, with some changes:

    • adds/removes content inside r-if and r-each loops when updates occur. In Rotors these elements would run a single time and not respond to changes in the dataset on update.

    • does not support the r-for element

    • does not support custom elements (we think Toolkit licensees are unlikely to be using these)

    • does not support IE8 (which the Toolkit hasn't supported for some time)

  • updates to code docs to improve generated API docs


30th August 2019

  • updated the Angular 1.x integration to use the SurfaceDropManager instead of the now deleted registerDroppableNodes method from the Surface widget.


18th August 2019

  • Updated the types of the events member of a ViewOptions object. It's not a Map; it's a plain JS object, but with a limited set of keys.
  • Updates to ViewPortOptions type to include missing possible values.


9th August 2019

  • fixed issue with Toolkit firing an edgeAdded event even when the underlying graph rejected the edge addition.
  • upgraded to Community edition 2.11.2
  • setting type on Edge now honours any Endpoint definitions in the new type.


18th July 2019

  • Updated to Community edition 2.11.1, which contains a fix for an issue where types were dropped after a reset.
  • Update Angular code to better support situations where the 'id' property is not the one being used as node/port id.


17th July 2019

NOTE: you should use 1.15.1, and not this version. 1.15.1 has an important bugfix.

  • Removed the registerDroppableNodes method from the Surface widget. Use the drop manager package, or one of its library wrappers.

  • Updated to Community edition 2.11.0, which includes some changes to the way types are merged by the Community edition, specifically that with the exception of events and overlays, everything is overwritten when merging types. This fixes an issue with edge definitions in the Toolkit, in which anchor values were being merged rather than overridden.

  • Edge/node/port/group definitions in a View now support a mergeStrategy parameter. If set to "override", overlays and events will completely replace any overlays or events declared on parent definitions, rather than being merged with them.


4th July 2019

  • Updated the drop manager to take into account any translate CSS rules applied to ancestors of the Surface it is registered against.
  • Tested against Angular 8
  • Updated to work with the Ivy compiler in Angular 8 (need fix for Ivy bug in the version of Angular 8 you use)
  • Marked deprecated the registerDroppableNodes method of Surface, as well as JsPlumbToolkitPaletteComponent in the React integration, jsPlumbPaletteComponent in the Angular integration, and the palette mixin in the Vue integration. Use the drop manager package, or one of its library wrappers.


27th June 2019

  • Upgrade to Rotors 0.3.19, which supports multiple child elements in an r-html tag
  • Upgrade to community edition 2.10.1, which contains a fix allowing us to update source definitions after they have been created
  • Update toolkit/surface code to properly detect and handle the case that a port's id changes.
  • Update the React database visualizer demo to use a dedicated key for column loop, rather than using the column's id property. This allows the column to be renamed without React ditching the component and creating a new one.


6th June 2019

  • improvements to React integration:

    • avoid possible NPE in React integration's JsPlumbToolkitSurfaceComponent when default template renderer is being used
    • added removeNode() helper method to BaseNodeComponent
    • added removeGroup(alsoRemoveChildNodes:boolean) helper method to BaseGroupComponent
    • added BasePortComponent. React components can now be used to render ports.
    • added a React port of the Database Visualizer demonstration.


5th June 2019

  • upgraded to version 2.10.0 of the Community edition.


20th May 2019

  • added addFactoryGroup(..) method, which does for Group what addFactoryNode does for Nodes
  • added SurfaceDropManager component, which simplifies drag/drop of nodes/groups onto a Surface (and also offers drop on edge), as well as Angular/React/Vue wrappers for it.
  • fixed an issue in the drop manager that was polluting the count of nodes and groups
  • rewrote various demonstration pages to use the SurfaceDropManager.


9th May 2019

  • upgrade Katavorio to version 1.4.5
  • upgrade Community edition to 2.9.3
  • fixed issue with nodes dropped into groups not having their positions correctly adjusted.


4th May 2019

  • fixed an issue with Auto save causing the dataLoadEnd event to be prematurely aborted.


16th April 2019

  • internal refactoring of a few methods related to rendering ports


15th April 2019

  • added support for is-source and is-target on jtk-port elements.


12th April 2019

  • Fixed issue with the packaging of the flowchart builder demonstration (the drop library was missing)


10th April 2019

  • internal rewrite of the jsPlumbToolkitIO module from JS to Typescript
  • internal rewrite of the Autosaver module from JS to Typescript
  • expose dropHandler on JsPlumbToolkitPaletteComponent in the React integration
  • update Community edition to 2.9.1


6th March 2019

  • Documentation removed from the license/evaluation bundles and moved to
  • update Community edition to 2.9.0
  • in direct render mode, honor any max-width or max-height CSS properties applied to the container.


5th March 2019

  • documentation updates


4th March 2019

  • documentation updates
  • verified that the Toolkit works with Angular 7
  • inclusion of example package.json for Angular 7 applications


3rd March 2019

  • add grunt as a dev dependency to package.json in the evaluation/license downloads
  • update installation docs to show correct npm commands needed to run demonstration server
  • added a Vue 2 mixin wrapper around the Drop Manager
  • added a React component to wrap the Drop Manager
  • added an Angular component to wrap the Drop Manager
  • added drop on edge behaviour to Flowchart demo, plus the Vue/React/Angular versions
  • fixed an issue that was preventing a node/group that had a loopback edge from being recognised as a valid root for the hierarchical layout.
  • removed allowDropOnCanvas, allowDropOnNodesAndGroups and allowDropOnEdges parameters from the Drop Manager. These are inferred now from the presence of the associated on**Drop methods.


1st February 2019

  • bugfix for addFactoryNode method on Toolkit class: data was ignored when calling the method with a callback.


13th December 2018

  • minor tweak to the community edition ingest code


11th December 2018

  • upgrade to Community edition 2.8.6.


7th December 2018

  • improved community ingest support: endpoints are now modelled as ports on their parent nodes.


6th December 2018

  • added support for drop on edge to Drop Manager
  • documented the Drop Manager
  • updated the Spring layout to correctly honour any padding value it is given
  • support user-specified number of iterations for magnetize to run on layouts.
  • upgrade to Community edition 2.8.5.


29th November 2018

  • updated Vue integration to provide an ES6 module package
  • updated Vue integration to allow Vue components to be used as node/group renderers
  • removed the jsplumb-toolkit Angular component. This has been deprecated for a while and unused in any of the jsPlumb demonstrations. Use jsplumb-surface instead, and create instances of the Toolkit on the jsPlumb Angular service.


26th November 2018

  • added support for "spacing" to the constructor params for the Hierarchical layout. See hierarchical layout documentation for a discussion.
  • deprecated compress:true on Hierarchical layout. Use spacing:"compress" instead.
  • Surface widget consumes the mouse events for pan/pinch zoom now. Fixes an issue seen on iPads where these operations were causing the page to begin to scroll.
  • fixed issue with dialog loading in Vue demo
  • improved handling of individual Selection rendering


16th November 2018

  • Fix for duplicated nodes appearing in miniview when ingesting a Community edition instance
  • Update the surface component to better support rendering the contents of individual groups
  • Added a cache for node/port/edge/group definitions. Since these cannot be reloaded anyway, we can safely cache them after compiling them for the first time.


4th November 2018

  • Upgrade to Community edition 2.8.4.


2nd November 2018

  • Fixed an issue causing edges whose type inherited from some other type to sometimes fail to update properly after updateEdge called.
  • Added support for vertexId.portId format for ports in the default json loader.
  • Updated IO docs.


28th October 2018

  • Upgrade to Community edition 2.8.3. Fixes an intermittent issue with continuous anchors when edges are relocated to a new element.


26th October 2018

  • Updates to the Community edition ingest mechanism:

    • default to Absolute layout for ingested Community edition instances
    • ensure layout position for newly ingested elements is correct
    • support optional data to be stored with each newly ingested element
    • the ingest method on the Surface component now handles appending the element to the underlying canvas.
  • Upgrade to Community edition 2.8.2

  • add setEnabled(boolean) method to jsPlumbToolkitDragManager.


18th October 2018

  • update the event args passed by a Selection's reload method to be in line with those passed by a Toolkit instance
  • if no container specified in render call, throw an Error. This is easier to debug.
  • minor updates to drawing tools - an onEdit callback is supported, and reset is exposed on the drawing tools object.
  • added support for 'align' to the Hierarchical layout, to alter how child groups are positioned with respect to their parent nodes


6th October 2018

  • upgrade to Katavorio 1.1.0, to fix an issue that was causing multiple unnecessary nodeMoveEnd events to fire when a selection was dragged.


29th September 2018

  • minor updates to the React typings
  • updates for the React documentation


25th September 2018

  • added Typescript definition file for the React integration.
  • added Angular and React "skeleton" demonstrations - simple demonstrations designed to assist in getting something running.


24th September 2018


  • jsPlumbToolkitUtil folded into jsPlumbUtil - including the Selection class. Only a breaking change if your code uses jsPlumbToolkitUtil directly of course.


  • Updates to the React integration to support using React components to render nodes/groups.
  • Added optional undo/redo support package for Node/Group/Edge/Port add/remove operations.i
  • Angular integration now supports referencing components directly in the view, instead of having to resolve them via a nodeResolver
  • Added an Angular version of the Database Visualizer demonstration
  • Documentation updates
  • Updated a couple of demonstrations to show usage of undo/redo


12th September 2018

  • precompile React JSX components and package those instead of the original JSX files. This was done because of a compatibility issue with applications made with create-react-app: they do not compile JSX files outside of the src directory.

  • Remove unnecessary duplicated React demonstration

  • Update React demonstration and docs to reflect changes in the React integration packaging.


7th September 2018

  • added some more information to the Typescript typings file.
  • fix in issue on Firefox Quantum with the drop manager.


6th September 2018

  • Added portOrderProperty to the Toolkit to assist in automatically setting the order of ports in some node.


31st August 2018

  • Upgrade to Community edition 2.8.0, which contains Mottle 1.0.0, which doesn't use document.createTouch/document.createTouchList, as these methods are not supported in latest Chrome and are becoming obsolete in all browsers. If you cannot upgrade to this version of jsPlumb and you're finding problems in Chrome on touch devices, there are shims available in the Mottle project on Github.

  • minor updates to the Database Visualizer demonstration, to make it more usable on touch devices.


28th August 2018

  • upgrade to Community edition 2.7.19
  • update Angular docs to provide some tips on how to integrate with an existing application.


27th August 2018

  • catch exceptions when trying to install and Typescript or Angular is not found.
  • update code to work around a Typescript issue causing Angular CLI 6 production builds to fail.


24th August 2018

  • pass node and group elements in callback to group:addMember and group:removeMember events from Surface.
  • update to the Angular port renderer
  • basic support for nodes with multiple parents in the Hierarchical layout.
  • add jtk-most-recently-dragged class to the most recently dragged node/group in the Surface


20th August 2018

  • improved rendering of Ports in Angular integration
  • added animateToSelection method to Surface
  • fixed issue with zoomToSelection ignoring Groups.
  • added getEdges method to Selection
  • fixed documentation error that was causing Selection.edgeEach to be excluded.
  • upgrade to community edition 2.7.16


15th August 2018

  • added updateGroup method to Toolkit


11th August 2018

  • added a fix for the inverse lasso on IE11
  • upgrade to community edition 2.7.15


10th August 2018

  • added getGroups method to Toolkit class.
  • added layout entry to SurfaceOptions type definitions.
  • added getPort(..) to Node type definition
  • added source and target to Edge type definition
  • fixed an issue with node removal in the miniview
  • when removing a group from the UI and retaining its child nodes, the child nodes are drawn in the same page position as they were in when inside the group, and no relayout is called.
  • upgrade to Community edition 2.7.14


4th August 2018

  • added the concept of portDataProperty, a simple way to replace portExtractor and portUpdater.


25th July 2018

  • changed the format of some method declarations that were causing Angular's optimizer to confuse itself when running a production build.
  • upgrade to Community edition 2.7.12


25th July 2018

  • Added support for layouts to groups. Groups have an 'absolute' layout by default but can support any layout.
  • fixed a few minor issues related to viewport size that were affecting the zoom to extents calculations.
  • removed 'autoSizePadding' parameter from group definitions. Preferred method now is CSS.
  • toolkit now fires a group:addMember event if a node added via addNode that has a group reference in it.
  • fixed an issue in the Vue2 integration whereby user supplied dragOptions were ignored.
  • updated all Angular demos to include the required polyfills for them to work with IE11.
  • updated to Community edition 2.7.10


26th June 2018

  • added support for 'invert' flag on Hierarchical layout - puts the root node at the bottom for horizontal layouts, or on the right for vertical layouts.


24th June 2018

  • updated to Community edition 2.7.9


22nd June 2018

  • updated to Community edition 2.7.8
  • additions to Typescript typings file
  • group:addMember and group:removeMember events optionally include the other group involved when the event was fired as the result of a member changing groups.
  • updated the Surface to restore the current zoom, pan location and transform origin in the loadState method


21st June 2018

  • updated to Community edition 2.7.7
  • updated view documentation and database visualizer application to take out allowLoopback and allowNodeLoopback flags. These are supported, but not in a view, only in a model.


17th June 2018

  • updated to Community edition 2.7.5


16th June 2018

  • updates to documentation


14th June 2018

  • fixed an issue where after autoSizeGroups had been called, the new group sizes were not known by the surface widget, causing zoomToFit to fail.


14th June 2018

  • locationFunction in the Absolute layout is now given the current group as the second argument, when it is called during a group's layout of its child nodes.


27th May 2018

  • upgrade to Community edition 2.7.3


25th May 2018

  • upgrade to Community edition 2.7.2
  • consolidated the various layout demonstrations into a single demonstration


16th May 2018

  • added typings information for jsPlumbToolkitIO
  • upgrade to Community edition 2.6.12


30th April 2018

  • updates to the Typescript typings files
  • moved BaseNodeComponent out of the angular demo code and into the core Toolkit Angular integration
  • reworked the Angular 4/2 demonstration to include the Angular router.
  • added Angular 5 demonstration
  • fixed an issue in BaseNodeComponent where the component did not clean itself up properly.


17th March 2018

  • fix for nodes being made visible having edges to non visible nodes. previously these edges would be made visible.


16th March 2018

  • fix for the isVisible test on nodes
  • added zoomToVisible method to the Surface widget
  • added zoomToVisibleIfNecessary method to the Surface widget
  • upgrade to Community edition 2.6.9
  • added optional filter parameter to zoomToSelection method on the Surface widget.
  • added sizeGroupToFit(group) method to Surface widget


9th March 2018

  • upgrade to Community edition 2.6.8
  • added support for multi selects to the Dialog helpers.
  • Node factories and Group factories now return the newly created values.


8th February 2018

  • upgrade to Community edition 2.6.7
  • upgrade to Katavorio 0.25.0


4th February 2018

  • fixed issue causing the community instance rendering content to be detached from the Surface if clear called before data loaded.


2nd February 2018

  • upgrade to Community edition 2.6.5
  • upgrade to Katavorio 0.24.0
  • Added a CSS style rule to the defaults css to suppress the pointer events on an element that was created by Katavorio in response to a drag in which the element should first be cloned.


27th January 2018

  • updates to the Angular system js demo to bring it back to working


26th January 2018

  • The Toolkit's Typescript typings file now includes the type information for the Community edition, exported as module jsPlumb
  • Typescript typings added to package.json and included in built .tgz package


26th January 2018

  • typescript .d.ts updates
  • upgrade to Community edition 2.6.3


24th January 2018

  • upgrade to Community edition 2.6.2
  • vast performance improvement in the clear method of the Toolkit.


20th January 2018

  • upgrade to Community edition 2.6.0
  • documentation updates
  • Typescript .d.ts updates
  • rename generator input on Angular jsplumb-palette component to dataGenerator, which is the name that the docs discuss.


14th January 2018

  • upgrade Community edition to 2.5.13
  • fix for the setViewportCenter method of the Surface widget
  • fix to ensure magnetize routine is aware of node size changes
  • update docs to remove outdated references to refreshNode, refreshPort, refreshEdge and their related nodeRefreshed, portRefreshed, edgeRefreshed events.


29th December 2017

  • improved location calculation for nodes dragged and dropped from a node palette.


23rd December 2017

  • fix overzealous event consumption


21st December 2017

  • upgraded to Community edition 2.5.10
  • fix for the case that the surface widget is inside some element that has been scrolled; drop on canvas and zoom were deriving incorrect values for the mapped location on the canvas.


13th December 2017

  • added experimental support for using the mouse wheel to pan (set wheelPan:true on a render call)
  • upgraded to Community Edition 2.5.9


8th December 2017

  • added new layout type "Balloon". Arranges nodes in clusters.
  • added HIDDEN and COLOR to supported input types for Dialogs
  • exposed apply and extract methods on Dialogs to allow users to bind data object to DOM manually.
  • upgrade to Community edition 2.5.8. Fixes an issue with disappearing connectors after updateEdge called.


12th November 2017

  • Added optional basic connection debugging to the Surface widget.


7th November 2017

  • Minor updates to the Angular Groups demo page.


1st November 2017

  • Upgrade to Rotors 0.3.18, which contains a fix for the r-html tag.


29th October 2017

  • Miniview hides/shows nodes when they are hidden/shown in its associated Surface.


22nd October 2017

  • upgrade to Community edition 2.5.7.
  • suppress node dragging when user is pinch-zooming.


18th October 2017

  • added support for mouse events to jtk-source and jtk-target elements that are declared as Ports (via the existence of an port-id attribute). Previously these elements could only be mapped to mouse events if they were declared at a Node scope.

  • updated bundled Community edition to 2.5.6, which includes a minor fix for class name manipulations on SVG elements in Chrome.


11th October 2017

  • minor updates to the layout magnetization engine


8th October 2017

  • upgrade to community edition 2.5.5
  • fix an issue with the Spring layout failing to treat left:null and/or top:null as an absence of value in the positioning data, when absolute backing is switched on.


4th October 2017

  • upgrade to Community edition 2.5.2. Fixes an issue with dragging to any grid size other than [10,10].


6th September 2017

  • No longer refresh the entire layout each time a new Edge is added. Add support for refreshLayoutOnEdgeConnect as a parameter on the render call, to allow users to override this behaviour.
  • Angular 1.x revalidates a node after new edge added, to prevent errors resulting from the asynchronous nature of node painting.
  • Add more methods to the Toolkit typings file
  • Switched to a more consistently successful way of importing toolkit typings in package.json.


29th August 2017

  • Added support for autoSizePadding to Group definitions.


28th August 2017

  • Added support for optional endpoint attribute on jtk-source and jtk-target elements. If present, an endpoint is created for the node instead of its entire element being converted into a source or target. This is the equivalent of a jtk-port element in that it creates an Endpoint, but connections are made directly on the Node.
  • Upgraded community edition to 2.5.1 (provides fix for an issue with overlays disappearing when calling setType on an Edge)
  • Added more methods to the Toolkit typings file


22nd August 2017

  • added originalData to the params passed back to nodeUpdated, portUpdated and edgeUpdated events.
  • upgraded CLI version to 1.3.0 in the Angular demos
  • fix for the case that a new edge is added during the edgeAdded callback of the Surface class; the edge was being added to the model but the UI was not rendering it.
  • upgrade Community edition to 2.5.0


12th August 2017

  • fix issue with safari zoom operating backwards to all other browsers

  • add portUpdater - an optional function that is called when an update occurs to a Port.


28th July 2017

  • fixed issue with rendering in Angular 4/2 Node components. The initial data was not being applied prior to the Toolkit checking a rendered Node's dimensions.

  • code documentation updates

  • improved the accuracy of the method by which the Toolkit determines that Nodes dragged from a palette have been dropped on a Group.

  • package Angular 4 integration as a tgz, for inclusion in package.json.

  • add support for Groups to the active filtering support in the Surface.


18th July 2017

  • added wheelReverse option to Surface widget.


14th July 2017

  • support custom export type in syntax highlighter


10th July 2017

  • added getViewportCenter method to Surface widget
  • the graphCleared event is now fired after the graph is emptied, and before the graph is emptied, when graphCleared used to be fired, graphClearStart is fired instead.


23rd June 2017

  • fix an issue where hiding a connection that was attached to an endpoint that has other connections causes those other connections to be hidden too.


20th June 2017

  • upgrade Rotors to 0.3.17
  • upgrade Community edition to 2.4.3


15th June 2017

  • fix to get the Surface class correctly exported from jsplumbtoolkit
  • workaround for AOT issue when lifecycle methods declared on superclasses
  • use Angular CLI as the default for Angular demos
  • fix issue with an edge dragged from one endpoint to another - the target was being incorrectly set as the Node on which the endpoint resided, not the endpoint's associated Port.


25th May 2017

  • upgrade to community edition 2.4.2
  • fix link to angular integration docs


10th May 2017

  • updated to Rotors 0.3.16


10th May 2017

  • updated the code that handles a moved connection to ensure it treats Ports correctly.


9th May 2017

  • remove all String refs from React demo and from docs for React demo
  • minor documentation updates


8th May 2017

  • Upgrade to Community edition 2.4.0
  • Support Angular 4 (when we say 'Angular' now, we mean Angular 4. Angular 2 and Angular 1.x are labelled specifically).
  • Upgrade to Webpack 2 and related grunt-webpack in React and Webpack demo pages
  • replaced String refs in React integration with the callback pattern.
  • Added Angular CLI version of the Angular 4 flowchart demo
  • Added support for onDrop to the jsplumb-palette directive in the Angular 1.x integration.


30th April 2017

  • group auto size now correctly takes into account the group's drag area
  • when adding a node to a group, if left/top properties are set in the data, they are used as the node's position.
  • fixed an issue with groups not being cleared properly from the underlying Community instance when using the clear method


26th April 2017

  • update to version 15.5.0 in the React integration demo.


24th April 2017

  • added support for onBeforeAutoSave and onAfterAutoSave optional functions to Toolkit's auto save functionality.


24th April 2017

  • upgrade to Community edition 2.3.5
  • nodes dropped on groups now assigned their correct position


20th April 2017

  • fix issue with data not being exported on edges whose source is a Group


8th April 2017

  • Fixed issue with source element creating multiple connections after drag.


30th March 2017

  • added support for magnetize option in dragOptions of render call. Instructs jsPlumb to adjust a dragged Node/Group so that it does not overlap any other Nodes/Groups(at drag end).


22nd March 2017

  • upgrade to Community edition 2.3.2 (which includes Katavorio 1.19.2)


16th March 2017

  • upgrade to Community edition 2.3.1
  • update to ensure that endpoints/anchors in Port definitions correctly override endpoints/anchors in Edge definitions.


8th March 2017

  • Updated Angular 2 integration to force a render of each node as it is created. This ensures that any jtk-port, jtk-source or jtk-target elements are fully rendered before we try to process them.


8th March 2017

  • added support for isEndpoint flag in port definitions in the view. Causes jsPlumb to use an Endpoint instead of making an entire element a source/target.
  • added support for jtk-port, jtk-source and jtk-target elements to Group templates.
  • updated the Surface widget to correctly render isEndpoint Ports when new Ports are added programmatically to a Toolkit instance.
  • updated the Angular docs with a short discussion on the perils of the asynchronous nature of Angular's rendering cycle.


1st March 2017

  • added support for anchor-x, anchor-y, orientation-x, orientation-y, offset-x and offset-y attributes in the jtk-port element.


27th February 2017

  • updated the exportData method to correctly export edges between Groups.


27th February 2017

  • add grunt to webpack package json


27th February 2017

  • Fix issue with preinstall script when running on Windows


21st February 2017

  • setPosition method of Surface widget now works for Groups too
  • animateToPosition method of Surface widget now works for Groups too.
  • toolkit and renderer are now passed as arguments to any events defined in your views.


16th February 2017

  • Upgrade to Community edition 2.3.0
  • Community edition is now bundled into the Toolkit edition - no separate import is required.
  • Addition of Angular 2 integration support
  • Addition of Webpack bundling example
  • Addition of React integration support
  • Addition of Vue 2 integration support
  • npm pack of the Toolkit code is shipped with licenses
  • Documentation updates
  • Fixed issue that was preventing deselection of Group elements
  • Fixed issue with update of moved nodes in miniview.
  • Fixed issue with duplicate Nodes being allowed inside Groups
  • doNotFireEvent parameter removed from Toolkit's addToGroup method.
  • Fixed issue with Groups not being removed from DOM on clear.
  • Surface widget fires lasso:end event on lasso mouseup. No arguments are passed to the callback method.


3rd January 2017

  • Added getClusters method to Toolkit and to Graph


20th December 2016

  • Upgrade to Community edition 2.2.8


2nd December 2016

  • Added getEdgeAt method to Path
  • Added support for custom buttons on dialogs.


29th November 2016

  • Documentation updates for Hierarchical layout


28th November 2016

  • Documentation updates.


27th November 2016

  • upgrade to Community edition 2.2.6
  • setAbsolutePosition(el, xy[]) removed from the Surface widget. Use setPosition(el, x, y) instead. setAbsolutePosition is still used by Decorators.
  • Nodes added programmatically to Groups (via the Toolkit's addToGroup(Group, Node) method) are placed in the center of the Group's drag area. Previously no change was made to their offset and this more often than not resulted in the Node not appearing inside the Group.
  • upgrade to Rotors 0.3.12
  • support HTTP headers in save method and in auto save functionality.


28th October 2016

  • Added support for Groups

  • Added support for multiple root nodes in hierarchical layout

  • Aliased the getEdge method in Selection as getEdgeAt; this is more consistent with the API to access Nodes/Groups.

  • Support for custom template resolver in render call

  • Support for templates provided as a map of string s in render call.

  • Added a couple of helper methods to the jsPlumbToolkitInstance class for working with Edges:

    • selectAllEdges : Gets all edges in the Toolkit instance as a Selection object.
    • addAllEdgesToSelection : Adds all the Edges in the Toolkit instance to the Toolkit's current selection.


18th October 2016

  • fix issue with ingestNode method causing miniview to fail with ingested community instance.
  • ensure ingested nodes are registered with the layout.


20th September 2016

  • fix issue that was causing a loopback to be added twice to the object it belonged to (although not to the Toolkit itself)


6th September 2016

  • update to jsPlumb 2.1.7, containing a few minor connection fixes.


29th August 2016

  • further small fix to whitespace rendering


28th August 2016

  • fixed issue with whitespace rendering inside templates (in some cases whitespace was being trimmed when it should not have been)
  • added setSourceEnabled, setTargetEnabled, setEnabled methods to Surface widget


18th August 2016

  • fixed issue with setVisible method on the Surface widget, in which connections from some element were made visible when the element was made visible, even if their other element was not currently visible.


12th August 2016

  • upgraded Community edition to 2.1.5, which contains Mottle 0.7.3, which itself has a fix for the synthesized tap event on Safari and Firefox.


8th July 2016

  • upgrade to community jsPlumb 2.1.4
  • reinstate missing apps (hello world, skeleton app)


19th May 2016

  • upgrade to jsPlumb Community 2.1.2, which contains a couple of bugfixes for click events and for overlays that were not being removed when switching types.


6th May 2016

  • upgrade to jsPlumb Community 2.1.1
  • fix for an operator precedence issue in the default object factory that was causing the object's type to be forgotten.
  • upgrade to Rotors 0.3.11 (fix for deeply nested template rendering)
  • fix for default JSON parser when Ports that have no nodeId are present.


21st April 2016

  • api documentation fixes
  • upgrade to jsPlumb community 2.1.0 (a couple of memory leak issue fixes)
  • upgrade to Rotors 0.3.10
  • upgrade to Farahey 0.7
  • memory leak fixes
  • fix issue with miniview not repainting after expansion


17th March 2016

  • update Rotors to fix possible infinite loop with nested templates


9th March 2016

  • update Rotors


9th March 2016

  • fixed an issue with the auto save: it was not suspended during data load.


8th February 2016

  • fix for inverse lasso: the mask does not appear until the user starts to drag.


1st February 2016

  • fix for state deactivate - parameterised overlays now retain their values.


25th January 2016

  • internal build script update to community 2.0.6


24th January 2016

  • update to Rotors 0.3.7, which contains a fix for parameterised attributes on custom elements, and support for an 'updated' callback in custom tags.
  • add support for inverted mode to lasso, in which unselected parts of the UI are masked, rather than the default behaviour of drawing an element to represent the selected area.
  • update community jsPlumb to 2.0.6. Not a required update for 1.0.14; 2.0.5 is ok.


11th January 2016

  • getAllEdges in jsPlumbToolkit no longer takes parameters, and actually works properly now.
  • added getAllEdges to Graph class.
  • small tidy up in Angular demo templates to fix IE* rendering issue.


14th December 2015

  • Update to Rotors to support attributes with colons (such as xlink:href on an svg image)
  • Fix updateNode bug: nodes were not being removed from previous posses before being possibly added to new ones.
  • Posses are assigned to elements in bulk after load, in case one of them has tried to access a node that is not yet loaded.
  • Added batch function to Surface widget, to run a function while rendering and events are both suspended.
  • Added support for rectangular tiles in the tiled background of a Surface widget
  • Fixed issue that caused an error when dragging an existing edge from one source to another.
  • zoomToFit on the Surface widget now defaults to filling 90% of the viewport. This can be overriden by supplying a fill parameter:
  • The link to filters in the documentation no longer gives a 404.
  • Fixed an issue that was occasionally causing multiple buttons in dialogs.
  • Fixed an issue that was causing dynamically populated overlays to revert when a new State was applied.
  • Introduced the concept of typeProperty (and edgeTypeProperty / portTypeProperty). This reflects the fact that for the majority of applications, the function used to determine some object's type simply looks at the value of some given property. By providing the name of this property, rather than a typeFunction, the Toolkit is then able to write an object's type as well as read it.
  • Added support for setType method
  • Added small fix to avoid buttons being added more than once to a dialog.


23rd October 2015

  • upgrade to Community edition 2.0.4. Contains a couple of changes to the way posses are handled, and the ability to drop elements onto other elements. Also contains a fix for the computation of offsets when dragging nested elements.
  • update to Rotors to support attributes with colons (such as xlink:href on an svg image)
  • update to Rotors to include <r-html> tag (for embedding HTMl rather than plain text)
  • change pan/zoom widget so it no longer consumes all mouse events it does not process.
  • jsPlumbToolkitUtil.ajax takes optional headers map (for setting http headers).
  • jsPlumbToolkitInstance.load takes optional headers map (for setting http headers).
  • jsPlumbToolkitInstance.load sets Accept:application/json HTTP header if headers not supplied.


16th October 2015

  • added adHocLayout method to Surface widget. This lets you run a named layout one time on your data.


16th October 2015

  • upgrade to Community edition 2.0.3 (changes to Posse dragging, minor bugfixes)
  • Removed a number of spurious animations that were unnecessarily occurring while the Surface widget initialised a paint.


12th October 2015

  • Upgrade to Community edition 2.0.2 (for documentation improvements)


7th October 2015

  • Upgrade to Community edition 2.0.1
  • Documentation improvements


6th October 2015

  • upgrade to Community edition 2.0.0
  • upgrade to Rotors 0.3.5
  • nodeUpdated/edgeUpdated/portUpdated events are given the updates that the user passed in (issue 61)
  • beforeConnect interceptor gets edgeData as third argument (if some data was returned from beforeStartConnect) (issue 62)
  • Add the ability to 'refresh' the set of nodes registered via a registerDroppableNodes call on a Surface.
  • Add centerOnAndZoom function to Surface
  • modelLeftAttribute and modelTopAttribute, which specify the left/top attribute against which to store node positions, now support dotted notation, ie. can refer to a nested element.
  • Added zoomToSelection to Surface widget.


31st August 2015

  • Reinstate animation when panning the surface
  • Expose setPan method on the surface
  • Support animation in the setPan method
  • Support enableAnimation:false flag in render method. default is true.
  • Upgrade to Community edition 1.7.10 (bugfix for animation when providing 0 as param value)


29th August 2015

  • Several improvements to the ingest functionality, including the ability to subsequently ingest new elements.
  • Upgrade to Community edition 1.7.9


21st August 2015

  • Fix loading issue with directed edges in basic JSON parser.
  • Add setDirected method to Edge
  • Add tracePath method to Renderer
  • Add Path Tracing demo


10th August 2015

  • Add traversePath method to Surface (and animateOverlay method to Connection)
  • Upgrade to Rotors 0.3.0
  • Fix issue in Hierarchical layout in which circular references in the hierarchy cause an infinite loop.


1st August 2015

  • Addition of fixElement and floatElement methods to pan/zoom widget and Surface, and exposing of these methods to the layout decorator functionality.


19th July 2015

Initial release.