Skip to main content



April 5th 2024


  • Fixed an issue with the Surface component using a Selection as its datasource.


April 4th 2024


  • Fixed an issue with the type of a new port not being set correctly on the Port object via the addNewPort method on a Toolkit instance.

  • Fixed an issue whereby dragging multiple nodes causes miniview to fail to update properly in activeTracking mode

  • Fixed issue with Firefox wheel direction being opposite to other browsers

  • Updates to the endpoints and anchor docs

  • Introduced, a new and improved home for our api documentation.


March 26th 2024



  • The miniview now actively tracks when a node/group is being dragged in the related Surface. This behaviour can be switched off via the activeTracking flag in the miniview options.

  • Using wheel zoom or pinch zoom on the miniview now results in the related Surface zooming in on the point that maps to where the user is zooming on the miniview. Prior to 6.17.0 the related surface would be zoomed in on the last place zoomed on the surface itself.

  • Nodes/groups can be clicked in a miniview and the related Surface will pan to center the clicked node/group. This behaviour is switched on by default and can be switched off via the clickToCenter flag in the miniview options.


March 25th 2024


  • We've made a major improvement to orthogonal connector path editing, for which a picture is definitely worth a thousand words, so we'd recommend checking out either the Flowchart builder starter app, the documentation about orthogonal connector path editing, or the 6.16.0 release announcement. In a nutshell, it's now far harder for a user to inadvertently get the UI into the situation that a connector doubles back onto itself underneath a vertex, which makes for a more intuitive experience.

  • It's no longer necessary to declare the BaseNodeComponent or BaseGroupComponent mixin when using the Vue2 or Vue3 integration packages. These mixins are automatically added by JsPlumb if not specified in your component.


  • Several events that were previously fired by the UI layer but not consumed by the Surface have been removed, as have their associated constants.
  • The UI rendering layer's "lists" package has been removed. This package was part of the Community edition and was not exposed via the Toolkit API.


February 18th 2024


  • When a new node is dropped onto some existing node via the drop manager, the onVertexAdded callback on SurfaceDropManager now passes back information about the vertex on which the new node was dropped.

  • Support for the onVertexAdded callback was added to ShapeLibraryPalette

  • Added new panWithMetaKey option to Surface render params.


February 16th 2024


  • Added support for optional cornerRadius to Segmented connector.
  • Fixed issue with path editor incorrectly trying to edit an edge that had been aborted by a beforeStart interceptor.


February 2nd 2024

  • This is a re-release of the last version in the 2.x branch (2.4.6), upgraded with support for Angular 16+.


January 31st 2024


  • Added a fix for a very specific orthogonal geometry loading issue, involving nodes in a straight line that are close together.
  • Updated setPan method to fire a pan event.


December 28th 2023


  • Fixed an issue with the surface's destroy method when a background image was in use.
  • added autoSaveType option to Surface, allowing you to specify which exporter to use when auto save is switched on
  • added optional type to AutoSave constructor, allowing you to specify which exporter to use when saving.


  • The exportData method no longer writes a ports section into the output. You can use legacy-json as the type when exporting data if you still need this, but in 7.x that will be removed.


We're continuing our internal refactoring to remove duplicated and unnecessary code, with this release seeing several key methods abstracted and pushed down to the UI core.


December 20th 2023


  • Added support for exporting a Path or Selection (including the current selection for some Toolkit instance) to an SVG/PNG/JPG.

  • New layout GridLayout added. This layout places elements into a grid, optionally with a fixed number of rows or columns, and with the ability to align items to the left/top/bottom/right of each cell.

  • Group size preview pane shown when dragging an element inside an elastic group is now displayed on ancestors of the group if they are also elastic.

  • Added the ability to run an ad-hoc layout on a group, via the adHocGroupLayout method on a surface.

  • Support for setting node/group sizes from the model has been added, including support for specifying default node/group sizes in the event that the vertex data does not contain size information. Read more about this in our docs -


  • Internal updates to React integration to improve performance and reduce code duplication.
  • Refactoring of various positioning methods to remove duplicated code
  • Improvements to group auto sizing when nested groups are expanded or collapsed.


  • React integration no longer supports setting asynchronous to false on the JsPlumbToolkitSurfaceComponent. Asynchronous is mandated.


December 10th 2023

In 6.10.0 we have given group rendering an overhaul, adding some nice new features and fixing a few minor issues with the existing features. We've also updated the code to play nicely with Svelte Kit SSR, and added a couple of useful features to the Surface.


  • New flag elastic available for group rendering. An elastic group shrinks and grows as the nodes/groups inside of it are dragged around.

  • Added new panFilter optional function to Surface options, allowing you to control at runtime whether or not panning should be enabled.

  • Added support for optional minSize parameter in group definitions in the view. This is of type Size.

  • Added support for optional padding parameter in group definitions in the view. When autoSize is set on a group, this padding will be set around the child nodes/groups of an auto sized group. Default value is 0.

  • Added support for optional allowShrinkFromOrigin flag on group definitions in the view. Implicitly true when autoShrink or autoSize is true, you can set this to default if you don't want your groups to be able to shrink from the left/top edge.

  • When dragging a child element from a group, the parent group is assigned a CSS class of .jtk-drag-original-group. You can attach a z-index rule for this class to ensure that nodes/groups you drag from a given group will appear on top of any target group.

  • Added setEnabled(boolean) method to the Snaplines plugin, allowing you to enable/disable the plugin at runtime.

  • Added support for passing in styles to SVG exporter, for inclusion in a style element in the SVG export.


  • Improvements to orthogonal routing to handle vertical alignment in Hierarchy layout

  • Updates to the browser UI core code to fix a couple of issues that were causing the code to fail to load in SvelteKit SSR.

  • The behaviour of autoShrink and autoSize has been improved to support shrinking a group from its left/top edge where applicable. Previous versions of the Toolkit could only shrink a group from its right/bottom edges.

  • Fixed an issue with group auto size when an element is dragged into the negative axis. Previous versions of the Toolkit would size the group to fit the new content bounds but leave the dragged element hanging out of the group. In 6.10.0 the group is shifted to adjust for this.

  • Several improvements were made to the interaction between a Toolkit instance and its associated undo/redo manager, to ensure that no stray commands are tracked by the undo/redo manager during data load/append.


  • The maxSize option to group definitions is now a Size object, with a w and h property, instead of an array of [w,h].

  • autoSize switches on autoShrink by default now. Consider just using autoGrow if this is not what you want.

  • When autoSize or autoShrink is set, groups may now adjust their left/top edges to fit the content (taking into account any minSize set on a group). You can set allowShrinkFromOrigin:false to suppress this behaviour.

  • When dragging an element that is a child of a group, the original group is now assigned .jtk-drag-active and .jtk-drag-hover CSS classes, where in previous versions it was not. We think this provides a better experience for users but if you prefer the old behaviour you can use the fact that the .jtk-drag-original-group class is now added to the parent group to setup rules to mimic the old behaviour.


