Features
VisuallyJs has an extensive feature set to allow you to rapidly build diagrams, charts, node-based UIs with rich graphical content and dashboards.
Library Integrations
Angular
All versions of Angular from 18+
React
All versions of React from 16+
Vue
Vue 3 Integration
Svelte
Svelte 5 Integration
Components
Surface
Infinite panning, smooth as butter zoom
Node palette
Drag/drop new nodes and groups
Shape Libraries
Render your nodes as SVG shapes
Controls
Zoom to fit, undo/redo etc
Dialogs
Data-bound dialogs for editing
Inspector
Data-bound inspector for editing
Element Dragger
Make external elements draggable
CSS
Fully customizable via CSS
Plugins
Miniview
A miniaturized view of your canvas. Pan/zoom via the miniview, and click to scroll
Lasso
Snag a set of nodes and add them to the model's current selection.
Resize Tools
Grow, shrink and rotate vertices, either with visible handles or via the vertex edges
Backgrounds
Grids - with dots or lines - and tiled or static images
Controls
Buttons for common operations such as zoom to extents, undo/redo, etc
Edge Crossings
Mark the intersection of two edges with a bridge or a dot
Drawing
Draw new nodes/groups by dragging the mouse
Snaplines
Visual cues to help align everything just so
Value Propagation
Automatically propagate values through the graph with a declarative API
Pan Buttons
Click to nudge the canvas, or hold to scroll
Scrolling Lists
Automatically park edges on their container when the source/target element is scrolled out of view
and many more...
Layouts
Layouts
Force Directed, Hierarchy, Balloon, Circular, or write your own
Custom Layouts
Writing your own layout is a snap
Magnetizer
Easily avoid overlapping nodes
Data Model
Graph Operations
Interact deeply with your data model
Undo & Redo
On every model operation
Transactions
Batch multiple operations
Paths
Show/animate paths between elements
Selections
Operate on parts of the dataset in isolation
Full text search
Inverted text search index
Copy & paste
Copy/paste nodes, groups and edges