ui

JointJS+ provides additional ready-to-use UI elements that enhance the interactivity of your diagrams. Each UI component has tight integration with JointJS diagrams in order to get you up and running quickly.

BPMNFreeTransform

BPMNFreeTransform creates a control panel above a BPMN element that allows resizing in any direction. Learn more about this UI component in the API reference.

Clipboard

Clipboard implements the ability to copy and paste cells. Learn more about this UI component in the API reference.

ColorPalette

ColorPalette is a UI widget for displaying dropdowns with a color palette. Learn more about this UI component in the API reference.

ContextToolbar

ContextToolbar is a UI widget for displaying context toolbars below a certain target element (HTML or SVG). Learn more about this UI component in the API reference.

Dialog

Dialog is a UI widget for displaying both modal and non-modal dialog boxes. Learn more about this UI component in the API reference.

FlashMessage

FlashMessage is a UI component for displaying flash messages. Learn more about this plugin in the API reference.

FreeTransform

FreeTransform creates a control panel above an element that allows resizing in any direction or rotation. Learn more about this UI component in the API reference.

HTMLSelectionFrameList

HTML frames around cells to be used with Selection. Learn more about this UI component in the API reference.

Halo

Halo creates a control panel above an element with various tools. Learn more about this UI component in the API reference.

HighlighterSelectionFrameList

Cell highlighters to be used with Selection. Learn more about this UI component in the API reference.

Inspector

The plugin implements an editor and viewer of Cell model properties. Learn more about this UI component in the API reference.

Keyboard

Keyboard enables creating keyboard shortcuts in your JointJS+ application. Learn more about this UI component in the API reference.

Lightbox

Lightbox is a UI component for displaying images by filling the screen and dimming out the rest of the application. Learn more in the API reference.

Navigator

Navigator is a UI widget that displays a smaller view into a larger diagram. Learn more about Navigator in the API reference.

OverlaySelectionFrameList

Overlay frames around cells to be used with Selection. Learn more about this UI component in the API reference.

PaperScroller

The plugin implements scrolling, panning, zooming, centering and auto-resizing of Paper content. Learn more about PaperScroller in the API reference.

PathDrawer

PathDrawer allows users to draw <path> elements. Learn more about this UI component in the API reference.

PathEditor

PathEditor allows users to edit <path> elements via an editing overlay. Learn more about this UI component in the API reference.

PolygonalSelectionRegion

A tool for selecting polygonal regions. Learn more about this UI component in the API reference.

Popup

Popup is a UI component for displaying contextual information (or even other diagrams) below a certain target element (HTML or SVG). Learn more in the API reference.

RadioGroup

RadioGroup is a UI widget for displaying radio groups. Learn more about this UI component in the API reference.

RangeSelectionRegion

A tool for selecting range regions. Learn more about this UI component in the API reference.

RectangularSelectionRegion

A tool for selecting rectangular regions. Learn more about this UI component in the API reference.

SVGSelectionFrameList

SVG frames around cells to be used with Selection. Learn more about this UI component in the API reference.

SelectBox

SelectBox is a UI component for displaying dropdowns. Learn more about this UI component in the API reference.

SelectButtonGroup

SelectButtonGroup is a UI widget for displaying groups of buttons with both single and multi selection support. Learn more about this UI component in the API reference.

Selection

Selection enables the ability to select shapes on the paper. Learn more about this UI component in the API reference.

SelectionFrameList

Selection frames around cells to be used with Selection. Learn more about this UI component in the API reference.

SelectionRegion

A tool for selecting various regions. Learn more about this UI component in the API reference.

Snaplines

Snaplines aid users in aligning elements. Further information on this UI component is available in the API reference or the Learn section.

StackLayoutView

StackLayoutView is a component for interacting with a stack layout diagram. Learn more about this UI component in the API reference.

Stencil

The plugin implements a palette of JointJS Elements and allows you to drag them to a Paper. Learn more about this UI component in the API reference.

TextEditor

TextEditor is a powerful (rich-text) inline text editor that can be used on any SVG text element. Learn more about this UI component in the API reference.

Toolbar

The plugin implements an interactive toolbar component which can be populated with tools (Widget instances) that allow the user to interact with a JointJS diagram.

Tooltip

The Tooltip plugin displays information messages anywhere in your UI. Learn more about this UI component in the API reference.

TreeLayoutView

TreeLayoutView is a component for interacting with tree diagrams. Learn more about this UI component in the API reference.

Widget

The plugin implements a generic tool definition for the Toolbar component, which allows the user to interact with a JointJS diagram. Learn more in the API reference.

widgets

The namespace provides a built-in collection of tool definitions (Widget type definitions) for the Toolbar component, which allows the user to interact with a JointJS diagram.