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 15+, 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/flow

Minimal 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.

• 🌐 Documentation Portal
• 🗣 GitHub Discussions
• 🐞 Issue Tracker

Questions, suggestions or bugs? Contact support@foblex.com

Foblex Flow is MIT licensed — free to use and open for contribution.

If Foblex Flow has helped you build something awesome — consider giving it a ⭐️ on GitHub:
https://github.com/foblex/flow

It helps the project reach more people, keeps development going, and motivates future improvements.