Library Integrations

Angular
Use rich Angular components to represent the nodes/groups in your UI and our underlying service to wire everything up

React
Seamlessly integrate the Toolkit into a React app, with both components based and hooks based approaches supported.

Vue
Leverage the power of the Toolkit's tight integration with Vue 2 and Vue 3

Svelte
Embed the Toolkit into a Svelte app with no fuss using our deep integration

Layouts

Standard Layouts
Force directed, Hierarchy, Balloon, Circular and Absolute positioning layouts are provided out of the box.

Custom Layouts
The Toolkit makes it a snap to create your own layout, should one of our standard layouts not suffice for your use case.

Magnetizer
The built-in magnetizer lets you make small adjustments to your UI to achieve the perfect layout.

Components

Surface
The Surface is the heart of the Toolkit's UI, offering an infinitely pannable canvas with the smoothest zoom for miles around.

Miniview
Attach a miniview to a surface and see your world in miniature. Pan and zoom directly on the miniview component to control the surface.

Node palette
Drag and drop new nodes/groups onto your canvas with the SurfaceDropManager

Controls
Manage surface mode (pan/lasso), undo/redo, zoom to extents from the Controls component.

Dialogs
Straightforward and easily skinned dialog manager, with tight data binding to your model.

Inspector
Property inspector component for the objects in your model. Supports inspecting multiple objects of disparate types at once.

Element Dragger
A helper class that you can use to turn any part of your UI external to the canvas into a draggable element

Data Model

Graph operations
A full set of operations on the underlying graph let you query and manipulate your dataset with ease

Undo & Redo
Limitless stack of operations allowing your users to undo and redo to their hearts content.

Transactions
Wrap multiple operations in a transaction and undo/redo them all in one atomic operation

Paths
Query the Toolkit to find paths between elements and then animate them

Selections
Select a set of nodes, groups and/or edges and perform operations on them at once. Or, use a selection as the data source for a Surface.

Full text search
Attach a text search index to your Toolkit instance and run queries over the contents of the dataset

Copy & paste
Easily copy nodes, groups and/or edges to the clipboard and paste them elsewhere in your UI

Drawing

Shape Libraries
Choose from our Basic or Flowchart shape libraries to render the nodes in your UI, or create your own!

Resize Objects
The DrawingTools plugin allows you to select and resize objects using the mouse or touch events.

Lasso
The Lasso plugin allows you to select multiple elements via the mouse or touch events.

Path editing
Click and drag to manually edit the paths of connectors with a powerful and intuitive interface

Snaplines
Display visual cues to help your users align their elements