CSS
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 Toolkit ships several CSS files (inside the /css directory of the @jsplumbtoolkit/browser-ui package) that contain sane defaults.
- jsplumbtoolkit.css
Styles for the UI core, including such things as absolute positioning for nodes/groups, styles to setup a surface widget and its various plugins, etc. You should include this stylesheet in your cascade when you start working with JsPlumb.
- jsplumbtoolkit-controls.css
Styles assigned by the controls component
- jsplumbtoolkit-connector-editors.css
Styles for the connector editors for Orthogonal and Bezier connectors
- jsplumbtoolkit-dialogs.css
Styles for the dialogs helpers
- jsplumbtoolkit-edge-type-picker.css
Styles for the edge type picker, as seen in the flowchart builder starter app
UI Core
Nodes & Groups
Classes assigned to nodes and groups in your UI.
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-node | Assigned to any element representing a node in your data model. |
jtk-group | Assigned to any element representing a group in your data model. |
Edges
Classes assigned to edges in your UI
Default values specified in the jsplumbtoolkit.css stylesheet
| 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-surface-selected-connection | Assigned to the SVG element of some edge that is currently selected, ie. has been added to a Toolkit instance's current selection. See docs regarding selections and edge styling for further information. |
Element dragging
Classes used during the lifecycle of dragging an element (node / group)
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-surface-element-dragging | Assigned to a node/group thatis currently being dragged |
jtk-most-recently-dragged | Assigned to the node/group that was most recently dragged. One common use for this class is to bump the z-index of the most recently dragged element to ensure it sits on top of any other nodes/groups. |
jtk-drag-active | Assigned to a group element that is a candidate drop target for a node or group that is currently being dragged |
jtk-drag-hover | Assigned to a group element that is the current drop target for a node or group that is being dragged |
jtk-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. |
Surface
Classes assigned by the Surface component
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-surface | Assigned to an element that is acting as a surface widget |
jtk-surface-touch-device | Assigned to an element that is acting as a surface widget when the device supports touch events |
jtk-surface-pointer-device | Assigned to an element that is acting as a surface widget when the device supports pointer events |
jtk-surface-direct-render | Assigned to an element that is acting as a surface widget in 'direct render' mode, ie. readonly. |
jtk-surface-nopan | Assigned to a surface for which `enablePan` was set to `false` in the render args |
jtk-surface-canvas | Assigned to the work area of a surface widget. This canvas element will have been created automatically by the surface and is not normally something you will need to style. If you do attach some styles, you should be careful to ensure that this element always has `position:relative;` set. |
jtk-surface-selected-element | Assigned to any element representing a node/group/port that is part of some surface's current selection. |
jtk-surface-selected-connection | Assigned to any element representing an edge that is part of some surface's current selection. |
jtk-lasso | Assigned to the selection lasso element |
Edge path editors
Classes used by the edge path editors.
Default values specified in the jsplumbtoolkit-connector-editors.css stylesheet
| Class | Description |
|---|---|
jtk-orthogonal-handle | Assigned to segment drag handles in the orthogonal editor |
jtk-orthogonal-segment-drag | Assigned to segment drag handles in the orthogonal editor |
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-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-bezier-handle | Assigned to control point drag handles in bezier editor. Control points can be dragged by these handles |
jtk-bezier-handle-control-point | Assigned to control point drag handles in the Bezier and StateMachine editors. Control points can be dragged by these handles |
jtk-bezier-handle-control-point-1 | Assigned to the first control point handle in the Bezier editor only. In the StateMachine editor this is not assigned |
jtk-bezier-handle-control-point-2 | Assigned to the second control point handle in the Bezier editor only. In the StateMachine editor this is not assigned |
jtk-bezier-guideline | Assigned to guidelines in the Bezier/StateMachine editors |
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-anchor-candidate | Added to the elements drawn to show where a certain anchor may be relocated to (only applicable for dynamic anchors) |
jtk-edge-delete | Assigned to the optional delete button overlay that the edge path editor can add |
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 |
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.
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-miniview | Assigned to an element that is acting as a Miniview's container |
jtk-miniview-canvas | Assigned to the work area in the Miniview |
jtk-miniview-panner | Assigned to the element used to pan the Surface from the Miniview |
jtk-miniview-panning | Assigned to the element used to pan the surface as it is being dragged |
jtk-miniview-element | Assigned to all elements on the Miniview's canvas |
jtk-miniview-group-element | Assigned to all group elements on the miniview's canvas (they also get `.jtk-miniview-element`) |
jtk-miniview-collapse | Assigned to a miniview's collapse/expand element |
jtk-miniview-collapsed | Assigned to a miniview when it is collapsed |
jtk-miniview-click-to-center | Assigned to a miniview's container when `clickToCenter` is enabled on the miniview. The default stylesheet uses this to set a pointer cursor on miniview elements. |
Drawing Tools
Classes used by the DrawingTools plugin
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-draw-skeleton | Assigned to the outline of the drawing tools attached to some element |
jtk-draw-handle | Assigned to the individual resize handles |
jtk-draw-handle-tl | Assigned to the top left resize handle |
jtk-draw-handle-tr | Assigned to the top right resize handle |
jtk-draw-handle-br | Assigned to the bottom right resize handle |
jtk-draw-handle-bl | Assigned to the bottom left resize handle |
Snaplines
Classes used by the Snaplines plugin.
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-snapline | Assigned to both horizontal and vertical snaplines when active |
jtk-snapline-horizontal | Assigned to horizontal snaplines when active |
jtk-snapline-vertical | Assigned to vertical snaplines when active |
jtk-snapline-exact | Assigned to both horizontal and vertical snaplines when the elements are exactly aligned |
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 |
Active Filtering
Attributes assigned by the ActiveFiltering plugin
| Attribute | Type | Description |
|---|---|---|
data-jtk-enabled | boolean | Set to false when the given element is not a valid drag target for the current edge |
Pan buttons
Classes assigned by the PanButtons plugin
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-surface-panning | Assigned to the surface's canvas when it is panning in response to one of the buttons having been clicked |
jtk-surface-pan-active | Assigned to a pan button when it has been clicked and the surface is panning |
jtk-surface-pan | Assigned to all 4 pan buttons |
jtk-surface-pan-left | Assigned to the pan button on the left of the canvas |
jtk-surface-pan-top | Assigned to the pan button on the top of the canvas |
jtk-surface-pan-right | Assigned to the pan button on the right of the canvas |
jtk-surface-pan-bottom | Assigned to the pan button on the bottom of the canvas |
Grid background
Generated grids are SVG elements, and each part of the grid is assigned a unique CSS class, allowing you to apply your own styles.
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-background-border | Assigned to the rect element that provides the background border, if present |
jtk-background-grid | Assigned to both the major and minor grid lines |
jtk-background-grid-minor | Assigned to the minor grid lines |
jtk-background-grid-major | Assigned to the major grid lines |
Vertex Drawing
Classes assigned by the vertex drawing plugin
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-vertex-drawing-lasso | Assigned to the lasso. The lasso also has its normal `jtk-lasso` class, so you can use this class to override anything from the normal class that you don't want when drawing vertices |
jtk-group-candidate-child | When drawing a group, assigned to any group/node elements that will end up as children of the new group |
Components
Dialogs
Classes used by the Dialogs manager.
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-dialog-underlay | The element that acts as the modal mask |
jtk-dialog-overlay | The element that acts as the parent for dialog content |
jtk-dialog-overlay-visible | Assigned to an overlay 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-overlay-top | Assigned to dialogs appearing in the `top` position |
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-buttons | Button container element |
jtk-dialog-button | An individual button in a dialog |
jtk-dialog-title | The titlebar of a dialog |
jtk-dialog-content | The content of a dialog (does not contain the titlebar) |
Controls
Classes assigned by the controls component
Default values specified in the jsplumbtoolkit-controls.css stylesheet
| Class | Description |
|---|---|
jtk-controls | Assigned to the component root |
jtk-selected-mode | Assigned to the button that toggles the current mode of the surface |
jtk-zoom-to-fit | Assigned to the Zoom to fit button |
jtk-select-mode | Assigned to the Select mode button |
jtk-pan-mode | Assigned to the Pan mode button |
jtk-undo | Assigned to the Undo button |
jtk-redo | Assigned to the Redo button |
jtk-clear-dataset | Assigned to the Clear dataset button |
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. |
SVG/PNG/JPG export
Classes used by the SVG/PNG/JPG exporter ui.
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-export-underlay | Assigned to the element that acts as an underlay for the export preview |
jtk-export-overlay | Assigned to the element presents the export preview |
jtk-export-cancel | Assigned to the 'X' button on the export preview window |
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
Default values specified in the jsplumbtoolkit.css stylesheet
| Class | Description |
|---|---|
jtk-shape-library-palette-set | Assigned to the parent element for one set of icons in the shape library palette |
jtk-shape-library-palette | Assigned to the root element for a shape library palette |
jtk-shape-library-palette-shape | Assigned to each shape icon in the palette |
jtk-shape-library-palette-set-title | Assigned to the title element for a set of icons |
jtk-shape-library-palette-label | Assigned to the label for each shape icon, if you have `showLabels:true` set. |
jtk-shape-library-palette-selected-shape | When in `tap` mode, assigned to the currently selected shape. |
jtk-shape-library-palette-lasso | When in `tap` mode, this class is added to the lasso used to draw new vertices |
jtk-shape-library-palette-filter | Assigned to the drop-down that is shown when there are multiple shape sets in the palette |