Skip to main content

Setup

How you include the Toolkit in your app depends on whether you're using ES6/Typescript or you're just including the Toolkit Javascript in your page for an ES5 application.

The @jsplumbtoolkit/browser-ui package contains three different build targets for the Toolkit:

  • ES6 distributed as a set of ES modules in the es6 directory inside the package. This is what you'll use if your project is in ES6 or Typescript
  • CommonJS distributed in the file js/jsplumbtoolkit-browser-ui.cjs.js
  • ES5 distributed in the file js/jsplumbtoolkit-browser-ui.umd.js

Regardless of the build target you use, you will need to install the Toolkit via NPM, as discussed on our installation page.

If you're an evaluator, you may not need to acquaint yourself with this page right now, as your evaluation bundle contains all of our starter apps ready for you to use - see the evaluators page for details.

ES5 usage​

For ES5 usage you need to import the UMD file, as shown below. This will make available a global object jsPlumbToolkit on the browser's Window. You also should, at least to start with, import the Toolkit's default CSS stylesheet, as it contains sane defaults for various parts of the Toolkit.

<html>
    <head>
        <script src="node_modules/@jsplumbtoolkit/browser-ui/js/jsplumbtoolkit-browser-ui.umd.js"></script>
        <link rel="stylesheet" href=="node_modules/@jsplumbtoolkit/browser-ui/css/jsplumbtoolkit.css"></script>
    </head>
    <body>
    
        <div id="container" style="width:600px;height:600px;outline:1px solid;"></div>
    
        <script>
            jsPlumbToolkit.ready(function() {
              var toolkit = new jsPlumbToolkit()
              var surface = toolkit.render(container)
            })
        </script>      
        
    </body>

</html>

ES6 and Typescript usage​

To use the Toolkit with ES6 and Typescript:

import { ready, newInstance } from "@jsplumbtoolkit/browser-ui"

ready(() => {
    const toolkit = newInstance()
    const surface = toolkit.render(container)
})
note

As with ES5 usage, you should ensure you have the jsplumbtoolkit.css stylesheet included in your page.

CommonJS usage​

We package a CommonJS build mostly for legacy reasons now. It's kind of unlikely you'll need it, and if you do need it, it will be in a context where it looks like you're using the ESM build: 

import { ready, newInstance } from "@jsplumbtoolkit/browser-ui"

ready(() => {
    const toolkit = newInstance()
    const surface = toolkit.render(container)
})
note

As with ES5 and ES6/Typescript usage, you should ensure you have the jsplumbtoolkit.css stylesheet included in your page.

Next Steps​

Now you've got the Toolkit loaded, it's time to say Hello World!