Skip to main content

Build Connectivity Quickly.

Powerful and flexible Javascript library for diagramming and rich graphical front ends.
DemonstrationsFree Trial
Diagram built with jsPlumb Toolkit, a leading alternative to JointJS and GoJS
Get started with one of our pre-built apps:
Flowcharts

Flowchart builder application - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2, Vue 3, React and Svelte versions available.
Schemas

Database schema builder application - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2, Vue 3 and React versions available.
Chatbots

Chatbot builder application - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Use the Toolkit to build a chatbot flow, with actions, messages, input and choices. Angular, Vue 2, Vue 3, React and Svelte versions available.
Org Charts

Org chart application - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

The Toolkit makes it simple to build interactive org charts. This starter app uses the classic org chart layout and provides an inspector from which the user can navigate around. Angular, Vue 2, Vue 3 and React versions available.
Mindmaps

Mindmap builder application - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Simple mindmap builder, highlighting several advanced features the Toolkit offers, such as custom layouts, parsers and exporters
Nested Groups

Element grouping demonstration - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

Learn about how the Toolkit lets you work with groups nested to an arbitrary level, with full drag and drop support.
Path Tracing

Path tracing demonstration - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Leverage the Toolkit's underlying Directed Graph to visualize paths between elements.
Hello World

Hello world demonstration - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

This app is designed to give you a basic starter app from which you can build your own, without any of the bells and whistles included in our other starter apps.
Image Processor Pipeline

Image processor application - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Fully featured image processor using HTML canvas for you to use as a base for your own apps. Angular, Vue 2, Vue 3, React and Svelte versions available.
Browse all starter apps and feature demos
"Our devs love your product and it has really enhanced ours."

Extensive built-in feature set

Layouts

The Toolkit provides a number of built-in layouts - Force Directed, Hierarchy (org chart), Balloon and more - and it's a straightforward process to write your own.

Miniview

Use the miniview to help navigate your way around the UI. Zoom in and out via the miniview, even with touch events.

Undo/redo

All operations on the dataset can be easily undone/redone, and the Toolkit provides support for batching operations in transactions

Pan/zoom

The smoothest wheel zoom for miles around. Touch events are handled transparently with no need for an external library. Pan and zoom operations are automatically clamped to ensure your users never lose track of where they are.

Templating

The Toolkit has a clear separation between model and view, allowing you to define templates for your nodes and groups and leave it to the Toolkit to know what to render

Library Integrations

The deepest library integrations of any diagramming library (because jsPlumb is not just a diagramming library!) - use components from React, Angular, Vue or Svelte to render rich graphical content and isolate behaviour

Drawing tools

Resize elements using the mouse or touch devices. Fully customizable via CSS.

Shape Libraries

The Toolkit ships with a set of SVG shapes for drawing flowcharts and a simple means for plugging these in to your UI. Watch this space - we'll be shipping BPMN shapes very soon!

CSS styling

Every part of the Toolkit UI publishes an extensive list of CSS classes that you can use to tweak the appearance.

Edge editing

Let your users find their own paths with the Toolkit's edge editor functionality.

Graph operations

Use the Graph that lies at the heart of the Toolkit to query the dataset. What's connected to this vertex? What are the ancestors of this group? Is there a path from this vertex to some other vertex?

Path tracing

Grab a path from some vertex to another and then have the Toolkit navigate an overlay along it

Browse all of the Toolkit's features
React
Angular
Vue
Svelte
TS
HTML5
Tight integration with major Javascript/Typescript libraries and frameworks

Create your UI using rich components in your library of choice.

Do you have a library you'd like us to integrate with? Get in touch and let us know!

Comprehensive Browser Support

The jsPlumb Toolkit supports all modern desktop and mobile browsers, with full touch event support and pinch to zoom on touch devices. No external library needed.