Skip to main content

One post tagged with "components"

View All Tags

· 3 min read
Simon Porritt

Do you like what jsPlumb Toolkit can do but you don't have the time or maybe the skills in-house to build something with it? Today we are pleased to announce the release of a new member of the jsPlumb family - jsPlumb Components.

jsPlumb Components are pre-built components that you can use to rapidly add visual connectivity applications to your site. Built on top of the Toolkit, they are fully featured, standards compliant, and easy to configure and skin.

What components are available?#

As of release 1.0.0:

What other components might there be?#

We're currently developing a Sequence Diagram builder, and we're investigating a few other possibilities. If you have a suggestion, we're all ears - drop us a line at hello@jsplumbtoolkit.com

Example - Flowchart Builder#

This is about the most simple example possible of a flowchart, containing one Process, a Decision and two Terminus nodes. You can pan, zoom and click on nodes and edges to drag everything around, but if you delete things you'll have to reload this page, because in this example we haven't requested a palette to be attached, mostly due to space constraints on this page. Note how when you drag the canvas to pan, or zoom with the mousewheel, the component automatically clamps the movement so that some of the dataset is always visible.

There is a full demonstration of this component on our site at https://components.jsplumbtoolkit.com/component/flowchart/.

The code to generate this is as follows:

import { newInstance } from "@jsplumb-components/flowchart"
const flowchart = newInstance({    container:someElement})
flowchart.loadData(...someDataset...)

Read only mode to embed widgets#

All of the jsPlumb Components support "readOnly" mode, in which the display is zoomed to fit the size of its container and the user cannot interact with any of the nodes or edges. Here's the previous example in read only mode:

What's great, though, is that while in read only mode the component is still "live" and responds to changes in the data model. For example, if you click the button below we'll remove the "Not this time" node from the data model, and the component will update itself:

This capability makes jsPlumb Components great for use in dashboards where not everyone should be allowed to edit the dataset.

Easy to customise#

All of the jsPlumb Components offer a rich set of configuration options and a clear CSS structure that is easy to override. For more details, take a look at the documentation.

What browsers do they work on?#

All modern browsers. Not IE. If you really needed one to work in IE we could probably make that happen for you.

Angular? React? Vue? Svelte?#

We currently ship a React wrapper and an Angular wrapper for each of the jsPlumb Components. We're working on wrappers for Vue 2 and Vue 3. If you use Svelte you can just work directly with the vanilla components inside your views.

Can I get a trial?#

Absolutely! We offer 30 day evaluations of jsPlumb Components. Just head over to https://components.jsplumbtoolkit.com/trial/ and enter your email address to get started.