@foblex/flow

v19.1.6

Published

25 days ago

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

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

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

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.
Call Center Flow - A workflow-builder reference app for IVR routing, queueing, operator handoff, transfer, voicemail, and embedded node forms.
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 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 — complete LLM-readable API reference
AI usage guide — strict code-generation rules, also shipped inside this package at node_modules/@foblex/flow/AI.md

Community and Support

For questions or partnership inquiries: [email protected]

License

Foblex Flow is available under the MIT License.