The various components and plugins in JsPlumb offer a rich set of CSS classes and attributes that you can use to customize your UI. The jsplumbtoolkit.css stylesheet inside the /css directory of the @jsplumbtoolkit/browser-ui package contains sane defaults for all of the classes listed on this page.
If you are new to JsPlumb, we strongly recommend including jsplumbtoolkit.css in your page, because there are certain structural styles declared in it. The stylesheet is internally documented and it's easy to edit it to create a cut-down version that works for you.
UI Core
Nodes, groups and ports
Classes assigned to nodes and groups in your UI.
| Class | Description |
|---|
jtk-connected | Assigned to node/group/port element when the vertex it represents has one or more edges attached. |
jtk-default-node | Assigned by the surface to a node rendered as a default when no component/template mapping was provided. |
jtk-group | Assigned by the Surface to a DOM element that represents a group. |
jtk-group-collapsed | Assigned to a group element when the group is collapsed. |
jtk-group-expanded | Assigned to a group element when the group is not collapsed. |
jtk-node | Assigned by the Surface to a DOM element that represents a node. |
jtk-port | Assigned by the Surface to a DOM element that represents a port. |
Edges
Classes assigned to edges in your UI
| Class | Description |
|---|
jtk-connector | Assigned to the SVG element that is the parent of the path element used to draw an edge. A common setup using this class is to assign it a z-index which is lower than the z-index set for .jtk-node and .jtk-group. You can target the path element directly using .jtk-connector path, for instance for setting a stroke-width or stroke |
jtk-connector-outline | Assigned to the SVG path element used to draw an edge's outline. |
jtk-label-overlay | Assigned to all label overlay elements |
jtk-overlay | Assigned to all overlay elements |
jtk-surface-selected-connection | Assigned by the Surface to a DOM element representing an edge in the Toolkit's current selection. |
Element dragging
Classes used during the lifecycle of dragging an element (node / group)
| Class | Description |
|---|
jtk-vertex-drag-original-group | Assigned to a group element when one of its children is being dragged. This can be useful to help manage z-index: we recommend using this class to set a z-index for the drag parent group above that of the other groups, which will ensure that the element you are dragging will appear on top of other groups. |
jtk-most-recently-dragged | Assigned by the Surface to the vertex element(s) that was/were the most recently dragged elements. |
jtk-surface-element-dragging | Assigned by the Surface to a vertex element that is being dragged |
jtk-vertex-drag-active | Assigned to a group element that is a candidate drop target for a node or group that is currently being dragged |
jtk-vertex-drag-hover | Assigned to a group element that is the current drop target for a node or group that is being dragged |
Surface
Classes assigned by the Surface component
| Class | Description |
|---|
jtk-drag-select-defeat | Assigned by the Surface to the document body while the user is dragging a vertex or edge. See jsplumbtoolkit.css for
the specific rules. |
jtk-shape | This class is assigned to the parent SVG elements for shapes. |
jtk-shape-label | This class is assigned to svg text elements serving as shape labels. |
jtk-surface | Assigned to the DOM element a surface is rendered to. |
jtk-surface-canvas | Assigned to the canvas element used by a Surface - the DOM element that is the parent of all vertices and edges. |
jtk-surface-direct-render | Assigned to the DOM element a surface is rendered to when direct rendering is switched on. |
jtk-surface-edge-dragging | Assigned by the Surface to the DOM element representing an edge that is currently being dragged |
jtk-surface-nopan | Assigned to the Surface's DOM element when panning is disabled. |
jtk-surface-panning | Assigned by the Surface to its canvas while the canvas is being panned (either programmatically or via pointer/touch) |
jtk-surface-pointer-device | Assigned to the Surface's DOM element when JsPlumb detects the device supports pointer events. |
jtk-surface-selected-element | Assigned by the Surface to a DOM element representing a vertex in the Toolkit's current selection. |
jtk-surface-touch-device | Assigned to the Surface's DOM element when JsPlumb detects the device supports touch events. |
Edge path editors
Classes used by the edge path editors.
| Class | Description |
|---|
jtk-anchor-candidate | Added to the elements drawn to show where a certain anchor may be relocated to (only applicable for dynamic anchors) |
jtk-anchor-placeholder | Added to the element placed at the location of an anchor for a connection that is being edited. This applies to both dynamic and continuous anchors |
jtk-bezier-guideline | CSS class assigned to the guidelines linking the anchor points with the control point markers in the bezier edge editor. |
jtk-bezier-handle | CSS class added to all handles used by the bezier edge editor. |
jtk-bezier-handle-control-point | CSS class assigned to a control point handle in the bezier edge editor |
jtk-bezier-handle-control-point-1 | CSS class assigned to the first control point handle in the bezier edge editor |
jtk-bezier-handle-control-point-2 | CSS class assigned to the second control point handle in the bezier edge editor |
jtk-edge-delete | Assigned to the optional delete button overlay that the edge path editor can add |
jtk-edge-handle | Class applied to edge drag handles. |
jtk-edge-guideline | CSS class added to an edge guideline by the straight connector editor |
jtk-orthogonal-handle | Assigned to all handles in the orthogonal editor |
jtk-orthogonal-segment-drag | Assigned to segment drag handles in the orthogonal editor |
jtk-orthogonal-segment-drag-ew | Assigned to segment drag handles on vertical segments in the orthogonal editor. Indicates a segment can be dragged in the X axis |
jtk-orthogonal-segment-drag-ns | Assigned to segment drag handles on horizontal segments in the orthogonal editor. Indicates a segment can be dragged in the Y axis |
jtk-straight-segment-delete | CSS class added to a delete handle by the straight connector editor |
jtk-straight-segment-drag | CSS class added to a drag handle by the straight connector editor |
jtk-straight-handle | CSS class added to all segment handles created by the segmented editor |
jtk-straight-segment-split | CSS class added to a segment split handle by the straight connector editor |
In addition to these classes, when an anchor is `Continuous`, the edge path editor uses an attribute on the anchor's element to indicate the current face of the element on which a dragged anchor would be located:
| Attribute | Type | Description |
|---|
jtk-anchor-face | 'left'|'right'|'top'|'bottom' | Indicates the current face of the element on which a dragged anchor would be located |
You can target the `jtk-anchor-face` attribute with a selector:
| Selector | Description |
|---|
[jtk-anchor-face='left'] | Indicates the current target face is the left face |
[jtk-anchor-face='right'] | Indicates the current target face is the right face |
[jtk-anchor-face='bottom'] | Indicates the current target face is the bottom face |
[jtk-anchor-face='top'] | Indicates the current target face is the top face |
Path animation
During the lifetime of a path traversal, these classes are written to various parts of the UI
| Class | Description |
|---|
jtk-animate-edge-traversable | Assigned to all edges that will be travelled along by a path traversal. The class is removed at the end of the animation. |
jtk-animate-edge-traversed | Assigned to an edge that has been traversed by a path traversal. The class is removed at the end of the animation. |
jtk-animate-edge-traversing | Assigned to an edge that a path traversal is currently travelling along. The class is removed once the path traversal
moves to the next vertex, or finishes. |
jtk-animate-source | Assigned to the element that is the source of a path traversal animation. |
jtk-animate-target | Assigned to the element that is the target of a path traversal animation. |
jtk-animate-node-traversable | Assigned to all elements that will be traversed by a path traversal. The class is removed at the end of the animation. |
jtk-animate-node-traversed | Assigned to an element that has been traversed by a path traversal. The class is removed at the end of the animation. |
jtk-animate-node-traversing | Assigned to an element that a path traversal is currently passing through. The class is removed once the path traversal
moves to the next edge, or finishes. |
Drag and drop
Classes used by the drag/drop new nodes/groups functionality.
| Class | Description |
|---|
jtk-drag-drop-active | Assigned to all elements that could be the target for some element that is being dragged from a palette |
jtk-drag-drop-current | Assigned to an element that is being dragged from a palette |
jtk-drag-drop-selected-element | Assigned to the currently selected element in a palette when in tap mode. |
Plugins
Miniview
These are the classes you can use to style the Miniview. Note that vertices in the Miniview are sized to be identical to their mapped vertices in the related Surface (but the Miniview is zoomed out, so they are not 1:1 in size with their related vertices). You could of course use CSS to force a size for vertices in the Miniview, but this is not recommended: if your Surface contains vertices of various sizes but the Miniview uses a uniform size, the user may experience a certain discontinuity between the two views.
| Class | Description |
|---|
jtk-miniview | Assigned by the Miniview to the DOM element into which it was rendered. |
jtk-miniview-canvas | Assigned by the Miniview to the DOM element into which is renders vertices. |
jtk-miniview-click-to-center | Assigned by the Miniview to its container DOM element when 'clickToCenter' mode is switched on. |
jtk-miniview-collapse | Assigned by the Miniview to the collapse button. |
jtk-miniview-collapsed | Assigned by the Miniview to its container DOM element when it has been collapsed. |
jtk-miniview-element | Assigned by the Miniview to a DOM element representing a node. |
jtk-miniview-group-element | Assigned by the Miniview to a DOM element representing a group. |
jtk-miniview-panner | Assigned by the Miniview to the DOM element that provides the visual cue showing the user how the viewport of the
miniview relates to the entire dataset, and which the user can drag to pan. |
jtk-miniview-panning | Assigned by the Miniview to its canvas when the user is panning it. |
Lasso
Classes assigned by the lasso plugin.
| Class | Description |
|---|
jtk-lasso | Assigned to the DOM element representing a lasso |
jtk-lasso-mask | Assigned to each DOM element representing part of the lasso mask, when the lasso is inverted mode. The lasso
mask consists of four parts, one to the left, right, top and bottom of the area that has been lassoed. |
jtk-lasso-mask-bottom | Assigned to the DOM element representing the bottom part of the lasso mask, when the lasso is inverted mode. |
jtk-lasso-mask-left | Assigned to the DOM element representing the left part of the lasso mask, when the lasso is inverted mode. |
jtk-lasso-mask-right | Assigned to the DOM element representing the right part of the lasso mask, when the lasso is inverted mode. |
jtk-lasso-mask-top | Assigned to the DOM element representing the top part of the lasso mask, when the lasso is inverted mode. |
| Class | Description |
|---|
jtk-draw-border | CSS class set on the resize borders |
jtk-draw-border-b | CSS class set on the bottom border handle |
jtk-draw-border-l | CSS class set on the left border handle |
jtk-draw-border-r | CSS class set on the right border handle |
jtk-draw-border-t | CSS class set on the top border handle |
jtk-draw-drag | CSS class set on the element dragger that is added to the middle of the element when the drawing
tools are active. The default stylesheet hides this element. |
jtk-draw-handle | CSS class set on the resize handles |
jtk-draw-handle-bl | CSS class set on the bottom left corner resize handle |
jtk-draw-handle-br | CSS class set on the bottom right corner resize handle |
jtk-draw-handle-tl | CSS class set on the top left corner resize handle |
jtk-draw-handle-tr | CSS class set on the top right corner resize handle |
jtk-draw-skeleton | CSS class set on the element that is the parent of drag handles when in handles resize mode. |
jtk-draw-skeleton-borders | CSS class set on the element that is the parent of drag handles when in borders resize mode. |
jtk-draw-skeleton-borders-visible | CSS class set on the draw tool's main element for some vertex when bordersVisible is set to true and
the resize mode is DRAWING_TOOLS_RESIZE_METHOD_BORDERS |
Snaplines
| Class | Description |
|---|
jtk-snapline | Assigned to both horizontal and vertical snaplines when active |
jtk-snapline-active | Assigned to an element attached to an active snapline |
jtk-snapline-active-exact | Assigned to an element attached to an active snapline and the elements on the snapline are exactly aligned |
jtk-snapline-exact | Assigned to both horizontal and vertical snaplines when the elements are exactly aligned |
jtk-snapline-horizontal | Assigned to horizontal snaplines when active |
jtk-snapline-vertical | Assigned to vertical snaplines when active |
Classes assigned by the PanButtons plugin
| Class | Description |
|---|
jtk-surface-pan | Assigned by the PanButtons plugin to each of the pan buttons it adds around the surface. |
jtk-surface-pan-active | Assigned by the PanButtons plugin when the user is pressing a pan button and a pan is in motion. |
jtk-surface-pan-bottom | Assigned by the PanButtons plugin to the pan button it adds on the bottom edge of the surface. |
jtk-surface-pan-left | Assigned by the PanButtons plugin to the pan button it adds on the left edge of the surface. |
jtk-surface-pan-right | Assigned by the PanButtons plugin to the pan button it adds on the right edge of the surface. |
jtk-surface-pan-top | Assigned by the PanButtons plugin to the pan button it adds on the top edge of the surface. |
Grid background
| Class | Description |
|---|
jtk-background | The css class that will be added to a grid background's main element |
jtk-background-border | The css class that will be added to a grid background's border |
jtk-background-grid | The css class that will be added to the major and minor dots/lines in a grid background |
jtk-background-grid-dotted-major | The class that will be added to the dots representing a grid background's grid lines (when gridType is GridTypes.dotted) |
jtk-background-grid-dotted-minor | The class that will be added to the dots representing a grid background's grid tick marks (when gridType is GridTypes.dotted) |
jtk-background-grid-major | The class that will be added to the lines representing a grid background's grid lines (when gridType is GridTypes.lines) |
jtk-background-grid-minor | The class that will be added to the lines representing a grid background's tick marks (when gridType is GridTypes.lines) |
Vertex Drawing
Classes assigned by the vertex drawing plugin
| Class | Description |
|---|
jtk-group-candidate-child | The CSS class added to any groups/nodes which have been lassoed and will be added to the new group being drawn |
jtk-vertex-drawing-lasso | The CSS class added to the lasso used by the vertex drawing plugin. |
Components
Dialogs
Classes used by the Dialogs manager.
| Class | Description |
|---|
jtk-dialog | Set this class on any dialog elements you serve with your page to allow JsPlumb to auto-discover them. Be sure to
include a unique ID attribute on the element. |
jtk-dialog-button | Assigned to all buttons in a dialog |
jtk-dialog-button-cancel | Assigned to a dialog's cancel button |
jtk-dialog-button-ok | Assigned to a dialog's OK button |
jtk-dialog-buttons | The dialog's button container element |
jtk-dialog-content | The content of a dialog (does not contain the titlebar) |
jtk-dialog-overlay | The element that acts as the parent for dialog content |
jtk-dialog-overlay-bottom | Assigned to dialogs appearing in the bottom position |
jtk-dialog-overlay-left | Assigned to dialogs appearing in the left position |
jtk-dialog-overlay-right | Assigned to dialogs appearing in the right position |
jtk-dialog-overlay-top | Assigned to dialogs appearing in the top position |
jtk-dialog-overlay-visible | Assigned to the dialog overlay element when the dialog is visible |
jtk-dialog-overlay-x | Assigned to dialogs appearing in the top or bottom positions. |
jtk-dialog-overlay-y | Assigned to dialogs appearing in the left or right positions. |
jtk-dialog-title | The titlebar of a dialog |
jtk-dialog-underlay | The element that acts as the modal mask |
Controls
Classes assigned by the controls component
| Class | Description |
|---|
jtk-controls | This class is written to the container element for a controls component. |
jtk-clear-dataset | Assigned to the clear dataset button |
jtk-pan-mode | Assigned to the Pan mode button |
jtk-redo | Assigned to the redo button |
jtk-select-mode | Assigned to the Select mode button |
jtk-undo | Assigned to the undo button |
jtk-zoom-to-fit | Assigned to the Zoom to fit button |
jtk-selected-mode | Assigned to either the pan/select mode button, when that mode is active. |
Additionally, the controls component uses several attributes to reflect the current state:
| Attribute | Type | Description |
|---|
can-undo | 'true'|'false' | Assigned to the `.jtk-controls` element, given a value of true or false depending on the undo stack. |
can-redo | 'true'|'false' | Assigned to the `.jtk-controls` element, given a value of true or false depending on the redo stack. |
data-undo | blank | Assigned to the undo button. |
data-redo | blank | Assigned to the redo button. |
Export Controls
| Class | Description |
|---|
jtk-export-controls | This class is written to the container element for an export controls component. |
SVG/PNG/JPG export
Classes used by the SVG/PNG/JPG exporter ui.
| Class | Description |
|---|
jtk-export-cancel | Cancel button for export dialog |
jtk-export-dimensions | Dimensions drop down for export dialog |
jtk-export-download-tools | Element containing buttons and dimensions picker |
jtk-export-overlay | Content element for SVG/PNG/JPG export dialog |
jtk-export-underlay | The modal backing element for SVG/PNG/JPG export dialog |
You can target various parts of the export UI with these selectors:
| Selector | Description |
|---|
.jtk-export-overlay canvas | Targets the canvas into which the preview is painted. |
.jtk-export-overlay a | Target the 'download' link. |
Shape library palette
Classes assigned by the shape library palette component
| Class | Description |
|---|
jtk-shape-library-palette | Assigned to the root element for a shape library palette |
jtk-shape-library-palette-selected-shape | When in tap mode, assigned to the currently selected shape. |
jtk-shape-library-palette-set | Assigned to the parent element for one set of icons in the shape library palette |
jtk-shape-library-palette-filter | Assigned to the drop-down that is shown when there are multiple shape sets in the palette |
jtk-shape-library-palette-set-title | Assigned to the title element for a set of icons |
jtk-shape-library-palette-shape | Assigned to each shape icon in the palette |
jtk-shape-library-palette-label | Assigned to the label for each shape icon, if you have showLabels:true set. |
jtk-shape-library-palette-lasso | When in tap mode, this class is added to the lasso used to draw new vertices |
