CSS / Overview - Toolkit edition


The jsPlumb Toolkit attaches a number of CSS classes to the elements with which it interacts, allowing you a high degree of control over the look and feel of your interface. This page discusses the CSS classes used throughout the rendering lifecycle by the Toolkit edition. For a discussion of the mechanics of styling endpoints and connector lines, see the styling via css page.

It is also recommended that you read the jsPlumb CSS documentation, as everything discussed on that page applies when working with the jsPlumb Toolkit. In particular you might like to read the "Z Index" and "Preventing selection while dragging" sections.


When you build an application with the jsPlumb Toolkit you will generally supply client side templates to render your Nodes, so you are free to write the markup as you please, and CSS is completely under your control.

Important It is expected, if the nodes/groups in your UI are draggable, that they will have a CSS position value of absolute. Relative positioning does not work well with dragging. Also, ensure that your nodes/groups have no margin set, as margin is not taken into account when determining the location and size of an element (a margin on an absolute positioned element does not make sense; margins are used to alter the default position of some element in the document flow, and absolute positioned elements are removed from the document flow).

Hover Effects etc

jsPlumb writes a number of different classes to the DOM elements involved in any given Connection. Upon hover, to take one example, the source element is assigned a class to indicate its Connection is being hovered upon, and also a class to indicate that it is the source in a Connection being hovered upon.

These classes provide a powerful way of adding dynamic behaviour to your UI without having to resort to Javascript.

A full discussion of these can be found in the Interactive CSS Classes section in the CSS styling documentation.

Note: Wherever you see 'Connection' discussed in the jsPlumb documentation, remember that a jsPlumb Connection is the visual artefact representing an Edge in the Toolkit. Similarly, when you see a reference to an "element", the analog in the Toolkit is either a Node or a Port.


You can use CSS to style the SVG edges. The aforelinked CSS jsPlumb page contains information about how to style an SVG Connection.


You will also most likely wish to style the Toolkit widgets you are using in your app. Both the Miniview and the Surface expose a comprehensive set of classes that you can use - these are listed below.

Your licensed copy of the jsPlumb Toolkit shipped with a CSS file containing appropriate default values for all of the classes used by the Toolkit. This file can be found at:


To get a prototype up and running it is recommended you include this file in your HTML page.

This is a complete list of classes the jsPlumb Toolkit uses throughout the rendering lifecycle.

jtk-surfaceAssigned to the container element of a Surface (the original element)
jtk-surface-nopanAssigned to the container element of a Surface when `enablePan` is set to false. This class sets overflow to scroll, rather than hidden, which will cause scrollbars to appear when the content overflows.
jtk-surface-canvasAssigned to the element in the Surface on which elements are drawn
jtk-surface-panAssigned to the pan buttons which are positioned against the edges of a Surface
jtk-surface-pan-topAssigned to the pan button which is positioned against the top edge of a Surface
jtk-surface-pan-bottomAssigned to the pan button which is positioned against the bottom edge of a Surface
jtk-surface-pan-leftAssigned to the pan button which is positioned against the left edge of a Surface
jtk-surface-pan-rightAssigned to the pan button which is positioned against the right edge of a Surface
jtk-surface-pan-activeAssigned to a pan button either when it is being clicked, or when the mouse is held on it and auto-pan is in effect.
jtk-surface-panningAssigned to the container element of a Surface whenever the Surface is being panned with the mouse or with a touch event
jtk-surface-selected-elementAssigned to any elements in a Surface that are in the Toolkit's current selection (whether by a lasso selection with the mouse or having been programmatically added)
jtk-surface-selected-connectionAssigned to any edges in a Surface that are in the Toolkit's current selection
jtk-nodeAssigned to all Nodes
jtk-groupAssigned to all Groups
jtk-group-expandedAssigned to all Groups when they are in expanded state
jtk-group-collapsedAssigned to all Groups when they are in collapsed state
jtk-portAssigned to all Ports
jtk-most-recently-draggedAssigned to the most recently dragged Node or Group in a Surface widget
jtk-miniviewAssigned to the container element of a Miniview
jtk-miniview-canvasAssigned to the element in the Miniview on which elements are drawn
jtk-miniview-pannerAssigned to the element in the Miniview that you can drag to pan the associated Surface.
jtk-miniview-panningAssigned to the container of the Miniview when its panner element is being dragged by the mouse
jtk-miniview-elementAssigned to all elements drawn inside the Miniview
jtk-miniview-collapseAssigned to the collapse button of a Miniview.
jtk-miniview-collapsedAssigned to the container of a Miniview when it is collapsed.
jtk-lassoAssigned to the lasso mask that is drawn when selecting multiple items with the mouse.
jtk-lasso-select-defeatAssigned to the body when the lasso is in operation. You can use this to disable text selection (the default jsPlumb Toolkit css file does this)
Drawing Tools
jtk-draw-skeletonAssigned to the element that is drawn around some other element when it is selected
jtk-draw-handleAssigned to every handle (top left, top right, bottom left, bottom right, center) in a draw skeleton.
jtk-draw-handle-tlAssigned to the top left handle in a draw skeleton
jtk-draw-handle-trAssigned to the top right handle in a draw skeleton
jtk-draw-handle-blAssigned to the bottom left handle in a draw skeleton
jtk-draw-handle-brAssigned to the bottom right handle in a draw skeleton
jtk-draw-dragAssigned to the center handle in a draw skeleton (the handle by which the element may be dragged)
jtk-draw-select-defeatAdded to the document body on drag resize start and removed at the end of resizing. Its purpose is to switch off text selection on all elements while the user is resizing an element.