Miscellaneous / Webpack


The jsPlumb Community Edition can be bundled with Webpack - see /demo/webpack for an example. This page discusses that demonstration.


  "name": "jsplumb-webpack-demo",
  "version": "1.0.0",
  "description": "example of using webpack to bundle jsplumb",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "jsPlumb <hello@jsplumbtoolkit.com> (https://jsplumbtoolkit.com)",
  "license": "MIT",
  "devDependencies": {
    "grunt-webpack": "^1.0.11",
    "jsplumb": "file:../../jsplumb.tgz",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"

Note that we reference jsPlumb as a local file (jsplumb.tgz is the output of npm pack, which creates a local copy of what npm publish would post to npm). You can just require jsPlumb as you would any other dependency:


2.2.11 is the most current at the time of writing. It may not be now.


var path = require("path");
var webpack = require("webpack");
module.exports = {
    cache: true,
    entry: {
        bundle: "./index.js"
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "dist/",
        filename: "[name].js",
        chunkFilename: "[chunkhash].js"


We're using Grunt for this demo. You don't have to use Grunt. Edit: it's a few years now since this page was written...personally I wouldn't bother with Grunt now at all. I'd just do it with scripts in npm.

module.exports = function(grunt) {

    var webpackConfig = require("./webpack.config.js");


        webpack: {
            options: webpackConfig,
            build: {}

    grunt.registerTask("build", ["webpack:build"]);


var j = require("./node_modules/jsplumb/dist/js/jsplumb.js").jsPlumb.getInstance({
    Connector: "Flowchart",
    Anchor: "Bottom",
    Endpoint: [ "Dot", { radius: 2 }],
    ConnectionOverlays: [
        [ "Arrow", { location: 0, width: 10, length: 7, foldbackPoint: 0.62, direction:-1 }]

j.connect({source: "one", target: "two" });

j.on(window, "resize", j.repaintEverything);

A point to note is that jsPlumb exports a bunch of things, so the require statement has to further specify jsPlumb before it can call getInstance. We do this (export a bunch of things) because several of the modules that jsPlumb depends on can be used independently of jsPlumb.

The full list of exports from the require statement above is:

  • Biltong - Geometry functions
  • Katavorio - Drag/drop manager
  • Mottle - Event manager
  • jsBezier - Bezier curve functions
  • jsPlumb
  • jsPlumbUtil - Utility functions