Skip to main content

Packages

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.

At the bottom of the page there is a section detailing how to use packages with ES5.


Quick Reference#

Here we provide an overview of the packages you will need, depending on your requirements.

Vanilla, throughout the documentation, refers to the case that you are not using a library integration such as Angular/React/Vue. Each row in this first table identifies the base import you will need, along with the optional import required if you wish to support drag/drop of new vertices onto the canvas.

Basic setup#

LibraryBase importDrag/drop
Vanilla@jsplumbtoolkit/browser-ui-vanilla@jsplumbtoolkit-drop
Angular@jsplumbtoolkit/browser-ui-angular@jsplumbtoolkit-angular-drop
React@jsplumbtoolkit/browser-ui-react@jsplumbtoolkit-react-drop
Vue 2@jsplumbtoolkit/browser-ui-vue2@jsplumbtoolkit-vue2-drop
Vue 3@jsplumbtoolkit/browser-ui-vue3@jsplumbtoolkit-vue3-drop

Layouts#

By default, the Toolkit ships with the Absolute layout. If you wish to use some other layout, you will need to import it separately.

LayoutPackageDescription
Spring@jsplumbtoolkit/layout-springProvides a force directed layout
Hierarchical@jsplumbtoolkit/layout-hierarchicalThe classic "org chart" layout
Balloon@jsplumbtoolkit/layout-hierarchicalGroups vertices into clusters
Circular@jsplumbtoolkit/layout-circularArranges vertices in a circle

Connectors#

By default, the Toolkit ships with the Straight connector. If you wish to use some other connector, you will need to import it separately.

LayoutPackageDescription
Bezier@jsplumb/connector-bezierProvides a bezier curve connector
StateMachine@jsplumb/connector-bezierA connector with a slight curve (a quadratic Bezier)
Orthogonal@jsplumbtoolkit/connector-orthogonalThe classic "flowchart" connector

Plugins#

There are a number of plugins you can install on an instance of the Surface. Each of these is supplied in its own package:

NamePackageDescription
lasso@jsplumbtoolkit/browser-ui-plugin-lassoProvides a means to select groups of vertices with the mouse
drawingTools@jsplumbtoolkit/browser-ui-plugin-drawing-toolsOffers the ability to alter the size of vertices with the mouse
miniview@jsplumbtoolkit/browser-ui-plugin-miniviewProvides a 'miniview' - a small view of all the vertices in its associated Surface
panButtons@jsplumbtoolkit/browser-ui-plugin-pan-buttonsProvides buttons around the perimeter of a Surface that can be used to nudge the canvas.

Core#

@jsplumbtoolkit/core#

Contains the core Toolkit code. Has a dependency on @jsplumb/util for various helper functions, but is renderer agnostic.

@jsplumbtoolkit/templates#

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.


Layouts#

In 5.x only the Absolute and 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.

@jsplumbtoolkit/layout-spring#

Provides the Spring layout.

@jsplumbtoolkit/layout-circular#

Provides the Circular layout.

@jsplumbtoolkit/layout-hierarchical#

Provides the 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.


Rendering#

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.

@jsplumbtoolkit/browser-ui#

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.

@jsplumbtoolkit/browser-ui-vanilla#

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.

@jsplumbtoolkit/browser-ui-anim#

Provides a few basic animation functions for use with a Surface.

@jsplumbtoolkit/browser-ui-templates#

Contains the template engine that both @jsplumbtoolkit/browser-ui-vanilla and @jsplumbtoolkit/dialogs use. This import will be automatically pulled in as needed, unless you're not using a bundler.

@jsplumbtoolkit/browser-ui-plugin-miniview#

Provides the miniview.

@jsplumbtoolkit/browser-ui-plugin-lasso#

Provides the lasso tool.

@jsplumbtoolkit/browser-ui-plugin-drawing-tools#

Provides the drawing tools plugin.

@jsplumbtoolkit/browser-ui-plugin-pan-buttons#

