Skip to main content

Controls component

This component was included in the Toolkit on the off chance that it will be useful to some people. Since release 6.2.0, in which the Toolkit began to be properly tree-shakable, we've felt a certain latitude to include extra things such as this, because if you don't reference it you won't get it in your bundle.

The controls component draws a set of buttons that offer some basic functionality to interact with a Surface:

You can see this component in use in various starter apps and feature demos, such as the Flowchart Builder.


This is for vanilla JS:

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

const toolkit = newInstance()
const canvasElement = ...
const controlsElement = ...

const surface = toolkit.render(canvasElement, {...})
const controls = new ControlsComponent(controlsElement, surface)

For usage with Angular, React, Vue2 or Vue3, see the appropriate library integration documentation.


This initial release of the ControlsComponent does not offer any scope for customization, but you could use the CSS classes discussed below to selectively hide specific operations. We're open to suggestions on this - if you use it, and you'd like to see some update, by all means let us know.


There is an accompanying stylesheet for the ControlsComponent that ships with the Toolkit - jsplumbtoolkit-controls.css.

Classes assigned by the controls component are:

ClassAssigned ToPurpose
jtk-controlsComponent root
jtk-selected-modePan/lasso buttonAssigned to the button that represents the current mode of the surface
jtk-zoom-to-fitZoom to fit button
jtk-select-modeSelect mode button
jtk-pan-modePan mode button
jtk-undoUndo button
jtk-redoRedo button
jtk-clear-datasetClear dataset button

Additionally, the controls component uses four attributes to reflect the current state:

  • can-undo Assigned to the .jtk-controls element, given a value of true or false depending on the undo stack.
  • can-redo Assigned to the .jtk-controls element, given a value of true or false depending on the redo stack.
  • data-undo Assigned to the undo button.
  • data-redo Assigned to the redo button.