[opensourcedex]

f-flow is a free, open source automation project written in TypeScript and released under MIT. It has 541 GitHub stars, 66 forks and 10 open issues, and was last pushed 9 days ago. On this registry it ranks #57 of 66 tracked projects in Automation, with 5 head-to-head comparisons available. It gained 8 stars over the last 30 tracked days.

What is f-flow?

Foblex Flow is an MIT-licensed, TypeScript, Angular-native node editor library for teams building production workflow builders, AI pipelines, and interactive diagram editors, and it is aimed at Angular developers who want drag, connection, selection, and zoom behaviour without adopting a separate state model.

What it is

Foblex Flow is a node editor library built specifically for Angular, published in TypeScript under the MIT licence. Rather than leaving the hard parts of a graph editor to the application, it ships drag logic, hit-testing, SVG connection paths, reassign, selection, zoom, and undo/redo as Angular-native building blocks. Most editors begin with f-flow, f-canvas, nodes, connectors, and connections, and richer editor features are added only when a product needs them. The library has been maintained full-time since 2022 and currently carries 530 stars, 63 forks, and 10 open issues.

The concrete problem it solves is the cost of hand-building editor interactions and of forcing a React-style state model into an Angular application. By default the graph records belong to the application; teams that want typed managed records with snapshots and undo/redo can opt in with withFlowState() or provideFFlow(withFlowState()). In both modes, validation, persistence, permissions, and domain logic remain application concerns. The package also treats AI coding agents as first-class users: it ships a version-matched guide at node_modules/@foblex/flow/AI.md, ng add writes workspace agent rules, and stable FFxxxx diagnostics give agents a concrete pass/fail signal.

Key capabilities

  • Editing primitives shipped out of the box: drag and drop for nodes and groups, drag, click, and keyboard connection creation, reassign, waypoints, resize, rotate, snap and alignment guides, and magnetic lines.
  • Navigation controls including pan, wheel, pinch, and double-click zoom, a minimap, auto-pan at edges, fit-to-screen, and configurable control schemes with Miro-like and draw.io-like presets.
  • Selection through click, marquee, multi-select, and select-all, with selection events that let the application decide what selection means.
  • Accessibility via ARIA semantics by default, plus an opt-in keyboard layer for spatial navigation, move, delete, and connection creation without a mouse, with screen-reader announcements and remappable keys.
  • Layout support through Dagre and ELK auto-layout packages, reflow-on-resize, and layer ordering.
  • Scale tooling including node virtualization and render caching, offered as optional modules rather than day-one requirements.
  • Custom nodes, connectors, and connections for domain-specific graph interfaces, with either app-owned graph records or typed FFlowState records carrying snapshots and undo/redo.

Who uses it and how

  • Commercial products in production, including Luware Nimbus, ProcessMIX, XpertAI, and EpicStaff.
  • Teams building workflow builders, AI low-code tools, call-flow editors, UML diagrams, and internal back-office tools with node-based interfaces.
  • Angular applications on 17.3 or newer running the current 19.x release line; applications on Angular 12 through 17.2 must check the Angular Version Compatibility guide and pin the matching Foblex Flow line before installing.
  • AI-assisted development workflows, where generated code is verified against the shipped AI.md guide and FFxxxx diagnostics instead of APIs inferred from other node editor libraries.

Getting started

Install the @foblex/flow package into an Angular application and begin with f-flow and f-canvas; ng add also writes workspace agent rules for coding assistants. Documentation, the AI setup guide, and the full curated LLM-readable reference live at flow.foblex.com.

How it compares

No comparable tools are named in the facts, so this project stands alone in this registry. The README does draw one boundary, stating that the API fits Angular applications rather than wrapping a React-style state model, and it warns against inferring Foblex-specific selectors and APIs from other node editor libraries.

When to use it — and when not to