Provides the pan buttons - the buttons that appear at the perimeter of the Surface's viewport, allowing the user to nudge the canvas.

@jsplumbtoolkit/browser-ui-plugin-active-filtering#

Provides the "active filtering" functionality - the ability to filter connection drop targets at drag start.

@jsplumbtoolkit/browser-ui-plugin-state#

Provides utilities to save/restore the state of some Surface widget to local storage.


Community edition#

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. Also if your application is written in ES5 then you will need to manually import various Community edition packages.

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.

@jsplumb/util#

Provides a set of helper functions that are used extensively throughout the Toolkit and may perhaps be of some use to you.

@jsplumb/common#

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.

@jsplumb/core#

This is the Community edition core. This package contains all of the Endpoints, such as Dot, Rectangle, 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 @jsplumb/core.

See also the Connector packages section below for details of a couple of other Community packages you may need.


Connectors#

In 5.x the Toolkit only ships with the Straight connector. To use some other connector you'll need to import the appropriate package.

@jsplumb/connector-bezier#

Provides the Bezier and StateMachine connectors. Note the package name uses @jsplumb as the prefix - these are provided by the underlying Community edition.

@jsplumb/connector-flowchart#

Included here for completeness, but this Community edition connector is supplanted by the Toolkit's @jsplumbtoolkit/connector-orthogonal connector.

@jsplumbtoolkit/connector-orthogonal#

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.


Edge editors#

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.

@jsplumbtoolkit/connector-editors#

This is the base functionality. A connector specific implementation will import this.

@jsplumbtoolkit/connector-editors-orthogonal#

Connector editors for the Orthogonal connector. This package will automatically import @jsplumbtoolkit/connector-orthogonal.

@jsplumbtoolkit/connector-editors-bezier#

Connector editors for the Bezier and StateMachine connectors. This package will automatically import @jsplumb/connector-bezier.


Utilities#

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.

@jsplumbtoolkit/dialogs#

Provides the lightweight dialogs originally created for use in the Toolkit demonstrations.

@jsplumbtoolkit/drop#

Provides the drag/drop manager.

@jsplumbtoolkit/labels#

Provides various utilities for working with labels.

@jsplumbtoolkit/search#

Provides a reverse text search index.

@jsplumbtoolkit/print#

Provides support for server side printing (using node).

@jsplumbtoolkit/test-support#

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.


Integrations#

@jsplumbtoolkit/browser-ui-angular#

Provides Angular integration. At the time of writing this has been tested up to Angular 12.

@jsplumbtoolkit/browser-ui-angular-drop#

Provides Angular integration with the drop manager. At the time of writing this has been tested up to Angular 12.

@jsplumbtoolkit/browser-ui-react#

Provides React integration. Requires React 17 or greater.

@jsplumbtoolkit/browser-ui-react-drop#

Provides React integration with the drop manager. Requires React 17 or greater.

@jsplumbtoolkit/browser-ui-vue2#

Provides Vue2 integration.

@jsplumbtoolkit/browser-ui-vue2-drop#

Provides Vue2 integration with the drop manager.

@jsplumbtoolkit/browser-ui-vue3#

Provides Vue3 integration.

@jsplumbtoolkit/browser-ui-vue3-drop#

Provides Vue3 integration with the drop manager.


Using packages with ES5#

If you're writing your application in ES5 then you will need to use the UMD bundles of each of the Toolkit's packages, and you'll also need to include all of the Toolkit's internal dependencies yourself.

For each package, we supply 3 Javascript files inside the package's .tgz. For instance, for @jsplumbtoolkit/core, we provide:

  • jsplumbtoolkit.core.es.js - The package bundled as an ES module
  • jsplumbtoolkit.core.cjs.js - The package bundled as a CommonJS module
  • jsplumbtoolkit.core.umd.js - The package bundled as a UMD module.

The UMD module is the one to use when you're using ES5: it registers the package in the browser with a global name that your scripts can use to access it.