A number of internal code changes have been made in 6.10.0 to reduce code duplication. The Toolkit edition, up until a few versions ago, used the Community edition as an external dependency, which meant that certain constructs and responsibilities were duplicated. The Community edition has now been ingested into the Toolkit edition's codebase and little by little we are refactoring to remove these duplicates.


November 30th 2023


  • Packaging updates


November 24th 2023


  • Updates to React integration to better support Next.js
  • Updated the wheel listener to check for existence of document before testing for available event (SSR fix for Next.js)


November 22nd 2023


  • The Community ingest code has been removed. The Community and Toolkit editions in fact diverged several versions back and this code was likely not working in many scenarios. No Toolkit licensees use(d) this code.



  • Support for generating edge routing information was added to the Hierarchy layout.
  • New plugin edgeRouting added. This plugin can ingest the edge routing information generated by a Hierarchy layout and adjust the routes of the edges in the UI, with support for separated orthogonal, bus orthogonal and direct line modes.
  • Support for the number input type was added to Dialogs
  • Support for the number input type was added to Inspectors


  • A fix was added to the Orthogonal connector's geometry import routine to catch an unexpected formatting error in the geometry.


November 9th 2023


  • Added support for defaultSize to node/group definitions. Allows you to fix the size for a given vertex type without requiring that the values be in the vertex's backing data.

  • Added support for nodeSize to UI defaults. This is a fallback for the case that your vertices need to be rendered with a specific width/height but the values are not necessarily going to be available in the backing data.


  • Fixed an issue with loading hierarchical-json over ajax - the content type was not correctly recognised and the data not parsed to JSON.


November 8th 2023


  • The ImageExporter class now supports an optional width or height for the exported image. Width takes precedence; the aspect ratio of the underlying content is always maintained.
  • Added optional onShow and onDimensionsChanged callbacks to ImageExporterUI.
  • Added the ability to ImageExporterUI to specify a list of sizes from which the user should be able to choose for their exported image.


November 4th 2023


  • Shape libraries now support defs - snippets of SVG that you can declare in the header of a shape set and reference in the individual templates. This reduces bloat and increases readability.


  • Improvements to the hierarchy layout's crossing stage to reduce the chance of overlapping edges
  • Improvements to SVG/PNG/JPG export UI
  • Improvements to SVG export output: edges are drawn first in the SVG so that nodes will be placed on top in non-browser settings.


October 30th 2023


  • Fixed an issue writing attributes to the xlink namespace in the vanilla template engine
  • Updated template parsing code to better handle extraneous whitespace.
  • Improvements to the preview view of the svg/png/jpg export code
  • Updated jsdocs for Vue 2 and Vue 3 integration packages
  • Added the ability to register a Surface on Vue 2 and Vue 3 manually - allowing you to use vanilla templating inside of a Vue app.


  • The order of arguments in the fixElement method has been switched from (el:Element, constraints:FixedElementConstraints, pos:PointXY) to (el:Element, pos:PointXY, constraints?:FixedElementConstraints). This better reflects the fact that constraints is an optional argument whereas pos is not.


October 25th 2023


  • Added support for initialSet parameter to the jtk-shape-palette component in the Angular integration.
  • Added support for initialSet parameter to the ShapeLibraryPalette component in the React integration.
  • Added support for initialSet parameter to the ShapeLibraryPlugin component in the Vue 2 integration.
  • Added support for initialSet parameter to the ShapeLibraryPlugin component in the Vue 3 integration.
  • Fixed issue with extracting value from SELECT on change in inspectors


October 19th 2023


  • New plugin Snaplines added. This provides your users with visual cues about the alignment of the elements in their UI.

  • Added a new shape set - basic shapes. This includes things like rectangles, ellipses, triangles, hexagons, octagons etc. We've added these to the Flowchart Builder starter app.

  • The surface component now supports an editablePaths flag, which, if set, sets up a path editor internally and allows you to call methods on the Surface directly to edit paths. It also ensures the path editors are included and will not slip through any tree shaker.

  • The drawing tools plugin now supports a constrainGroups flag, which, if set, will prevent the group from being resized to such a point that any of its child members are out of the viewport.


  • Fixed an issue with the grid background plugin where if any elements were positioned in the negative x or y axis the surface's clamping was computed incorrectly.

  • The drawing tools plugin will not now resize a collapsed group.

  • Improvements to API docs to remove a bunch of internal members.

  • Some CSS classes were added for basic styling of a shape library palette.

  • The shape library palette takes an optional initialSet parameter, allow you to specify an initial shape set to show and hide the others.

  • When a single shape set is shown, the shape library palette doesnt show its title


