Foblex Flow is a modern Angular library for building interactive flow-based UIs, including visual editors, diagrams, and automation tools.
It provides a robust, fully Angular-native foundation to create, customize, and manage dynamic node-based structures — with full support for SSR, Standalone Components, and zoneless mode.
🔧 Ideal for internal tools, low-code platforms, process editors, call flows, and custom visual builders.
- 🧩 Dynamic Node & Connection Creation — Create, connect, and manage nodes in real-time
- 🔄 Reassignable Connections — Drag to reconnect inputs and outputs
- 🧠 Event-driven architecture — React to user interaction via clean APIs
- 🎨 Customizable Templates — Use your own components for nodes and connections
- 🖱 Drag, Zoom, Pan — Smooth canvas navigation for large graphs
- ⚙️ SSR + Angular Compatibility — Works with Angular 12+, SSR, Standalone Components, and Composition API
Check out real-world use cases built with Foblex Flow:
-
🟢 Call Center - A streamlined flow example simulating a call flow.
-
🧱 Scheme Editor - A more advanced example of a fully interactive scheme editor.
-
💡 Visual Programming - An example of a visual programming flow.
-
🗄 DB Management - An example of a database management flow.
Install via Angular CLI:
ng add @foblex/flowMinimal usage example:
<f-flow fDraggable>
<f-canvas>
<f-connection fOutputId="output1" fInputId="input1"></f-connection>
<div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right"> Drag me</div>
<div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fInputConnectableSide="left"> Drag me</div>
</f-canvas>
</f-flow>📘 Full documentation: https://flow.foblex.com/docs/get-started
We have a detailed roadmap for the development of Foblex Flow. Check out the Roadmap to see the upcoming features and milestones.
Questions, suggestions or bugs? Contact support@foblex.com
Foblex Flow is MIT licensed — free to use and open for contribution.