joint.ui.ColorPalette

Invalid option + placeholder

inside a target element with a scrollbar

joint.ui.ContextToolbar

joint.ui.Toolbar

toolbar demo 1

100 %
S
U
I
B
Arial

toolbar demo 2

toolbar demo with groups

joint.ui.Dialog

Open Yes/No Dialog
Open Dialog with an embedded video
Draggable Dialog
Dialog with a diagram
Dialog with buttons left and right
Dialog with no title and no buttons
Alert Dialog
No Modal Dialog

Inlined dialogs

joint.ui.FlashMessage

Title for info flash message
A sample flash message with important information.
Title for alert flash message
A sample flash message with important information.
Title for warning flash message
A sample flash message with important information.
Title for success flash message
A sample flash message with important information.
Title for neutral flash message
A sample flash message with important information.

joint.ui.FreeTransform

-

joint.ui.Halo

pie
surrounding
toolbar

joint.ui.Inspector

Presentation

1px
S
U
I
B
S
U
I
B

Text

Courier New

Labels

data

joint.ui.Lightbox

Click the image to reveal the lightbox.

joint.ui.Navigator

-

joint.ui.PaperScroller

RectCircle

joint.ui.PathDrawer

joint.ui.PathEditor

joint.ui.Popup

Popup content goes here.

joint.ui.SelectBox

Margin 20px

Selectbox with icons

ui.Dialog

Invalid option selected

My City

disabled = true

London

openPolicy = coverAbove

Amsterdam

openPolicy = above

Amsterdam

openPolicy = below

Amsterdam

openPolicy = coverBelow

Amsterdam

openPolicy = selected

Amsterdam

openPolicy = auto

Amsterdam

joint.ui.SelectButtonGroup

S
U
I
B

disabled

S
U
I
B

iconSelected: center

multiline: line

joint.ui.Selection

Click and drag to select elements.

--
2 elements selected.

joint.ui.Snaplines

Drag an element near another element to reveal the snaplines.

--

joint.ui.Stencil

Stencil with groups

Simple

Text

Text

Advanced

Plain Stencil

Text

Stencil with groups and group layouts

Simple

Text

Text

Advanced

joint.ui.Tooltip

Manual top directed tooltip.
Manual left directed tooltip.
Manual right directed tooltip.
Manual bottom directed tooltip.
html tooltip

joint.ui.TreeLayoutView

azbcydxdyeyfxfghyiy
default
modern
dark
material
-