October 13th 2023


  • Added ElementDragger helper class - use this to configure any DOM element that is not part of your canvas to be draggable.
  • Added a new starter application - "Neighbourhood Views" - showing how you can use the Toolkit to render dynamically changing selections.


  • Fixed an issue in the Svelte integration whereby a missing component mapping could cause an error.
  • Fixed an issue with the centerOn method that was introduced by some refactoring in 6.6.4.
  • Added support for getRootNode() method on HierarchyLayout, allowing you to dynamically specify the root node each time the layout is run.
  • Improvements to Hierarchy layout placement when the dataset consists of a set of unconnected nodes


October 10th 2023


  • Added cacheTemplates:boolean flag to VanillaInspector. In some cases you'll want to regenerate an inspector template based upon dynamic values in the object being inspected, and for that you'll want to turn the template cache off.

  • Improved the way the canvas animates in response to changes in zoom and position. Now uses requestAnimationFrame for that full 60 FPS experience.

  • Added new 'Orgchart' starter application


October 4th 2023


  • Fixed an issue in the inspector whereby edits were lost when the Toolkit's current selection is cleared
  • Updated inspector to commit values after enter keypress on text inputs and text areas
  • Fixed a sizing issue with the background element of an SVG text overlay
  • Added support for onMaybeClear to the React controls component - allows an alternative to the window alert confirming dataset clear.


September 26th 2023


  • Added attributes to Custom overlays to support auto rotation. See the overlay docs for more information.


September 20th 2023


  • Added dominant-baseline:middle to labels rendered by shape libraries.


September 20th 2023


  • Support for SVG/PNG/JPG export for Surfaces that are using a ShapeLibrary was added.

  • The Angular service was augmented with new methods to support exporting to SVG/PNG/JPG

  • The ShapeLibrary component now supports rendering labels to shapes as part of their SVG element.

  • A new flag useHTMLElement is supported on Label overlays. Setting to false will result in the Toolkit using an SVG text element for the label overlay, rather than an HTML element.

  • A new flag useHTMLLabel was added to edge definitions, which you can use to override the new default behaviour of using an SVG text element for the default label.


  • The ShapeLibraryPalette no longer registers a jtk-shape tag on the associated Surface. Instead, the shape library needs to be passed in the render options to the Surface. See shape library documentation for details.

  • When you specify a label in an edge type, the Toolkit now creates an SVG text element for it, rather than an HTML element.

  • By default, hover events are now switched off in the UI layer. We expect this change to affect almost nobody at all. For a full discussion of the reasoning behind this, see the documentation on rendering at You can switch them back on by setting hoverEvents:true in your render params.


  • Fixed an issue with the lasso plugin that would cause it to fail on devices with touch + pointer input methods.
  • Fixed an issue whereby a cssClass defined on an edge mapping would not be applied to a newly created edge.


September 3rd 2023


  • A new connector type - Segmented - has been added. This connector consists of a set of straight line segments, and can be smoothed to a set of bezier curves.

  • A path editor for the Segmented connector type has been added.


  • Orthogonal connector editor automatically trims any supplied geometry after load, to ensure the internal geometry is in a format that the editor can manage.

  • Fixed an issue whereby path tracing between groups was failing.

  • The jsplumbtoolkit-connector-editors.css stylesheet was refactored slightly, to introduce common base classes for edge handles, and to use CSS variables.

  • The controls component now detects the existence - or otherwise - of a Lasso plugin on the associated Surface, and does not draw the mode change buttons if the Lasso is not present.


August 30th 2023


  • Further fix for Orthogonal path recomputation when stubs are not active.
  • Fix for group load issue: when a group loaded via the load method declared it was a member of some group which was not part of the data load but was in the Toolkit, it could not be loaded.


August 30th 2023


  • The alwaysRespectStubs flag defaults to true in the Orthogonal connector now.


  • Fix for an issue with recomputing Orthogonal path when stubs are not active.


August 4th 2023


  • When dragging an edge, the class jtk-surface-edge-dragging is added to the surface container.
  • For licensees who hold a team license - 5 seats or more - the ES6 source code is now available as a separate download.
  • EdgePathEditor was updated so that it no longer requires anchorPositions to be passed in if these are defined on a node/port/group definition in the view.


  • Version 2.x is no longer supported.


July 29th 2023

Further packaging updates. No code changes.


July 28th 2023


  • Fixed an issue whereby overlays that had been programmatically added to an edge (eg via the edge path editor) would be hidden upon edge update.
  • Improvements to packaging for evaluators to include types directory.


July 27th 2023

This release contains only internal updates to packaging. No code changes.


July 25th 2023


  • EdgePathEditor was updated to ignore edges loaded programmatically via the load method of the Toolkit. Edges loaded in this way already have geometry set and do not need to be updated.
  • Updates to Orthogonal connector to better handle node drag when initial path consists of a single horizontal or vertical segment.


July 19th 2023


  • The EdgePathEditor now defaults to true for the activeMode option. Although this is a breaking change it in fact brings the behaviour of the path editor more into line with what people expect: any new edge that is dragged automatically has a geometry attached to it, meaning if the dataset is exported without the edge being edited it will be reinstated with the same path.


  • A fix was added to correct an issue introduced by the change to the EdgePathEditor in 6.2.10. Geometry is now correctly written to an edge that has been dragged by the user when activeMode is true (which, as mentioned above, is now the default).


July 14th 2023


  • The katavorio-drag-no-select class is no longer added to the document body during element drag. There was no corresponding style declared in the default CSS stylesheet, so it is unlikely this class is being used by anyone.


  • Inspectors were updated to ensure they close themselves if the object they are currently displaying is deleted from the dataset.
  • An update was made to the EdgePathEditor to ensure that edge geometry is written correctly when activeMode is set to true.
  • In the base port component and the miniview component in the React integration, the overridden props and state class members were removed, as their presence was causing React to report a warning in the console.


