VisuallyJs

VisuallyJs is a powerful, flexible library for building interactive node-based applications, diagrams, and real-time dashboards using modern web standards. It allows developers to create complex visual interfaces—from flowcharts and BPMN editors to cloud infrastructure maps—integrated seamlessly with data visualizations.

🚀 Key Features

• Unified Data Model: Power diagrams and charts from the same underlying data. Any interaction on the canvas (like moving a node or changing a connection) can immediately update connected charts.
• React Integration: First-class support for React with a suite of canvas and chart components, plus several providers to allow you to easily access the model from your own components.
• Angular Integration: First-class support for Angular with a suite of canvas and chart components and an injectable service underpinning it all.
• Vue Integration: First-class support for Vue 3.x with a suite of canvas and chart components, plus an injectable service with providers.
• Svelte Integration: First-class support for Svelte 5 with a suite of canvas and chart components, and providers to allow access to the model from your own code
• Standards-Based: Built using SVG for high-performance diagrams/charts and HTML for rich, interactive content within nodes.
• Extensible Architecture: Create custom connectors, shapes, layouts, and chart types to fit your specific domain needs.
• BPMN: Comprehensive BPMN shape library plus a ready-to-ship starter BPMN app.
• Built-in Layouts: A range of layouts such as force directed, balloon, hierarchical, which are deeply integrated into the rest of the code
• Themeable: Fully customizable via CSS, allowing you to match your application's design system perfectly.

VisuallyJs has a lot more features - we'd encourage you to take a look at the demonstrations here: https://visuallyjs.com/demonstrations), or browse through the docs here: https://visuallyjs.com/docs.

🛠 What can you build?

1. Node-based Applications

Build complex interactive UIs like Schema Builders, Process Optimizers, or Visual Programming interfaces where nodes contain rich components.

2. Diagrams

Create professional diagrams with built-in support for Flowcharts, BPMN, and custom shape sets. Use automatic layouts to keep your visual data organized.

3. Real-time Charts

Integrate Bar, Column, Sankey, Treemap, Pie, Donut charts and more that react instantly to changes in your diagram's model.

4. Interactive Dashboards

Combine all the above into a single pane of glass. For example, a "Smart Manufacturing" dashboard where clicking a machine node on a factory floor diagram updates its performance metrics in an adjacent chart.

📦 Installation

VisuallyJs is available in the public NPM repository. It is watermarked and intended for evaluation use and for any projects which meet our criteria for non-commercial usage.

React

See the quickstart guide here: https://visuallyjs.com/react/docs/quickstart

npm install @visuallyjs/browser-ui-react

Angular

See the quickstart guide here: https://visuallyjs.com/angular/docs/quickstart

npm install @visuallyjs/browser-ui-angular

Vue

See the quickstart guide here: https://visuallyjs.com/vue/docs/quickstart

npm install @visuallyjs/browser-ui-vue

Svelte

See the quickstart guide here: https://visuallyjs.com/svelte/docs/quickstart

npm install @visuallyjs/browser-ui-svelte

Vanilla (Javascript/Typescript)

See the quickstart guide here: https://visuallyjs.com/vanilla/docs/quickstart

npm install @visuallyjs/browser-ui

License

Key points:

• VisuallyJs is commercial software. All commercial use requires a license.
• VisuallyJs is free to use for non-commercial usage. The definition of non-commercial usage is set forth in our license agreement (linked below), and the assessment thereof is at the sole discretion of JsPlumb Pty Ltd.

Please see the full license agreement for details: https://visuallyjs.com/license