UI Overview

Parts of the UI

To view the contents of a JsPlumb instance you need to render it to a Surface. Depending on whether you're using Vanilla JS or one of our library integrations, how you go about this will be slightly different. Each object in your data model has a corresponding object in the UI: nodes, groups, ports and edges are all mapped to a visual representation (and, optionally, behaviour) via a view.

The surface component provides a pannable/zoomable canvas in which your UI can be rendered. It has a full suite of methods to assist in configuring the display and in navigating your way around, including the ability to zoom in to specific vertices or to the entire dataset, center the display on some vertex or group of vertices, and lots more. The canvas also offers the ability to clamp its movement so that whenever a user is panning or zooming the display there is always some portion of the content visible to the user, and there are methods available to assist in mapping coordinates from the page space to the surface's viewport.

Example

Here we provide a quick example of how to render a UI with JsPlumb.

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance, EVENT_CANVAS_CLICK } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
const surface = toolkit.render(someElement, {
    view:{
        nodes:{
            default:{
                template:`<div class="some-node">{{label}}</div>`
            }
        }
    },
    events:{
        [EVENT_CANVAS_CLICK]:() => {
            alert("Canvas clicked.")
        }
    }
})  

We create an instance of JsPlumb Toolkit, then render it to "someElement", with a click listener attached to the canvas.