A self-hoster must accept that graph records are owned by the application, so persistence, validation, permissions, and domain logic are all work the host team writes; there is no bundled storage or backend layer in the facts. Teams on Angular 12 through 17.2 should not install the current 19.x line without pinning a compatible release first, and anyone expecting a complete turnkey product rather than an editor toolkit should look elsewhere. The registry entry itself is small — 530 stars, 63 forks, and 10 open issues — so it suits teams comfortable depending on a focused library with a single maintainer history rather than a large community.

project readme (upstream, from github) — read inline

Foblex Flow Logo

NPM Release Build Status NPM Weekly Downloads GitHub Stars MIT License

Foblex Flow

The most adopted node editor library for Angular — for production workflow builders, AI pipelines, and interactive diagram editors.

Foblex Flow ships the hard parts of a production node editor — drag logic, hit-testing, SVG connection paths, reassign, selection, zoom, and undo/redo — as Angular-native building blocks. Begin with f-flow, f-canvas, nodes, and connections, then add richer editor features only when your product needs them. It powers production products such as Luware Nimbus, ProcessMIX, XpertAI, and EpicStaff.

Use it to create workflow builders, AI low-code tools, call-flow editors, UML diagrams, internal back-office tools, and other node-based interfaces. Start with app-owned graph records, or opt into managed records and undo/redo with withFlowState(); validation, persistence, permissions, and domain logic remain application concerns in both modes.

Foblex Flow — Angular node editor with draggable nodes and connections

Current 19.x releases target Angular 17.3+. If your app is on Angular 12-17.2, check the Angular Version Compatibility guide first and pin the matching Foblex Flow line before installing.

Built for AI Coding Agents

Foblex Flow treats AI coding agents as first-class users: the package ships a version-matched guide at node_modules/@foblex/flow/AI.md, ng add writes workspace agent rules, and stable FFxxxx diagnostics give agents a concrete pass/fail signal. Before generating code, verify Foblex-specific selectors and APIs against that guide or the linked official reference; do not infer APIs from other node editor libraries.

Choose the integration deliberately: classic mode keeps graph records in the application, while optional provideFFlow(withFlowState()) provides typed managed records and undo/redo for supported operations. Verify generated flows using the APIs and FFxxxx diagnostics described in the shipped guide.

AI setup guide · Full curated LLM-readable reference

Why Foblex Flow

  • The most adopted node editor library built for Angular, by npm weekly downloads — maintained full-time since 2022 and used in production commercial products.
  • 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 and virtualization are scaling tools, not day-one requirements.
  • Custom nodes, connectors, and connections for domain-specific graph UIs.
  • Choose the state boundary that fits your editor: app-owned records by default, or optional typed FFlowState records with snapshots and undo/redo.
  • Your app stays in control of validation rules, permissions, persistence, and business meaning in either state mode.
  • Suitable for both lightweight diagrams and full workflow-builder products.

Feature Overview

Area What ships out of the box
Editing Drag & drop nodes and groups, drag/click/keyboard connection creation, reassign, waypoints, resize, rotate, snap & alignment guides, magnetic lines
Navigation Pan, wheel/pinch/double-click zoom, minimap, auto-pan at edges, fit-to-screen, configurable control schemes (Miro-like, draw.io-like presets)
Selection Click, marquee, multi-select, select-all, selection events — your app decides what selection means
Accessibility ARIA semantics by default; opt-in keyboard layer: spatial navigation, move, delete, and connection creation without a mouse, screen-reader announcements, remappable keys
Layout Dagre and ELK auto-layout packages, reflow-on-resize, layer ordering
Scale Node virtualization, render caching, background workers — optional, for large scenes
Customization Fully templated nodes/connections/connectors, themable via CSS tokens/SCSS mixins, custom markers, connection gradients and labels
Integration Classic event-driven API with app-owned records, or optional withFlowState() managed records, snapshots, and undo/redo; SSR-safe, zoneless-ready
AI tooling llms.txt, bundled AI.md, ng add writes agent rules, dev diagnostics with stable FFxxxx error codes

Comparing options? Read the honest comparisons: React Flow vs Foblex Flow for Angular teams and ngx-vflow vs Foblex Flow.

Choose Your State Integration

The default classic mode renders arrays or signals owned by your application. Foblex Flow emits final interaction events such as fCreateConnection and fMoveNodes; your handlers validate them and update application state.

The optional managed mode installs provideFFlow(withFlowState()). Its typed FFlowState records apply supported gestures automatically and provide batching, snapshots, undo, and redo. Your application still defines domain fields and decides how records are validated and persisted.

Managed Flow State guide · Live state example

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.
  • Schema Designer - A richer schema editor demo with nodes, relations, and CRUD-style interactions.
  • 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.

Try It Online

No local setup needed — the minimal starter runs in the browser:

Open in StackBlitz

Install

These install commands are for the current 19.x line. For Angular 12-17.2 apps, use the Angular Version Compatibility guide first so you do not accidentally install a newer incompatible line.

ng add @foblex/flow

For Nx workspaces:

nx g @foblex/flow:add

ng add installs the required companion packages automatically. If you prefer manual installation, install them explicitly:

npm install @foblex/flow @foblex/platform@^1.0.4 @foblex/mediator@^1.1.3 @foblex/2d@^1.2.2 @foblex/utils@^1.1.1

ng add also wires the shipped default theme into application styles by adding node_modules/@foblex/flow/styles/default.scss when the entry is missing.

Default Theme

Use the default theme when you want styled nodes, connectors, connections, minimap, selection area, and helper plugins immediately.

"styles": [
  "src/styles.scss",
  "node_modules/@foblex/flow/styles/default.scss"
]

If you prefer selective SCSS mixins instead of one full entrypoint:

@use '@foblex/flow/styles' as flow-theme;

@include flow-theme.theme-tokens();
@include flow-theme.flow-canvas();
@include flow-theme.node-group();
@include flow-theme.connector();
@include flow-theme.connection-all();
@include flow-theme.plugins();

Full guide: Default Theme and Styling

Minimal Example

<f-flow fDraggable>
  <f-canvas>
    <f-connection fSourceId="a-out" fTargetId="b-in"></f-connection>

    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }">
      Drag me
      <div fConnector fConnectorType="source" fConnectorId="a-out"></div>
    </div>

    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }">
      Drag me too
      <div fConnector fConnectorType="target" fConnectorId="b-in"></div>
    </div>
  </f-canvas>
</f-flow>

That is the rendering mental model: f-flow hosts the editor, f-canvas pans and zooms, any element becomes a node with fNode, and fConnector endpoints attach connections. State management and every advanced feature remain explicit choices.

Quick FAQ

  • Is Foblex Flow hard to use? No. The core setup is small and Angular-native.
  • Do I need caching or virtualization? 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

For AI Agents and LLMs

  • llms.txt — docs index for agents; llms-full.txt — full curated LLM-readable reference
  • AI usage guide — strict code-generation rules, shipped inside the npm package at node_modules/@foblex/flow/AI.md

Custom Development and Consulting

Need a custom Angular node editor, workflow builder, or interactive diagram?

The Foblex team offers consulting, custom development, and integration support. Whether you need a production-ready editor built from scratch or hands-on help integrating Foblex Flow into your product, we bring deep Angular and node-based UI expertise to every engagement.

  • Custom node editors and workflow builders
  • Architecture review and integration planning
  • Migration from other frameworks to Foblex Flow
  • Priority support and dedicated development

Learn more | Contact us: support@foblex.com

Community and Support

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

Frequently asked questions

Is f-flow free to use?

f-flow is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does f-flow do?

Angular-native node editor library for production workflow builders, AI pipelines, and interactive diagram editors. MIT licensed.

What is f-flow written in?

f-flow is primarily written in TypeScript. Its source is publicly available at https://github.com/Foblex/f-flow, and it has 541 GitHub stars.