June 28th 2023


  • Added support for addHelperClasses flag in Surface dragOptions. Defaults to true. When false, prevents the Surface from adding classes to the canvas to indicate an element is being dragged.


June 23rd 2023


  • Update generic type parameter bounds in ShapeLibraryPalette and Angular service shape library methods to satisfy strict TS builds.


June 23rd 2023


  • Update ShapeLibraryImpl generic type parameter bounds to satisfy strict TS builds.


June 21st 2023


  • update controls component to set state attributes on its rendered root element rather than the container in which it resides.


June 20th 2023


  • added jsplumbtoolkit-edge-type-picker.css stylesheet
  • add visibility:visible !important to edge path delete button overlay.


June 20th 2023


  • Updated EdgeTypePicker to repaint itself after a window resize event, to ensure edges are painted in the right place.
  • added ControlsComponent, a component from our demonstration apps that might be useful for others.
  • fixed issue in connector editor package where re-editing an edge that it was already editing would cause any extra overlays to be removed.
  • fixed issue in bezier connector editor where control points were being dragged at twice the rate the mouse was moving.


  • The jsplumbtoolkit-connector-editors-orthogonal.css and jsplumbtoolkit-connector-editors-bezier.css stylesheets were removed. The styles contained in both of those stylesheets exist in the jsplumbtoolkit-connector-editors.css stylesheet.


June 17th 2023


  • Update shape library palette to support configurable iconSize property.


June 16th 2023


  • Updates to custom tag registration to allow shape libraries to be used without a ShapeLibraryPalette.


June 16th 2023


  • The default number of iterations for the ForceDirected layout was increased from 5 to 15.
  • Updated JS doc for ShapeLibraryImpl
  • Updated custom tag renderer to remove expectation that a rendered and/or updated function would always be provided.


June 16th 2023


  • Improvements to support for tree shaking

  • The drop manager now adds a jtk-drag-drop-current class to the element currently being dragged

  • Several enhancements were made to the drawing tools plugin - placement of new nodes is now correct when the surface has a zoom level of anything other than 1, and if the surface has a grid applied this is also honoured.

  • The default styles for edge path editors no longer contain a rule for painting the edge path to a specific color. For applications in which the user has control over the edge color this is a better experience. For users who wish to add this functionality that can be done via the inclusion of a CSS rule - see documentation on CSS.

  • Updates to the default template engine to ensure that elements written by custom tags are correctly updated when their vertex is updated.

  • The default number of iterations for the ForceDirected layout was reduced from 50 to 5.


  • A new module browser-ui-shape-library was added. This package contains various helper components for working with SVG shapes, for applications such as flowchart builders, entity relationship diagrams, etc. For a full discussion of the capabilities of this module, see

  • Support for the browser-ui-shape-library module was added to the Angular, Vue2, Vue3, React and Svelte integrations.

  • A new module browser-ui-inspector was added. This contains some support code for implementing form-based object inspectors that integrate tightly with a Surface/Toolkit instance. For a full discussion of the capabilities of this module, see

  • Support for the browser-ui-inspector module was added to the Angular, Vue2, Vue and React integrations.

  • Added the canvasDropFilter to SurfaceDropManager. The parent class DropManager already supported this but it was not exposed on the SurfaceDropManager prior to 6.2.0.

  • An optional dragSize parameter can be supplied to the drop manager, to set the size of nodes/groups that are being dragged.

  • Support for a modelEvents object has been added to the Surface's constructor. Instead of having to register model events after the fact you can now supply them with your render parameters.

  • The concept of 'mode' was added to selections: you can specify that a given selection may only contain one type of object (eg nodes, groups or edges), or that it can contain a mix. For more information see the documentation at

  • Edge editors now snap anchor placeholders to the closest anchor when the user is relocating an anchor. Previously the placeholder would not be snapped until the use released the mouse button. The previous behaviour can be reinstated by setting snapToAnchors:false in the options you pass to the startEditing method.

  • When dragging a new edge, the Surface element will now honour a type specifier returned from a beforeStartConnect interceptor. In previous versions the type would only be honoured once a new connection had been established. For more information see

  • Support for 'fragments' was added to custom tags in the default template engine. This is more of an internal feature, but could be leveraged by advanced users of the Toolkit. See documentation on templating for further information.

  • Label overlays now have a jtk-label-overlay class added to their element.

  • The default CSS stylesheet was updated with a visibility:hidden rule for .jtk-label-overlay:empty. For label overlays on which the label's value is currently an empty string, this will hide the overlay.

  • The CSS for the "controls" component that we ship along with each of the library integrations was copied out from jsplumbtoolkit-demo-support.css and into jsplumbtoolkit-controls.css, and the various selectors were updated to be more specific.


  • Simple edge styles are now enabled by default on the Surface component. They can be switched off via simpleEdgeStyles:false in your render options.

  • The PanZoom widget, which is used internally by the Surface, has been decoupled from the Surface and its constructor parameters have been updated. This will only be an issue for licensees who use the PanZoom stand alone.

  • The jsplumbtoolkit.css defaults stylesheet was updated to use CSS variables. This is only really listed as a 'breaking' change out of an excess of caution. There are very few browsers in use nowadays that do not support CSS variables.

  • The important modifier was removed from the default style for the .jtk-surface-selected-element class, which is applied to vertices that are part of the Toolkit's current selection.


  • Fixed issue with anchor placeholder not being centered correctly when editing an edge.
  • Fixed issue with Hierarchy layout where certain combinations of unattached roots and multiple parents could cause the layout to fail, due to a cache not being cleared.


May 12th 2023

  • Updates to build for evaluators


