The hard parts are already built
Drag logic, hit-testing, SVG connection paths, reassign, selection, zoom, snapping, undo/redo — the editor plumbing you would otherwise write and maintain yourself.
Foblex Flow Built for AI coding agents
The most adopted node editor for Angular.
Stop hand-rolling drag logic, hit-testing, and SVG connection paths. Foblex Flow ships production editor interactions — connect, select, zoom, keyboard editing, undo/redo — as Angular-native building blocks.
512stars37Kweekly installsv19.1.6MIT
$
ng add @foblex/flowWhy Foblex Flow
Built for real editors. Proven in real products.
Angular-native, not a wrapper
Templates, forms, validators, and services stay in Angular. No React runtime, no framework bridge, no second mental model.
Accessibility as a feature, not a checkbox
ARIA semantics are always on; withA11y() adds keyboard navigation, node movement, and connection creation without a mouse — for products that must pass WCAG and EAA audits.
AI-assisted development
Your coding agent already knows Foblex Flow.
Foblex Flow treats coding agents as first-class users: the package ships a version-matched guide, ng add wires workspace rules, and stable FFxxxx diagnostics give agents a concrete pass/fail signal for every generated flow.
Version-matched package guide
The installed package includes
node_modules/@foblex/flow/AI.mdwith verified APIs, patterns, and common failure checks for that version.Workspace rules from
ng addng add @foblex/flowwrites a managed Foblex Flow section intoAGENTS.mdand wires the Claude Code import inCLAUDE.md— every agent reads the same canonical rules.LLM-readable documentation
Hosted llms.txt and llms-full.txt expose the docs for retrieval, with Foblex Flow on Context7.
Concrete runtime verification
Stable
FFxxxxdiagnostics identify setup errors. AfterfFullRendered, comparegetState()with the expected graph and fail on diagnostics such as unresolved endpointFF1001.
Features
What Foblex Flow gives you out of the box.
Auto layout
Dagre and ELK engines arrange nodes and connections with a single call.
Auto-pan
Opt-in plugin that keeps the dragged node in view while the canvas follows.
Projected gradients
Smooth color transitions along connections, projected in screen space.
Minimap
Always-on-screen overview with click-to-jump navigation on large graphs.
Snapping & guides
Snap-to-grid, alignment guides, and magnetic lines while dragging.
Signals-first API
Reactive inputs, outputs, and lifecycle built on Angular signals — no zone tricks.
Production
Teams building with Foblex Flow
From contact-center platforms to AI agent orchestration — Angular apps shipping with Foblex Flow today.
AI
Agents Platform (XpertAI)
An Multi agents and data analysis platform for enterprises to make business decisions.
View →
AI
Multi Agent AI Orchestration (EpicStaff)
Open-source platform designed to build and orchestrate multi-agent AI systems. It combines a visual workflow builder with full developer control.
View →
Workflow Automation
ProcessMIX
Low-code decision automation platform with a visual rules and workflow builder for designing, testing, and deploying processes rapidly.
View →
Contact Center
Luware Nimbus
Cloud-based SaaS contact-center solution built natively for Microsoft Teams. It unifies internal helpdesks, branch offices and global contact centres into one intelligent hub, enabling omni-channel communication (voice, chat, email, tasks) and routing to the right agents based on skills, priority or context.
View →Reference apps
What you can build
Four full-source reference apps ship with Foblex Flow. Open them live, read the code, and steal patterns for your own editor.
AI Low-Code Platform
Front-end-only AI low-code IDE with custom nodes, JSON import/export, right-side config panels, validation reflected on nodes, undo/redo, persistence, and animated connections.
Open the example →
Schema Designer
Interactive schema modeler with table nodes, inline column editing, relation toolbars, context menus, selection area, and minimap.
Open the example →
Call Center Flow
Call-center flow builder with IVR branches, schedule checks, queueing, operator handoff, transfer, voicemail, palette-driven node creation, and minimap navigation.
Open the example →
UML Diagram
Layered UML surface with package groups, relation filters, search, custom markers, details panel, and viewport controls.
Open the example →Shipped recently
A steady release cadence, with breaking changes kept to a minimum.
v19.1.0July 2026
Managed Flow State with batched undo and redo, faster rendering for large flows, and interaction support inside Angular Elements and open Shadow DOM.
Read release notes →v19.0.0July 2026
Control schemes, click-to-connect, keyboard accessibility, a unified connector model, and an AI-ready integration toolchain.
Read release notes →v18.6.0April 2026
Smart Auto-Layout on Resize: when a node grows or shrinks, the surrounding nodes shift automatically along configurable mode, scope, axis, and collision rules.
Read release notes →The team
Maintained full-time since 2022.
Foblex Flow is built and led by its founder, working on it full-time, with a small core team and community contributors. Predictable releases, strict SemVer, an open roadmap — and support answered by the people who wrote the code.
SH
Siarhei H.
Founder · Lead engineer
MW
Mark K.
Engineer
SK
Siarhei Kh.
Engineer · DX
Our contributors
Community engineers who have shipped code into Foblex Flow.
yaroslavyushchenko
lukaszgawrys
crystian
baloghbence0915
nook24
EdwardPaseniukHYS
relliv
fouad-j
tiven-w
msibhuiyan
Foblex Flow is the most widely adopted node editor library for Angular, measured by npm downloads. It is Angular-native — built from the ground up on Angular primitives, not a React wrapper — and is used for workflow builder UIs, AI pipelines, and interactive diagram editors, in production at Luware Nimbus, ProcessMIX, XpertAI, and EpicStaff. Distributed as the npm package @foblex/flow under the MIT license. Current version: v19.1.6. Developed and maintained full-time since 2022, with a predictable release cadence and strict SemVer. Compatible with Angular 17.3 and later.
Ready to ship a node editor in Angular?
Foblex FlowThe most adopted node editor library for Angular — for workflow builders, AI pipelines, and interactive diagram editors.