jsPlumb Toolkit
The jsPlumb Toolkit offers a set of packages to assist you in rapidly building powerful applications whose focus is on diagramming and visual connectivity. Some key features of the Toolkit are:
- 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.
- A pan/zoom widget with the ability to serialize its state (either manually or automatically) to local storage or cookies.
- A miniview widget to assist in the navigation of large datasets.
- Automatic layouts (Hierarchy, Force directed, Circular, Balloon, Absolute), plus the ability to write your own.
- Data load/save Either automatically or on-demand.
- Angular integration Deep integration with Angular. All versions from 2 - 16 are supported.
- React integration Supporting React 16+.
- Vue 2 integration
- Vue 3 integration including the composition API.
- Svelte 3 integration
This site provides the documentation for the Toolkit edition. For Community edition documentation, visit this page.
Getting Started
A good way to get started familiarising yourself with the architecture of the Toolkit is to clone the starter applications and feature demos project https://github.com/jsplumbtoolkit-applications on GitHub, and take a look through the various applications available. 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 the Toolkit.
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.
The Data Model page is a good place to start looking around when you want to familiarise yourself with the way the Toolkit models the world. In a nutshell, the Toolkit 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.
Starter apps and demonstrations
In this GitHub repository you will find source code and documentation for all of the starter apps and feature demonstrations on the Toolkit's website: