Skip to main content

Packages

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

"dependencies":{
  "@jsplumbtoolkit/browser-ui":"7.2.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. At the time of writing this has been tested on Angular 16, 17, 18 and 19.

@jsplumbtoolkit/browser-ui-react​

Provides React integration. Requires React 17 or greater. Tested on 17, 18 and 19.

@jsplumbtoolkit/browser-ui-vue3​

Provides Vue 3 integration, including integration with JsPlumb's drop manager.

@jsplumbtoolkit/browser-ui-svelte​

Provides Svelte 3/4 integration.

Using JsPlumb 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>