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.

note

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.

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.

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.