Build a production-grade HMI/SCADA visualization layer with the most flexible and extensible diagram library
Custom industrial symbols, live state rendering, and real-time data binding — everything your HMI/SCADA product needs, without building it from scratch.
VisuallyJs offers a fully featured SCADA/HMI console as a starter app for React, Angular, Vue or Svelte, with out of the box support for instrumentation, fluid handling and heating/cooling shapes, advanced inspection functionality, and a simple API for adding your own shapes.
Get the code
Grab the source code from Github and start working on your new app right now.
- React
- Angular
- Vue
- Svelte
npx degit [email protected]:visuallyjs-react/scada-hmi scada-hmi
npx degit [email protected]:visuallyjs-angular/scada-hmi scada-hmi
npx degit [email protected]:visuallyjs-vue/scada-hmi scada-hmi
npx degit [email protected]:visuallyjs-svelte/scada-hmi scada-hmi
Who builds industrial automation UIs with VisuallyJs
Any product for monitoring and controlling industrial processes is a diagramming app at its core. VisuallyJs is what ISVs and integrators choose for a visualization layer that's embedded, branded, and production-ready.
Operator interfaces
Graphical control panels where operators monitor equipment, respond to alarms, and issue commands in real time. VisuallyJs handles custom industrial symbols (pumps, valves, motors, sensors) with live state rendering across hundreds of elements per screen.
Customer-facing monitoring dashboards
Dashboards embedded in IIoT platforms and industrial SaaS, where device topology, sensor readings, and alerts are visualized as an interactive diagram that updates live as telemetry arrives. VisuallyJs handles high element density and drill-down without performance loss.
Digital twin interfaces
Visual twins of physical assets: floor plans, pipeline networks, building systems with per-zone drill-down. The diagram mirrors real-world state as telemetry arrives, with full control over rendering, custom shapes, and animated transitions.
Engineering configuration tools
Offline authoring for plant designers and control engineers building P&ID drawings, process layouts, and asset hierarchies before go-live. VisuallyJs provides custom symbol libraries, snapping, layer management, and reliable undo/redo.
What VisuallyJs gives you out of the box
Domain-specific custom symbols
Every industrial domain has its own notation, from ISA-5.1 to P&ID to IEC 60617. VisuallyJs lets you build custom shapes for any symbol set and reuse them everywhere.
SVG drawing import
Many teams have existing SVG or CAD-exported drawings they want to bring into the canvas. VisuallyJs renders SVG natively, so existing assets become interactive elements without redrawing them from scratch.
Live data binding
Bind elements to your data layer so sensor updates re-render color, label, icon, or animation without rebuilding the canvas. The visualization always reflects live process state.
Real-time alarm and state visualization
Attach live state to elements and connections, animate data flow, and surface critical conditions, no separate alerting layer needed.
Extensive plugin library
Accelerate development with 15+ pre-built plugins for common HMI/SCADA needs: miniviews, snaplines, undo/redo, automatic edge routing, and more.
Interactive element controls
Operators need to do more than observe. VisuallyJs supports click-to-drill-down, contextual control panels per element, and custom interaction logic, built directly into the diagram.
Framework-agnostic
VisuallyJs works with React, Angular, Vue, Svelte and TypeScript. Integrates cleanly into your existing application architecture without constraints - but offers a range of tightly integrated components to help you build professional applications for your target library with ease.
Start building your HMI/SCADA visualization layer today
The VisuallyJs SCADA demo gives you a working starting point with custom industrial symbols, live data binding, and a clean extensible architecture. Talk to us today and have a working app in days.