Build Connectivity Quickly
JsPlumb lets you rapidly build powerful applications whose focus is on diagramming and visual connectivity. Key features:
- Views: a powerful declarative mechanism for defining the appearance and behaviour of the various parts of your UI.
- Data binding via client side templates, supporting declarative configuration of connectivity.
- An underlying directed graph, allowing you to query the data in several ways.
- Built in pan/zoom with the ability to serialize its state (either manually or automatically) to local storage or cookies and the smoothest zoom for miles around.
- A miniview widget to assist in the navigation of large datasets.
- Numerous starter applications to kick-start your development.
- Automatic layouts (Hierarchy, Force directed, Circular, Balloon, Absolute, Column, Row, Grid), plus the ability to write your own.
- Data load/save Either automatically or on-demand.
- Angular integration Deep integration with Angular. Tested with version 16, 17, 18 and 19.
- React integration Tested with versions 16, 17, 18 and 19, and NextJS.
- Vue 3 integration including the composition API.
- Svelte integration Supporting version 3.55.0 onwards, but we recommend Svelte 4.
Getting Started
You have a few options as to how best to start with JsPlumb:
Hello World
- Take a look at our Hello World app to get a quick introduction
UI Overview
- Visit the UI Overview page to find about the key UI concepts
Clone a demo
- A good way to get started familiarising yourself with the architecture of JsPlumb is to clone one or more of the demonstrations in the JsPlumb demonstrations organisation on GitHub. If you're using Vue, Angular, React or Svelte there are versions of various of these apps that use the appropriate library integration that ships with JsPlumb.
If you're a new evaluator then you will find the starter applications inside your evaluation download. You may also like to take a look at our evaluators page.
Read about the data model
- The Data Model page is a good place to start looking around when you want to familiarise yourself with the way JsPlumb models the world. In a nutshell, JsPlumb's Toolkit edition uses a directed graph as its core data structure. Every app that has a need for JsPlumb - which is to say a need for the ability to connect entities - can be thought of in terms of a directed (or undirected) graph.
Angular Integration
If you just want to jump in to Angular, start here.
React Integration
Read about JsPlumb's deep integration with React
Vue Integration
Read about JsPlumb's integration with Vue
Starter apps and demonstrations
In this GitHub organisation you will find source code and documentation for all of the starter apps and feature demonstrations on JsPlumb's website: