Skip to main content

Packages

In 6.x the Toolkit is delivered as a single package - @jsplumbtoolkit/browser-ui - rather than as a set of packages like 5.x. The package contains an ES6 module, a CommonJS module, and a UMD. 

{
  "dependencies": {
    "@jsplumbtoolkit/browser-ui": "^6.0.0"
  }
}

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

Integrations​

@jsplumbtoolkit/browser-ui-angular​

Provides Angular integration, including integration with the Toolkit's drop manager. At the time of writing this has been tested up to Angular 16.

@jsplumbtoolkit/browser-ui-react​

Provides React integration, including integration with the Toolkit's drop manager. Requires React 17 or greater. Tested on 17 and 18.

@jsplumbtoolkit/browser-ui-vue2​

Provides Vue2 integration, including integration with the Toolkit's drop manager.

@jsplumbtoolkit/browser-ui-vue3​

Provides Vue3 integration, including integration with the Toolkit's drop manager.

@jsplumbtoolkit/browser-ui-svelte​

Provides Svelte 3integration. Note that unlike the other integrations, the Toolkit's Svelte integration does not contain any code to assist in working with the drop manager - because it's not really needed.

Using the Toolkit with ES5​

If you're writing your application in ES5 then you will need to use the UMD bundle.

Imports​

<script src="node_modules/@jsplumbtoolkit/browser-ui/js/jsplumbtoolkit.browser-ui.umd.js"></script>

This import is 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 module like this will result in a global member being added to the window with the name jsPlumbToolkit:

<html>
    <body>
        <div id="container"></div>
        <script src="node_modules/@jsplumbtoolkit/browser-ui/js/jsplumbtoolkit.browser-ui.umd.js"></script>
        <script>
            jsPlumbToolkit.ready(function() {
                var instance = jsPlumbToolkit.newInstance()
                var surface = instance.render(document.getElementById("container"), {...})
            })
        </script>
    </body>
</html>