In 5.x the Toolkit is delivered as a set of packages, rather than as a monolith like 2.x. This page provides a list of all the packages (including Community edition packages, as the Toolkit still has a dependency on the Community edition).
On this page any reference to the "vanilla" renderer means the Toolkit without a library integration, using the Toolkit's own template engine.
In 5.x the equivalent package to what used to be the
jsplumbtoolkit package in 2.x is
@jsplumbtoolkit/browser-ui-vanilla - the "vanilla" renderer.
Contains the core Toolkit code. Has a dependency on
@jsplumb/util for various helper functions, but is renderer agnostic.
Contains the renderer-agnostic code for the templates that the vanilla renderer uses. These are packaged separately from the vanilla renderer's implementation so that at some stage in the future they can be used to support a headless renderer. This is not a package you'll need to manually import, unless you do not use a bundler.
In 5.x only the
AbsoluteBacked layouts are shipped in the core (they are shipped inside the
@jsplumbtoolkit/core package as they are renderer agnostic). The other layouts have been extracted to their own packages.
Hierarchical layout and also the
Balloon layout (since
Balloon layout extends
Hierarchical layout). Also provides the
AbstractHierarchicalLayout class, which is a base class that other "hierarchical" layouts can extend.
At the core of the Toolkit's rendering is still the
Surface widget, which you'll now find in the
@jsplumbtoolkit/browser-ui package. One of the things we've concentrated on in this new release is the fact that the specific mechanism used by the Surface to render your dataset - that of a single DOM element representing each vertex, and a single SVG representing each edge - is not necessarily the only satisfactory means to render the UI: there are plenty of scenarios where, for instance, a single SVG element containing all the vertices and edges would suffice. Another option is of rendering to a single canvas element. We're keen to explore these ideas in the coming months and with 5.x we've got a solid foundation to do so.
To assist with this process of exploring alternative renderers, we've introduced the
browser-ui prefix to the current UI packages. Whenever you see
browser-ui as part of a package name it means that it pertains to the renderer that uses a single DOM element per vertex and a single SVG element per edge.
This package contains the core rendering functionality but no template engine, meaning for those using an integration such as
browser-ui-angular your bundle does not pull in the templates which only the vanilla renderer requires. You'll use this package in your imports, regardless of the specific renderer you use, as the specific renderers are a very thin wrapper around this package.
This package is the package to use when you're not using a library integration; it is basically the equivalent of the "jsplumbtoolkit" package in 2.x.
Provides a few basic animation functions for use with a Surface.
Contains the template engine that both
@jsplumbtoolkit/dialogs use. This import will be automatically pulled in as needed, unless you're not using a bundler.
Provides the miniview.
Provides the lasso tool.
Provides the drawing tools plugin.
Provides the pan buttons - the buttons that appear at the perimeter of the Surface's viewport, allowing the user to nudge the canvas.
Provides the "active filtering" functionality - the ability to filter connection drop targets at drag start.
Provides utilities to save/restore the state of some Surface widget to local storage.
The Toolkit in 5.x still has a dependency on the Community edition, generally without your knowledge, for internal purposes, but occasionally you will need to reference something in the Community edition.
Over time we're going to be looking at ways of reducing the number of Community edition packages you need to reference when working with the Toolkit.
Provides a set of helper functions that are used extensively throughout the Toolkit and may perhaps be of some use to you.
This is a package you will likely want to use. It contains the shared interfaces defining such things as anchor specifications, anchor locations, connector specifications, endpoint specifications, etc. It also exports a few basic constants that may be of use.
This is the Community edition core. This package contains all of the Endpoints, such as
Blank, as well as the base
Overlay class and its implementations (
LabelOverlay etc). In addition it contains the
StraightConnector class. If you want to reference these things in a type safe way in your view (rather than simply as a string representing the name of the thing) then you'll need to import them from
See also the Connector packages section below for details of a couple of other Community packages you may need.
In 5.x the Toolkit only ships with the
Straight connector. To use some other connector you'll need to import the appropriate package.
StateMachine connectors. Note the package name uses
@jsplumb as the prefix - these are provided by the underlying Community edition.
Included here for completeness, but this Community edition connector is supplanted by the Toolkit's
An extension of the original
Flowchart connector with a better name and support for user editing of the path. For users of 2.x who have
Flowchart connectors in their application, you should import this package and use
Orthogonal as your connector type.
These used to all be provided in a single package -
jsplumbtoolkit-connector-editors.tgz. In 5.x we've split these out into the base functionality in one package, and a package for each supported connector type.
This is the base functionality. A connector specific implementation will import this.
Connector editors for the
Orthogonal connector. This package will automatically import
Connector editors for the
StateMachine connectors. This package will automatically import
Most of these packages were already delivered as external packages in 2.x. In 5.x their package names have been changed but their function remains the same.
Provides the lightweight dialogs originally created for use in the Toolkit demonstrations.
Provides the drag/drop manager.
Provides various utilities for working with labels.
Provides a reverse text search index.
Provides support for server side printing (using node).
These are a set of utilities we use in the Toolkit's own unit tests, and their inclusion in this list comes with the caveat that they are not necessarily sufficiently fully featured or useful for other scenarios. We're keen for them to become a first class part of the Toolkit offering, though, so all feedback is welcome.
Provides Angular integration. At the time of writing this has been tested up to Angular 12.
Provides Angular integration with the drop manager. At the time of writing this has been tested up to Angular 12.
Provides React integration. Requires React 17 or greater.
Provides React integration with the drop manager. Requires React 17 or greater.
Provides Vue2 integration.
Provides Vue2 integration with the drop manager.
Provides Vue3 integration.
Provides Vue3 integration with the drop manager.