Skip to main content

UI Terminology

Basic parts of the UI - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Each object in your data model has a corresponding object in the UI: nodes, groups, ports and edges are all mapped to a visual representation (and, optionally, behaviour) via a view.

Surface​

The surface component is the heart of the Toolkit's UI, offering pan/zoom, layouts, clamping movement, plugins, backgrounds, and a whole lot more. Whenever you render the contents of a Toolkit a surface is created. The options for the surface component are discussed in detail on this page.

Miniview​

A miniview is a small window displaying the structure of the UI, which is independently pannable and zoomable, and which controls the viewport of its related surface. Miniviews are discussed in detail on this page.

Controls​

The controls component shown in the screenshot above is a helper component that ships with JsPlumb, offering access to a few common actions on a surface - setting the mode, zooming to fit the content, undo/redo etc. You may or may not wish to use it in your own apps.

Node palette​

JsPlumb offers comprehensive support for dragging new nodes/groups onto your canvas. We refer to "node palettes" and also "drop managers". You can write out arbitrary HTML into some element and then instruct JsPlumb to configure it as a source of draggable new elements. More information on this can be found on this page.

Group​

In the UI, groups are represented via HTML/SVG templates, or, if you are using a library integration such as Angular, React, Vue or Svelte, by a component from your library, and are mapped from the group type to a visual representation by a view. Child objects of groups are drawn directly into the group's element, or you can use an HTML attribute to define a "content area" demarcating a zone inside the group element where child objects can be placed. In the picture above, which is from our Groups demo, the group element has a title bar, and the bottom section is marked as the content area. How to render groups and define their behaviour is discussed in our groups documentation.

Node​

Nodes are represented via HTML/SVG templates, or, if you are using a library integration such as Angular, React, Vue or Svelte, by a component from your library, and are mapped from the node type to a visual representation by a view.

Anchors​

An anchor models the notion of where on an element a connector should connect - it defines the location of one end of a connection. It is a key UI concept, and is discussed in detail on this page. Anchors can be specified in a few places, but the most common place you'll specify anchors is inside an edge, node, group or port definition in a view.

Endpoints​

An endpoint models the appearance and behaviour of one end of an edge; it delegates its location to an underlying anchor. The Toolkit ships with a few endpoint types - including a blank endpoint. Read all about endpoints here.

Connectors​

Connectors are the lines that actually join elements of the UI. They are the visual representation of edges. JsPlumb ships with several different connector types and it is also possible to write your own. Connectors are covered in detail on this page.

Overlays​

Overlays are adornments to connectors - such things as arrows at the end of a line, or a label, etc. It is also possible to write your own overlays or to use arbitrary HTML as on overlay. Read about overlays on this page.