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.

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.

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 and virtualization 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.

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	Event-driven API (fCreateConnection, fMoveNodes, fDeleteSelected, …) — the library never mutates your data; SSR-safe, zoneless-ready
AI tooling	llms.txt, bundled AI.md, ng add writes agent rules, dev diagnostics with stable FFxxxx error codes

Coming from React Flow? Read the honest comparison: React Flow vs Foblex Flow for Angular teams.

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:

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 whole mental model: f-flow hosts the editor, f-canvas pans and zooms, any element becomes a node with fNode, connectors attach edges. Everything below is opt-in.

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

• Get Started
• Angular Version Compatibility
• Documentation
• Examples
• Articles
• Showcase
• Roadmap
• Changelog

For AI Agents and LLMs

• llms.txt — docs index for agents; llms-full.txt — complete LLM-readable API 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

• 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