README.md

July 5, 2026 · View on GitHub

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

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