Installation
Download
Evaluators and licensees can download JsPlumb from https://licensing.jsplumbtoolkit.com/download.
For evaluators this download contains all of the JsPlumb packages, plus the starter apps and feature demonstrations. For licensees the download contains the JsPlumb packages.
NPM Setup
The Toolkit packages are hosted in JsPlumb's NPM repository. Access to this repository is available to all current evaluators, and to all licensees who currently have access to download new releases. You can install JsPlumb using NPM but first you need to follow the steps outlined here in order to setup your access to our private NPM repository.
With NPM you can use local file URLs that point at the JsPlumb Toolkit packages (this is what the evaluation bundle does), or you can use JsPlumb's private NPM repository.
Repository details
Note the trailing slash on the repository locations: this must be included.
Licensees
https://download.jsplumbtoolkit.com/repository/jsplumb/
Evaluators
https://download.jsplumbtoolkit.com/repository/jsplumb-eval/
Logon
Licensees
To login to the JsPlumb NPM repository you use your licensee ID:
npm adduser --registry=https://download.jsplumbtoolkit.com/repository/jsplumb/
Your password will have been supplied in an email from JsPlumb.
Evaluators
npm adduser --registry=https://download.jsplumbtoolkit.com/repository/jsplumb-eval/
.npmrc
Licensees
You'll need to map the @jsplumbtoolkit scope to JsPlumb's NPM repository. For that, ensure your .npmrc has these entries:
@jsplumbtoolkit:registry=https://download.jsplumbtoolkit.com/repository/jsplumb/
The values shown are for the licensee repository.
Evaluators
For evaluators, use these values:
@jsplumbtoolkit:registry=https://download.jsplumbtoolkit.com/repository/jsplumb-eval/
You can hover over these boxes to get the option to copy the code to the clipboard.
Tokens
Running the npm adduser command to login to the NPM repository will result in an authToken being written to your local .npmrc. For evaluators, an unlimited number of users can login (using the same login details) and retrieve a token. For licensees, the number of active tokens is determined relative to the number of developer seats purchased: for single seat licensees, one token is supported. For holders of a small team (1-5 developers) license, 6 concurrent tokens are supported. For holders of a team (1-10 developers) license, 12 concurrent tokens are supported. The extra token(s) are intended to help if you have a machine that runs automated builds or some such setup. For holders of an unlimited seats developer license, unlimited NPM tokens are supported.
Access Limits
For evaluators, access to the NPM repository will expire as soon as the evaluation period has expired.
For licensees, access to the NPM repository is available for the duration of the time that a given licensee has access to download new releases. Once this period expires, access to the NPM repository will also expire.
Licensees have access to download new releases for a period of 12 months from the original purchase date of their license or of a license renewal. We contact all licensees ahead of time when their download expiry is about to expire.
Repository Availability
Whilst every effort is made to ensure the repository is available at all times, JsPlumb enters into no Service Level Agreement with either licensees or evaluators as to the availability of the NPM repository. It is recommended that all licensees download the JsPlumb packages from our Downloads Page.
Install JsPlumb
Once you've connected to our private NPM repository, you can install JsPlumb:
npm i @jsplumbtoolkit/browser-ui
How you include JsPlumb in your app depends on whether you're using ES6/Typescript or you're just including the JsPlumb Javascript in your page for an ES5 application.
The @jsplumbtoolkit/browser-ui package contains three different build targets for JsPlumb:
- ES6 distributed as a set of ES modules in the
es6directory 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
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 JsPlumb's default CSS stylesheet, as it contains sane defaults for various parts of JsPlumb.
<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 JsPlumb with ES6 and Typescript:
import { ready, newInstance } from "@jsplumbtoolkit/browser-ui"
ready(() => {
const toolkit = newInstance()
const surface = toolkit.render(container)
})
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)
})
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 JsPlumb loaded, it's time to say Hello World!