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.
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
- 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.
| 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.
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
- 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
- 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.
No local setup needed — the minimal starter runs in the browser:
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/flowFor Nx workspaces:
nx g @foblex/flow:addng 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.1ng add also wires the shipped default theme into application styles by adding node_modules/@foblex/flow/styles/default.scss when the entry is missing.
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
<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.
- 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.
- Get Started
- Angular Version Compatibility
- Managed Flow State
- Large Flow Performance
- Shadow DOM and Angular Elements
- Migrating to Unified Connectors
- Documentation
- Examples
- Articles
- Showcase
- Roadmap
- Changelog
- 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
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: [email protected]
For questions or partnership inquiries: [email protected]
Foblex Flow is available under the MIT License.
If Foblex Flow is useful in your product, give the repository a star:
