Features
The jsPlumb Toolkit has an extensive feature set to allow you to rapidly build diagrams and UIs with rich graphical content. Click on individual items here to read more
Angular
Use rich Angular components to represent the nodes/groups in your UI and our underlying service to wire everything up
Angular
The ability to map a node/group type to an Angular component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Angular offers.
Our jsPlumb Angular service can be injected anywhere in your app and offers access not only to Toolkit instances and surfaces, but also SVG/PNG/JPG export and a get/set data storage mechanism.
In our demo applications repository you can find our Angular flowchart, chatbot, schema builder and mindmap.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbotRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integrationReact
Seamlessly integrate the Toolkit into a React app, with both components based and hooks based approaches supported.
React
The ability to map a node/group type to a React component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power React offers.
In our demo applications repository you can find our React flowchart, chatbot, schema builder and mindmap.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbotRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/react-integrationVue
Leverage the power of the Toolkit's tight integration with Vue 2 and Vue 3
Vue
In our demo applications repository you can find our React flowchart, chatbot, schema builder and mindmap.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbotRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue2-integrationhttps://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-integrationSvelte
Embed the Toolkit into a Svelte app with no fuss using our deep integration
Svelte
In our demo applications repository you can find our Svelte flowchart, chatbot, schema builder and mindmap.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbotRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/svelte-integrationStandard Layouts
Force directed, Hierarchy, Balloon, Circular and Absolute positioning layouts are provided out of the box.
Standard Layouts
- Force directed
- Circular
- Hierarchy
- Balloon
Many rich graphical UI applications offer the user the ability to manage the position of the elements themselves, making the Absolute layout a common choice, but when a user has not placed an element you'll need to use an automatic placement layout to put that element somewhere.
All of the Toolkit's layouts have the feature of being backed by the Absolute layout - meaning, if a user has chosen where an element should go, it goes there, and if they haven't, it gets placed automatically. Best of both worlds!
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/layoutsRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layoutsCustom Layouts
The Toolkit makes it a snap to create your own layout, should one of our standard layouts not suffice for your use case.
Custom Layouts
A great example of the ease with which this can be achieved is demonstrated by our mindmap builder, for which there are versions in vanilla Javascript, Angular, React, Vue 2, Vue 3 and Svelte.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/mindmap-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layouts#custom-layoutsMagnetizer
The built-in magnetizer lets you make small adjustments to your UI to achieve the perfect layout.
Magnetizer
The default behaviour of the magnetizer is to treat every node/group as a charged magnetic particle and to push them all away from each other.
You can magnetize around some specific point in the canvas, or around some element, or at the position identified by some mouse event. You can also run the magnetizer in "gather" mode, in which elements are drawn in to gather around some specific location.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/magnetizerSurface
The Surface is the heart of the Toolkit's UI, offering an infinitely pannable canvas with the smoothest zoom for miles around.
Surface
- Infinite pan
- Zoom with mouse wheel or pinch on touch devices
- Clamp pan/zoom so content never disappears from view
- Numerous plugins supported (drawing tools, miniview, pan buttons, backgrounds)
- Comprehensive set of events published
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbotRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/renderingMiniview
Attach a miniview to a surface and see your world in miniature. Pan and zoom directly on the miniview component to control the surface.
Miniview
We use the miniview plugin in many of our demos - the flowchart builder, chatbot, mindmap builder and many more.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/chatbothttps://jsplumbtoolkit.com/demonstrations/mindmap-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/miniviewNode palette
Drag and drop new nodes/groups onto your canvas with the SurfaceDropManager
Node palette
Then create a SurfaceDropManager, give it a CSS selector that identifies what should be draggable, and you're done!
The drop manager can be configured to allow drop on the canvas and/ onto nodes, groups and edges. You can switch it on and off with a single method call, and we ship wrapper components for all of our library integrations - Angular, Svelte, React, Vue 2 and Vue3.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/chatbotRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/drag-and-dropControls
Manage surface mode (pan/lasso), undo/redo, zoom to extents from the Controls component.
Controls
The controls component is very easily skinned via CSS, and we ship a component version of it for Angular, Vue and React.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/chatbothttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/controls-componentDialogs
Straightforward and easily skinned dialog manager, with tight data binding to your model.
Dialogs
Each dialog consists of some HTML that you create, and you map input fields to fields in your data via a set of attributes. Easily styled and easy to integrate.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/dialogsInspector
Property inspector component for the objects in your model. Supports inspecting multiple objects of disparate types at once.
Inspector
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/chatbothttps://jsplumbtoolkit.com/demonstrations/schema-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/inspectorsElement Dragger
A helper class that you can use to turn any part of your UI external to the canvas into a draggable element
Element Dragger
Features include:
- Optional filter to denote parts of your element that should not kick off a drag
- Optional constrain function, to implement fine grained control over where your users can drag elements to
- Optional containment specifier - limit drag to parent element, either fully or partially, and optionally prevent dragging into the negative axis.
Related demonstrations:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-neighbourhood-viewRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/element-draggerGraph operations
A full set of operations on the underlying graph let you query and manipulate your dataset with ease
Graph operations
You can query the graph and operate on it without concerning yourself with the UI, knowing that the Toolkit will keep everything in sync.
Want to know if some node is connected to another? Easily done. Or maybe you want to find the shortest path from some node to another node? Find all the edges for which some element is the source? The Toolkit can tell you all of these things.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/data-modelUndo & Redo
Limitless stack of operations allowing your users to undo and redo to their hearts content.
Undo & Redo
A full set of events is fired by the Toolkit in response to operations on the undo/redo stack, allowing you to very easily maintain the state of any UI components you've got linked to it.
Undo stacks of a fixed size, when full, can either reject new operations, replace the most recent operation, or throw away the oldest operation to accomodate a new one.
Undo/redo is used in many of our demonstrations.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/undo_redoTransactions
Wrap multiple operations in a transaction and undo/redo them all in one atomic operation
Transactions
For instance, say you delete a shape in a diagram. Any edges attached to that shape must also be deleted, and the Toolkit wraps all of those deletions into a single transaction, so that the entire operation can be undone at once.
The Toolkit automatically wraps several other common operations inside transactions, but you can also access the transaction API yourself. Maybe you want to move a bunch of nodes around, update the properties of some of them, add a new edge - you can do all of that in one atomic operation via the Toolkit's transaction API.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/undo_redo#transactionsPaths
Query the Toolkit to find paths between elements and then animate them
Paths
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/pathsRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selectionsSelections
Select a set of nodes, groups and/or edges and perform operations on them at once. Or, use a selection as the data source for a Surface.
Selections
The surface widget can be created with a selection as its data source, allowing you to display some subset of the entire dataset but with the ability to apply a layout and to pan/zoom the content. When you create a selection with a generator function, you can subsequently reload the selection and the surface will update itself accordingly.
We use the concept of a selection as a surface's datasource in our Neighbourhood views demonstration, in which we have four popups that are each driven by a selection, and which listen to selection events from the Toolkit. When the user clicks on an element, each of the selections is reloaded and the popups seamlessly keep themselves up to date.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/neighbourhood-viewsRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selectionsFull text search
Attach a text search index to your Toolkit instance and run queries over the contents of the dataset
Full text search
Full text search of all your domain objects - nodes, groups and/or edges - is offered, across either all fields or a set of fields of your choice.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selectionsCopy & paste
Easily copy nodes, groups and/or edges to the clipboard and paste them elsewhere in your UI
Copy & paste
When pasting the contents of the clipboard you can specify an x/y location yourself, or you can provide a mouse event, which the surface will automatically map to a location on the canvas.
Groups - to an arbitrary depth - are, by default, copied with copies of all of their child elements.
The clipboard offers in-depth control over how edges are pasted - what happens if you have an edge in your clipboard but not both of the nodes it is attached to? The Toolkit's clipboard provides a detailed API for handling every case.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/copy-pasteShape Libraries
Choose from our Basic or Flowchart shape libraries to render the nodes in your UI, or create your own!
Shape Libraries
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-librariesResize Objects
The DrawingTools plugin allows you to select and resize objects using the mouse or touch events.
Resize Objects
Touch events are supported without any intervention required. Easily skinned via CSS.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-librariesLasso
The Lasso plugin allows you to select multiple elements via the mouse or touch events.
Lasso
Items added to the current selection will be automatically detected by various other parts of the Toolkit's ecosystem - the surface will add CSS classes in response, and any attached inspectors will respond too.
Use the lasso in standard mode as shown above, or in "mask" mode - the inverse of the image above, where the unselected parts of the UI are masked.
Nodes and groups snagged by the lasso are automatically added to the surface's current drag group.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/flowchart-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#lassohttps://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selectionsPath editing
Click and drag to manually edit the paths of connectors with a powerful and intuitive interface
Path editing
Touch events are fully supported with no extra libraries or setup required.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/segmented-connectorshttps://jsplumbtoolkit.com/demonstrations/flowchart-builderRead more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/edge-path-editorsSnaplines
Display visual cues to help your users align their elements