May 11th 2023

  • Angular integration is now built as an Ivy lib (necessary in order to support Angular 16)

  • Hierarchy layout has been updated to support centering child nodes with respect to their parent, mimicking the behaviour of the Hierarchical layout.

  • Hierarchical layout is now marked deprecated. Use Hierarchy instead.


  • Internally, the Hierarchical layout no longer uses a getChildEdges helper function, but rather a getChildVertices function. This change will only affect those who are using the Hierarchical layout with a custom edge finder. It has no impact on the functionality of the layout itself.


April 18th 2023

  • Internal code reorganisation. No functional change.


April 14th 2023

  • Fixed an issue in the Community edition where endpoints to set to invisible would be repainted under certain revalidation scenarios.


April 5th 2023

  • Packaging updates for evaluation builds


April 4th 2023

  • Fixed issue with the packaging of the Vue integration.


April 4th 2023

  • Added bezier and statemachine connectors to @jsplumbtoolkit/browser-ui


April 4th 2023


  • Support for the original templates syntax (where variable interpolations are of the form ${...}) has been dropped, throughout the Vanilla toolkit and the dialogs. The code from the previous templates-2, dialogs-2 and browser-ui-vanilla-2 packages has been retained in the @jsplumbtoolkit/browser-ui package, and the code from templates, dialogs and browser-ui-vanilla has been dropped.

  • The Spring layout has been removed. Use ForceDirected instead.

In order to support the single @jsplumbtoolkit/browser-ui package, several factory methods were renamed/removed:

  • newInstance(surface) in previous @jsplumbtoolkit/browser-ui-anim removed. Use new SurfaceAnimator(surface) instead.

  • createManager in previous @jsplumbtoolkit/drop package is now exposed as createDropManager in @jsplumbtoolkit/browser-ui

  • createSurfaceManager in previous @jsplumbtoolkit/drop package is now exposed as createSurfaceDropManager in @jsplumbtoolkit/browser-ui

  • newInstance(surface:Surface, options?:ConnectorEditorOptions) from previous @jsplumbtoolkit/connector-editors method removed - use new EdgePathEditor(surface:Surface, options?:ConnectorEditorOptions) instead.

  • initialize() method from previous @jsplumbtoolkit/connector-editors-bezier is now exposed as initializeBezierConnectorEditors() on @jsplumbtoolkit/browser-ui.

  • initialize() method from previous @jsplumbtoolkit/connector-editors-orthogonal is now exposed as initializeOrthogonalConnectorEditors() on @jsplumbtoolkit/browser-ui.

  • newInstance(params:DialogsOptions) from the previous @jsplumbtoolkit/dialogs-2 package has been removed. To instantiate Toolkit dialogs now, use new Dialogs(params).

  • The HORIZONTAL and VERTICAL axis identifiers from the HierarchicalLayout have been moved into the enum HierarchicalLayoutOrientations.

  • The code from the related -drop package for each library integration (@jsplumbtoolkit/browser-ui-angular-drop etc) has now been pulled into the library integration's main package


March 28th 2023

  • Added support for injecting props into components in the Vue2/Vue3 integration packages.


March 21st 2023

  • Update to the fix applied in 5.13.5


March 18th 2023

  • Fixed issue with endpoint cleanup after aborted connection drag


February 26th 2023

  • Packaging updates for integrations


February 18th 2023

  • Packaging updates for the layout-hierarchy package


December 7th 2022

  • Updated the lasso plugin to remove a global reference to document and instead use a lazy init method


November 28th 2022


  • The getAllEdges method of the Group class no longer returns edges connected to child vertices of the group, instead behaving exactly as getAllEdges does on Node.


  • Group now has the method getInternalEdges, which returns edges connected to child vertices of the group.
  • Improvements to the placement stage of the Hierarchy layout when invert is set to true.
  • added support for gatherUnattachedRoots flag on the Hierarchy layout - see documentation for discussion.


November 9th 2022

  • Internal refactoring of the templates-2 package


November 8th 2022

  • Updates to Angular overlay handling when an edge factory is in place.


November 7th 2022

  • Updated Angular overlay handler to ensure correct initialisation when new edges are dragged.

  • Added support for Angular's OnPush change detection to node/group/port/overlay components.


October 27th 2022

  • Updates to community edition event generator to directly invoke event handlers instead of attempting to bind a context to them. This change is transparent to Toolkit users.

  • Update to Angular overlay to prevent an exception being thrown when the overlay is present on a connection that is being dragged (meaning that there is not yet an associated edge in the model)


October 12th 2022

  • Improvements to Arrow overlay rendering


October 7th 2022

  • updates to packaging for the background plugin
  • addition of methods to hide/show backgrounds in the background plugin.
  • ensure copy/paste of edge correctly clones the edge's data


September 22nd 2022


  • In the generated grid background, showMinorLines is now showTickMarks, and minorLinesPerCell is now tickMarksPerCell.


  • Fix for an issue where the node:move:end event of the Surface did not contain all of the elements in the drag group.

  • Added support for dotted background in generated grid background, via gridType parameter ("dotted" or "lines"). Default is for lines.

  • Added dotRadius and tickDotRadius options to generated grid background, for use with GridTypes.dotted.


August 23rd 2022

  • Improvements to the documentation
  • Addition of setDraggable method to Surface, to set the draggable state of individual vertices.


August 18th 2022

  • Refactoring "simple edge styles" (color/line width) and edge labels. It is now possible to set an edge's color, line width, label (and its location) directly from the backing data for the edge.


August 18th 2022

  • Refactoring "simple edge styles" (color/line width)


August 17th 2022


  • Added code to catch and report circular references in view dependencies

  • Updated the view code to support multiple parents for a given node/group/edge/port definition

  • Added the concept of "simple edge styles" - automatically mapping a few key properties from each edge's backing data to the appearance of its corresponding connection in the UI. See documentation for more details.

  • Added the concept of a "property mapper", an alternative to the existing concept of edge styles, which maps specific property values in edge data to appearance. See documentation for more details.


August 16th 2022


  • the background plugin no longer assumes a type of "simple" by default: you have to always supply a type.


  • grid backgrounds now have defaults for fill/stroke written into the svg.
  • fixed issue with background plugin CSS stylesheet not being packaged.


August 16th 2022

  • Internal refactoring of background plugin to expose type members that can be used when configuring backgrounds in an ES6/TS development environment, to avoid the code being omitted through tree shaking.


August 15th 2022

  • Added support for generated grid backgrounds.


August 12th 2022

  • Fixed a couple of issues with edge placement in nested nodes/groups in the underlying community edition
  • Fixed an issue with the tiled background layer in the background plugin that was preventing it from rendering.
  • Reinstated the zoomToBackground method on the Surface widget
  • Added supportLegacyConnectorData flag to OrthogonalConnectorOptions. This offers a means for people migrating from 2.x to load datasets where there is path data for Orthogonal connectors in the 2.x format.


August 5th 2022

  • Update to the Angular component overlay code to fix an issue that occurred when an edge deletion was undone via undo().


August 3rd 2022

  • Added support to the Angular integration for using Angular components as overlays.


July 25th 2022

  • Minor internal refactoring. No functionality change.


July 22nd 2022

  • Minor internal refactoring. No functionality change.


July 21st 2022


  • Lasso plugin now updates the Toolkit's selection, rather than the Surface's drag selection, allowing the Surface to decide whether or not selected elements should be added to the drag selection.


July 21st 2022


  • The Surface widget no longer by default adds an element in the Toolkit's current selection to the underlying drag selection, instead maintaining a separate drag group for selected elements. What this means is that if you have a few elements selected and you drag one that is not selected, the selected elements will not also be dragged.


July 19th 2022

  • Upgraded to Typescript 4.x.


July 18th 2022

  • Packaging updates. No code change.


July 18th 2022


  • The surface widget now supports an instantiated Decorator in its decorators constructor parameter. This can be useful in situations where your code needs to work closely with the decorator's behaviour.

  • The args to the decorate method in a Decorator are now typed as DecorateParams (no changes, just the introduction of this type definition)

  • On a device that support touch events, the container element for a Surface is now assigned a jtk-surface-touch-device css class. The purpose of this is to allow you to style differently for touch devices, for instance by making visible elements that are only visible on hover on a device supporting pointer events.

  • On a device that supports pointer events, the container element for a Surface is now assigned a jtk-surface-pointer-device css class.

Note that


14 Juillet 2022


  • The constrainFunction that can be passed in the dragOptions to a Surface can now return null, indicating that for the given tick of the drag lifecycle there is no suitable place for the element and the element should not be moved from its previous position.


