Skip to main content
Demonstration:
< Back to demo list

Nested Groups

The source code for this application - and several others - is available on Github here. If you haven't got a license for the Toolkit, we offer 30 day evaluations.

Nested Groups

The Toolkit has comprehensive support for groups, which can be nested to an arbitrary level. When groups are collapsed any edges to/from children of the group are relocated to the group. You can collapse and expand groups in this demo with the `-` and `+` buttons.

Group 1 in this demo has `autoSize` switched on, and will resize when new nodes are dropped into the group, or nodes are deleted or dragged out.

Group 2 has `constrain` set, meaning that child nodes cannot be dragged outside of its bounds.

Elastic Groups

The headless group in this app is an elastic group, which is a type of group that is available from 6.10.0 onwards. When you drag a child node around in an elastic group, the group will resize to always encompass its child nodes (while still respecting any minSize or maxSize you may have set). If you want to drag a node out of an elastic group, hold down the Shift key while dragging.

By default, an elastic group will resize from any edge. This can be switched off programmatically via setting `allowResizeFromOrigin:false` on a group definition, and you can also switch it off on an ad-hoc basis by holding down the Ctrl or Meta key while dragging (on a Mac the Meta key is the Command key).

Further reading

Read about this demo itself in our docs: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-groups

Read about groups in detail here:https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/groups

Fork me on Github
Flowchart Builder
Flowchart builder application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2, Vue 3, React and Svelte versions available.
Schema Builder
Database schema builder application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2, Vue 3 and React versions available.
Chatbot Builder
Chatbot builder application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Use the Toolkit to build a chatbot flow, with actions, messages, input and choices. Angular, Vue 2, Vue 3, React and Svelte versions available.
Org chart
Org chart application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
The Toolkit makes it simple to build interactive org charts. This starter app uses the classic org chart layout and provides an inspector from which the user can navigate around. Angular, Vue 2, Vue 3 and React versions available.
Mindmap Builder
Mindmap builder application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Simple mindmap builder, highlighting several advanced features the Toolkit offers, such as custom layouts, parsers and exporters
Nested Groups
Element grouping demonstration - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Learn about how the Toolkit lets you work with groups nested to an arbitrary level, with full drag and drop support.
Path Tracing
Path tracing demonstration - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Leverage the Toolkit's underlying Directed Graph to visualize paths between elements.
Hello World
Hello world demonstration - jsPlumb Toolkit, leading alternative to JointJS and GoJS
This app is designed to give you a basic starter app from which you can build your own, without any of the bells and whistles included in our other starter apps.
Image Processor
Image processor application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Fully featured image processor using HTML canvas for you to use as a base for your own apps. Angular, Vue 2, Vue 3, React and Svelte versions available.
Neighbourhood Views

Neighbour views dynamic selections demonstration - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Use popups and the Toolkit's ability to dynamically render selections to provide neighbourhood contextual information for some selected element
Active Filtering

Active filtering demonstration - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Filter drag targets as your users start to drag new connections using the ActiveFiltering plugin.
Segmented Connectors

CAD Drawing tools demonstration - jsPlumb Toolkit, leading alternative to GoJS and JointJS

An adaptable connector that consists of a series of segments, with the option to smooth to a set of Bezier splines
Hierarchy Layout

Org chart layout demonstration - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

The classic organization chart layout, with support for horizontal/vertical axis and a number of different alignment options
Layouts

Force directed layout demonstration, org chart layout demonstration - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

A playground for testing the various layouts that the Toolkit offers - Hierarchy, Force Directed, Circular, Balloon and more.
Collapsible Hierarchy

Collapsible hierarchy Italic language family demonstration - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Use the Toolkit's ability to render a dynamically collapsible and expandable hierarchy.