jsPlumb Community Edition is an open source project written in Typescript that gives you the tools you need to visually connect DOM elements.
jsPlumb Community edition is a fully vanilla JS solution, with no external dependencies. Using Angular, React, or Vue 2 ? jsPlumb slots right in.
Leverage HTML5 and CSS3. Seamless integration with mobile devices. Never worry about a touch event again!




Announcing Community Edition 4.x beta

Over the last few months we've been porting jsPlumb to Typescript, which we've now released as a beta. Version 4.x is faster and more modular than 2.x, and fits right in to modern web app workflows.

We'll be out of Beta soon - just finishing up the corresponding 4.x release of the Toolkit Edition.

  • Find the Community edition on Github here
  • Browse and clone the source code for Community edition 4.x demonstrations here

jsPlumb Community Edition 4.x is published on npm as the package @jsplumb/browser-ui. This package is itself the renderer, and it will import the core library - @jsplumb/core. As of the current release only the browser-ui renderer exists, but we plan to support other renderers in the future, such as one that can run headless in Node/Deno, or one that uses a single SVG element to render everything.

npm i @jsplumb/browser-ui
import { ready, newInstance } from "@jsplumb/browser-ui" import { StateMachineConnector, DotEndpoint } from "@jsplumb/core" ready(() => { const instance = newInstance({ container:document.getElementById("container") }) instance.connect({ source:document.getElementById("source"), target:document.getElementById("target"), connector:StateMachineConnector.type, endpoint:{ type:DotEndpoint.type, options:{ radius:10 } } }) })

New users of the jsPlumb Community Edition should clone the 4.x branch, as 2.x is now in maintenance mode and no new features will be added.

This page is for the Community Edition of jsPlumb. Looking for the jsPlumb Toolkit? Click here.