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