UMD Import examples#

This is the bare minimum set of imports you need to get an instance of the Toolkit up and render it to some element:

<script src="node_modules/@jsplumb/util/js/jsplumb.util.umd.js"></script><script src="node_modules/@jsplumb/common/js/jsplumb.common.umd.js"></script><script src="node_modules/@jsplumb/core/js/jsplumb.core.umd.js"></script><script src="node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js"></script><script src="node_modules/@jsplumbtoolkit/core/js/jsplumbtoolkit.core.umd.js"></script><script src="node_modules/@jsplumbtoolkit/templates/js/jsplumbtoolkit.templates.umd.js"></script><script src="node_modules/@jsplumbtoolkit/browser-ui/js/jsplumbtoolkit.browser-ui.umd.js"></script><script src="node_modules/@jsplumbtoolkit/browser-ui-templates/js/jsplumbtoolkit.browser-ui-templates.umd.js"></script><script src="node_modules/@jsplumbtoolkit/browser-ui-vanilla/js/jsplumbtoolkit.browser-ui-vanilla.umd.js"></script>

These imports are written as if the html file is in the same directory as node_modules. You may need to change the base url for the imports to match your setup.

Importing the UMD modules like this will result in a global member being added for each import module. The name for each of these global variables is given below.

As an example, if you wanted to create an instance of the Toolkit:

var toolkit = jsPlumbToolkitBrowserUIVanilla.newInstance()

UMD Global names#

This is the list of global names for each package.

packageglobal name
@jsplumbtoolkit/corejsPlumbToolkit
@jsplumbtoolkit/templatesjsPlumbToolkitTemplates
@jsplumbtoolkit/layout-springjsPlumbToolkitLayoutSpring
@jsplumbtoolkit/layout-circularjsPlumbToolkitLayoutCircular
@jsplumbtoolkit/layout-hierarchicaljsPlumbToolkitLayoutHierarchical
@jsplumbtoolkit/browser-uijsPlumbToolkitBrowserUI
@jsplumbtoolkit/browser-ui-vanillajsPlumbToolkitBrowserUIVanilla
@jsplumbtoolkit/browser-ui-animjsPlumbToolkitBrowserUIAnim
@jsplumbtoolkit/browser-ui-templatesjsPlumbToolkitBrowserUITemplates
@jsplumbtoolkit/browser-ui-plugin-miniviewjsPlumbToolkitBrowserUIPluginMiniview
@jsplumbtoolkit/browser-ui-plugin-lassojsPlumbToolkitPluginLasso
@jsplumbtoolkit/browser-ui-plugin-drawing-toolsjsPlumbToolkitPluginDrawingTools
@jsplumbtoolkit/browser-ui-plugin-pan-buttonsjsPlumbToolkitPanButtons
@jsplumbtoolkit/browser-ui-plugin-active-filteringjsPlumbToolkitPluginActiveFiltering
@jsplumbtoolkit/browser-ui-plugin-statejsPlumbToolkitPluginState
@jsplumb/corejsPlumb
@jsplumb/commonjsPlumbCommon
@jsplumb/utiljsPlumbUtil
@jsplumb/browser-uijsPlumbBrowserUI
@jsplumb/connector-bezierjsPlumbConnectorBezier
@jsplumbtoolkit/connector-orthogonaljsPlumbToolkitConnectorOrthogonal
@jsplumbtoolkit/connector-editors-bezierjsPlumbToolkitConnectorEditorsBezier
@jsplumbtoolkit/connector-editors-orthogonaljsPlumbToolkitConnectorEditorsOrthogonal
@jsplumbtoolkit/dialogsjsPlumbToolkitDialogs
@jsplumbtoolkit/dropjsPlumbToolkitDrop
@jsplumbtoolkit/labelsjsPlumbToolkitLabels
@jsplumbtoolkit/searchjsPlumbToolkitSearch
@jsplumbtoolkit/printjsPlumbToolkitPrint