July 7th 2022


  • Backgrounds for the Surface element have been moved to a separate plugin - @jsplumbtoolkit/browser-ui-plugin-background

  • In the underlying Community edition, endpoints are no longer wrapped in a div element; instead their svg element is appended directly to the container. This isn't a major change but may require some minor CSS updates.


  • The jtk-endpoint element has been updated to no longer require that a data-jtk-port attribute be set. This enables you to declaratively register multiple endpoints that are mapped to the vertex itself in the data model rather than on logical ports on the vertex.

  • The onCanvasDrop callback of DropManager is now passed the size of the dropped element, and also the related mouse event.

  • You can now pass a constrainFunction to the Surface's dragOptions, which will be invoked whenever an element is dragged, allowing you to control where elements can be dragged.

  • SurfaceDropManager and DropManager have received a few improvements:

    • When dragging an element onto a Surface, the element being dragged will, by default, be scaled so that it appears at the same size as it will be when it is dropped (by matching the Surface's zoom). This behaviour can be switched off if desired.
    • When the underlying Surface has a constrainFunction that controls where its elements can be dragged, by default this function will also be used to control element dragging when the new element is in the Surface's viewport. This behaviour can be switched off if desired
    • You can pass an elementGenerator to SurfaceDropManager and DropManager, which is a function the Toolkit will use to get the element to drag, rather than cloning the drag element.


June 16th 2022


  • Updated React integration to fix an inconsistency in the way state was cleared after the data model is emptied via clear(). A warning was reported by React in the console.


June 15th 2022


  • fix for an issue in the node/group factories whereby a transaction could be left open if the user did not invoke either the continue or abort callback.


June 14th 2022


  • added support for 'id' attribute on SurfaceComponent in Svelte integration.
  • fixed an intermittent issue with updating templates in the templates-2 package: when an interpolated value was initially an empty string, the value could not be rewritten to boolean false.


June 9th 2022


  • Surface no longer fires EVENT_DATA_LOAD_END or EVENT_DATA_LOAD_START. It is unlikely these event subscriptions were in use, and they are a pass-through of the same event from the underlying Toolkit. If you want to listen for these events and you currently do so on the Surface, just bind to them on the Toolkit instead.
  • Drag groups have been extracted to a separate plugin


  • Surface now fires EVENT_RENDER_START and EVENT_RENDER_END at the beginning and end of the rendering of a set of data. EVENT_RENDER_END does not fire until every vertex in the dataset has been rendered (taking into account asynchronous rendering)
  • Updates to Vue 3 to better integrate with the asynchronous paint mechanism (in particular, when bulk loading and then running a layout)
  • Updates to React to better integrate with the asynchronous paint mechanism in React 18 (in particular, when bulk loading and then running a layout)
  • Added support for 'temmplate macros' to the @jsplumbtoolkit/templates-2 package. This brings templates-2 up to par with @jsplumbtoolkit/templates in terms of the complexity supported in injected values.



June 1st 2022


  • Update to ForceDirected layout to better support positioning newly added nodes


June 1st 2022


  • Reinstated support for directRender mode, which has not been properly supported in 5.x as of yet.


  • added new ForceDirected layout. This is a rewrite of the original Spring layout, with several improvements and a shorter run time. Users of the Spring layout are recommended to switch to this layout from 5.7.0 onwards. Available in the package @jsplumbtoolkit/layout-force-directed.


May 24th 2022


  • Updates to the Spring layout to ensure that running the spring layout over and over on a given dataset wont move nodes whose position has already been calculated (regardless of whether the position was initially in the model or calculated by the layout). This also applies when a new node is added to the dataset - existing nodes will not be moved.


May 21st 2022


  • Added the related ComponentRef to the arguments passed to thevertexEvent callback exposed by the Surface element in Angular integration.


May 20th 2022


  • Added optional toolkitParams as an Input to the Surface element in Angular integration.


May 6th 2022


  • Updated miniview to render existing dataset if attached after Surface has initially rendered.
  • Updated Surface to write positions to model after relayout and refresh if the storePositionsInModel flag was set to true


May 5th 2022


  • interceptors support removed from the Surface object. This was undocumented and unused, and interceptors are supported by the Toolkit.
  • panDistance moved from SurfaceOptions to the PanButtonsPluginOptions interface in the pan buttons plugin.


  • Updates to packaging for evaluation versions
  • Update to the React integration to fix a rendering issue in React 18 when calling load with JS data during a componentDidMount or useEffect initialiser.


May 3rd 2022


  • @jsplumbtoolkit/dialogs has now been renamed to @jsplumbtoolkit/dialogs-core, and is a base package for two new packages - @jsplumbtoolkit/dialogs and @jsplumbtoolkit/dialogs-2. If you use @jsplumbtoolkit/dialogs currently, then dialogs-core will be automatically imported; the only thing you need to be aware of is that the dialogs CSS file is now in dialogs-core, and not in dialogs, so any references you have to that will need to be updated. dialogs-2 is discussed below.


- `@jsplumbtoolkit/browser-ui-svelte`

This is an integration package to facilitate using the Toolkit with Svelte 3. Docs are here:

- `@jsplumbtoolkit/browser-ui-templates-2`

This is a rewrite of the default templates package (used by the `@jsplumbtoolkit/browser-ui-vanilla` renderer, not by the Angular/React/Vue integrations) that addresses, primarily, the fact that in certain sandboxed environments (such as Salesforce Lightning), "strict" mode is enforced and so `eval` and `with` - both of which the original templates package uses internally - are not available.

Currently this package is still considered experimental, not having had the same battle testing that the original template package has had, but it has other advantages too, such as using `{{...}}` instead of `${...}` for variable substitution, making it play more nicely with template literals, and the speed with which an update occurs is vastly improved over the original templates package. We encourage licensees to give this new package a try and we invite all feedback.

Detailed information on the differences between this package and the original templates package, as well as instructions for how to use the package with your existing code, can be found here on our docs site:

- `@jsplumbtoolkit/browser-ui-vanilla-2`

The vanilla Toolkit renderer, but using the new templates package instead of the original templates package. This is the renderer that we use now in all of our demonstration pages. For users of the current vanilla renderer we recommend switching to this package, as the original templates package (and therefore browser-ui-vanilla) is now in a lightweight maintenance mode, and is unlikely to be continued from v6.0.0 onwards.

- `@jsplumbtoolkit/dialogs-2`

This is a port of the original `dialogs` package that uses the `templates-2` package under the hood. Functionally there is no change from the original `dialogs` package, but the format of the templates you use with `dialogs-2` corresponds to the changes in `templates-2`.


  • Parameterised labels in views were updated to support {{value}} syntax as opposed to ${value}. This is to avoid confusion with JS string templates. The previous syntax is still supported for now but won't be as of v6.0.0.
  • The beforeConnect interceptor now takes an optional 4th argument which indicates whether the new edge is a result of user activity with a mouse/touch device, or if it is a programmatic edge addition.
  • Fixed an issue with the beforeDetach interceptor where in some cases the source and target parameters were empty (although they could be retrieved from the edge that is passed in to that interceptor anyway)


April 5th 2022


  • Fixed painting issue in orthogonal connector when a connection is established between endpoints on opposite faces of the same element.


April 5th 2022


  • Update Community edition's event manager module to not reference document in its root.


April 1st 2022


  • Optimising imports in both Toolkit and Community editions. No code change.


March 16th 2022


  • Fixed an issue preventing the magnetizer from running ad-hoc with the Spring layout.


March 12th 2022


  • New package @jsplumbtoolkit/layout-hierarchy added

This is a new layout that follows a slightly modified Sugiyama algorithm. Unlike the original Hierarchical layout, there is no assumption that any given node will have at most one parent, and consequently this layout typically performs much better on real world datasets than the Hierarchical layout. For more information - and future plans - see the Toolkit documentation.


March 10th 2022


  • Extracted "ui states" from the @jsplumbtoolkit/browser-ui package and put them into a plugin in the package @jsplumbtoolkit/browser-ui-plugin-ui-states. This shaves a bunch of Kb off the size of the browser-ui package. Details for how to migrate can be found in the documentation for UI States.

  • Several Surface render parameters related to how the mouse wheel is handled, which were marked deprecated in 5.3.0, have now been removed, or rather, moved and renamed:

    • wheelZoomMetaKey -> wheel:{ useMetaKey:... }
    • wheelReverse -> wheel:{ reverse:... }
    • wheelSensitivity -> wheel:{ sensitivity:... }
    • wheelFilter -> wheel:{ filter:... }
    • wheelPan -> wheel:{ pan:... }
    • enableWheelZoom -> wheel:{ zoom:... }

The default value for each of these parameters is still the same as in previous versions.


  • @jsplumbtoolkit/browser-ui-plugin-ui-states, as discussed above.


February 15th 2022


  • removed getPosition(..) method from Surface. Use getCoordinates(..) instead.
  • removed setVertexPosition(..) method from Surface. It was a duplicate of setPosition(..)


  • Added new @jsplumbtoolkit/copy-paste and @jsplumbtoolkit/browser-ui-copy-paste packages. See documentation for details.


  • Added activeMode optional constructor parameter for EdgePathEditor. When set, any new connection that has just been dragged will be marked "edited", meaning the geometry from the initial path is then fixed. This is a useful toggle if you're using an anchorPositionFinder in your code. See documentation for more details.

  • fixed possible geometry load issue with Orthogonal connectors in certain circumstances.

  • updated Orthogonal connector geometry load to allow usage with static (ie. not just Continuous or Dynamic) anchors.


February 10th 2022


  • Removed support for a templateRenderer declaration inside a node, group or port definition in a view. We know of no instances of this capability being used, and if it is needed, it can be handled inside a templateRenderer declared on the render params for a Surface.


  • Fix for potential recursive loop when elements in Balloon layout have connections to themselves.
  • Added support for anchorPositionFinder inside a node, group or port definition in a view. This provides a means for you to determine the anchor location for the source/target of some connection at drag time.
  • Added support for anchorPositionFinder to the connector editor package. Provides a means for you to determine where the source/target anchor of some connection can be dragged to when the connector is being edited.


February 6th 2022


  • Added checkValidity method to the dialogs package.
  • exposed extractValueFromElement method to get the value from a single element to the dialogs package.
  • Internal refactoring of the connector editors to standardise their drag behaviour with other parts of the Toolkit.


February 4th 2022


  • Added support to the dialogs extract and apply methods for a custom binder.


February 1st 2022


  • Refactored the dialogs internally to extract the DOM binding code for reuse in jsPlumb Toolkit Components.
  • Added optional autoCommit flag to the show method of Dialogs. By default this is true.


January 29th 2022


  • Updated the underlying community edition renderer to ensure that a user-provided anchor callback in a target selector is honoured.


January 27th 2022


  • Updated the drag handler in the underlying community edition renderer to ensure that a user-provided start callback cannot override the default drag start behaviour.


January 25th 2022


  • Updated the bindModelEvent and on methods of the Surface to handle multiple :not(..) selectors.
  • Fixed issue with wheelPan:true in pan/zoom widget not binding the wheel listener.
  • Updated setOverlaysVisible method of Surface to take an optional varargs list of overlay ids to operate on.


January 21st 2022


  • Fixed an issue whereby in some circumstances it was possible for a bindModelObject callback to be invoked without a model object supplied.

  • added setOverlaysVisible(Selection|Path|Edge|Array<Edge>, boolean) method to the Surface

  • updated the drop manager to support overridden left / top properties passed to the node factory callback.

  • added optional onVertexAdded callback to SurfaceDropManager, which will be invoked whenever a group/node has been dropped onto the canvas and added to the dataset.


January 12th 2022


  • Correction of the change in 5.3.3: jtk-source-hover and jtk-target-hover are applied to the elements involved in a connection, not the endpoints.


January 11th 2022


  • Reinstated the application of jtk-source-hover and jtk-target-hover classes to the source and target endpoint for some connection on which the mouse is hovering.


January 10th 2022

  • Fixed issue with endpoint hover: when hovering over an endpoint, endpoints at the other end of connections to that endpoint also hover.
  • Fixed intermittent issue with multiple definitions on an element that have Continuous anchor definitions with different faces.


December 20th 2021


  • added support for maxConnections in addTargetSelector method of Community edition.


December 15th 2021


  • Updated the exportData method to ensure that its output is insulated from the Toolkit's internal dataset
  • Updated to ensure the node:move:end event is fired after any necessary changes to the model.
  • Added toJson() to JsPlumbToolkit; you can now call JSON.stringify(someToolkitInstance) to get the same output you'd get from someToolkitInstance.exportData().


December 12th 2021


  • Fixed intermittent issue with not all edges being deleted when a group they are attached to is deleted.


December 7th 2021


  • Fixed issue with uniqueEndpoint on port definition not being honoured.


December 6th 2021


  • updated the tracePath method in @jsplumbtoolkit/browser-ui-anim to set a .jtk-animate-source class on the path source vertex and a .jtk-animate-target class on the path target vertex for the duration of the trace.

  • fixed issue with maxConnections on port definition not being honoured.


November 30th 2021


  • Added fix for a node/edge asynchronous rendering issue when using the data prop of the Vue3 surface.


November 28th 2021


  • Replaced Dictionary<T> throughout the codebase with Record<string, T>. Dictionary had been marked deprecated for a few versions.

  • Community edition updated to better handle anchor orientations with dynamic anchors.


November 26th 2021


  • Fixed issue with parsing of nested groups via the load function.


November 26th 2021


  • Small change to event registration for connection drag handlers. No functional change but this reduces any lag at the start of a drag.


November 25th 2021


  • compound is no longer an available flag on the undo/redo parameters passed to a Toolkit constructor. If an edge is deleted as part of a call to removeNode or removeGroup, its deletion is automatically wrapped in a transaction by the Toolkit. But if an edge is deleted independently of a vertex then it has its own undo/redo stack entry.

  • wheelFilter was reinstated.


October 29th 2021

5.x is a rewrite to Typescript, with a focus on modules. This work presented a rare opportunity to perform refactoring for clarity and performance purposes. As the list of changes grew, it was decided to move them out of the changelog and into a dedicated migration guide document.

In 5.x, the Toolkit and Community edition versions will be kept in step: Toolkit: version 5.a.b of the Toolkit always corresponds to version 5.a.b of the Community edition.


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


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.


  • 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.


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


  • 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.


  • 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.


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 (Toolkit licensees are _extremely_ unlikely to be using these)

    - does not support IE8 (which the Toolkit hasnt 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.
  • 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 a 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.