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
Use rich Angular components to represent the nodes/groups in your UI and our underlying service to wire everything up
Seamlessly integrate the Toolkit into a React app, with both components based and hooks based approaches supported.
Leverage the power of the Toolkit's tight integration with Vue 2 and Vue 3
Embed the Toolkit into a Svelte app with no fuss using our deep integration
Force directed, Hierarchy, Balloon, Circular and Absolute positioning layouts are provided out of the box.
The Toolkit makes it a snap to create your own layout, should one of our standard layouts not suffice for your use case.
The built-in magnetizer lets you make small adjustments to your UI to achieve the perfect layout.
The Surface is the heart of the Toolkit's UI, offering an infinitely pannable canvas with the smoothest zoom for miles around.
Attach a miniview to a surface and see your world in miniature. Pan and zoom directly on the miniview component to control the surface.
Drag and drop new nodes/groups onto your canvas with the SurfaceDropManager
Manage surface mode (pan/lasso), undo/redo, zoom to extents from the Controls component.
Straightforward and easily skinned dialog manager, with tight data binding to your model.
Property inspector component for the objects in your model. Supports inspecting multiple objects of disparate types at once.
A helper class that you can use to turn any part of your UI external to the canvas into a draggable element
A full set of operations on the underlying graph let you query and manipulate your dataset with ease
Undo & Redo
Limitless stack of operations allowing your users to undo and redo to their hearts content.
Wrap multiple operations in a transaction and undo/redo them all in one atomic operation
Query the Toolkit to find paths between elements and then animate them
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.
Full text search
Attach a text search index to your Toolkit instance and run queries over the contents of the dataset
Copy & paste
Easily copy nodes, groups and/or edges to the clipboard and paste them elsewhere in your UI
Choose from our Basic or Flowchart shape libraries to render the nodes in your UI, or create your own!
The DrawingTools plugin allows you to select and resize objects using the mouse or touch events.
The Lasso plugin allows you to select multiple elements via the mouse or touch events.
Click and drag to manually edit the paths of connectors with a powerful and intuitive interface
Display visual cues to help your users align their elements