Foblex Flow

Angular-native node-based UI library for building node editors, workflow builders, and interactive graph interfaces.

Foblex Flow gives Angular teams a simple way to start building graph-based products without adopting a React-first mental model. Begin with f-flow, f-canvas, nodes, and connections, then add richer editor features only when your product needs them.

Use it to create workflow builders, AI low-code tools, call-flow editors, UML diagrams, internal back-office tools, and other node-based interfaces while keeping your own state, validation, persistence, and domain logic.

It works with Angular 15+, SSR, standalone components, and zoneless-friendly application setups.

Why Foblex Flow

• Easy starting path: most editors begin with f-flow, f-canvas, nodes, connectors, and connections.
• Angular-first API that fits Angular apps instead of wrapping a React-style state model.
• Built for real editor interactions: drag to connect, drag to reassign, selection, zoom, minimap, snapping, alignment helpers, and waypoints.
• Advanced modules are optional: caching, virtualization, and the connection worker are scaling tools, not day-one requirements.
• Custom nodes, connectors, and connections for domain-specific graph UIs.
• Your app stays in control of graph state, validation rules, permissions, and persistence.
• Suitable for both lightweight diagrams and full workflow-builder products.

What You Can Build

• Angular node editors
• Angular workflow builders
• AI low-code and internal tools
• Call flows, automation editors, and pipeline UIs
• UML, architecture, and other interactive diagram interfaces

Examples

• AI Low-Code Platform - A flagship front-end-only AI low-code IDE demo with custom nodes, JSON import/export, multiple themes, config panels with validation, validation feedback on nodes, undo/redo, persistence, multi-select, and animated connections.
• DB Management - A database-oriented workflow builder with richer interactions and UI patterns.
• UML Diagram - An Angular example for architecture and UML-style graph interfaces.
• Tournament Bracket - A specialized bracket UI built on the same node-based primitives.
• All Examples - Focused examples for connections, selection, minimap, layout, alignment, and other editor features.

Install

ng add @foblex/flow

If you prefer manual installation:

npm install @foblex/flow

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

Quick FAQ

• Is Foblex Flow hard to use? No. The core setup is small and Angular-native.
• Do I need caching, virtualization, or the connection worker? No. Most editors do not need them on day one. They are optional scaling tools for larger scenes.
• Who is it for? Angular teams building node editors, workflow builders, interactive diagrams, and other graph-based product UIs.

Resources

• Get Started
• Documentation
• Examples
• Articles
• Showcase
• Roadmap
• Changelog

Community and Support

• GitHub Repository
• GitHub Discussions
• Issue Tracker
• Documentation Portal

For questions or partnership inquiries: support@foblex.com

License

Foblex Flow is available under the MIT License.

Support the Project

If Foblex Flow is useful in your product, give the repository a star:

https://github.com/Foblex/f-flow