# Foblex Flow is an Angular node editor that stops at the editor boundary

> Foblex/f-flow is a TypeScript library that ships the hard parts of a node editor for Angular applications, with drag logic, hit-testing, SVG connection paths, selection, zoom and undo/redo, and it draws a clear line: validation, persistence, permissions and domain logic stay with the application. It targets Angular 17.3 and later, and it ships documentation written for coding agents.

**Foblex/f-flow** — Angular-native node editor library for production workflow builders, AI pipelines, and interactive diagram editors. MIT licensed.

- Repository: https://github.com/Foblex/f-flow
- Website: https://flow.foblex.com/
- Stars: 541 · Forks: 66
- Language: TypeScript
- License: MIT
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/foblex-f-flow

## The parts of an editor that are painful to build twice

Foblex Flow describes itself as shipping the hard parts of a production node editor, and it names them. Drag logic, hit-testing, SVG connection paths, reassign, selection, zoom and undo/redo are the pieces the library provides as Angular-native building blocks. That list is a useful one, because it is exactly the list of things that look simple in a demo and take weeks to get right. Hit-testing in particular is the feature that separates a toy canvas from an editor people use daily, since it decides whether a click selects a node, grabs a handle or starts a connection, and the wrong answer here is what makes editor UIs feel broken. The starting path is deliberately small. Most editors begin with f-flow, f-canvas, nodes, connectors and connections, and richer editor features are added only when the product needs them. The stated use cases are workflow builders, AI low-code tools, call-flow editors, UML diagrams and internal back-office tools, and the README lists production products that use it, including Luware Nimbus, ProcessMIX, XpertAI and EpicStaff.

## Two state models, and a line the library will not cross

The most consequential decision in the library is the state boundary, and it is offered as two options. The first is the classic mode, in which the graph records live in the application and the library communicates through an event-driven API. The second is the optional provideFFlow(withFlowState()) form, which gives typed managed records, snapshots and undo/redo for supported operations. The design of the two modes is that your application stays in control of validation rules, permissions, persistence and business meaning in either case, which is the point the README repeats most often. In other words, Foblex Flow is an editor, not a workflow engine, and if you were hoping for a library that also runs the flows, runs the rules and stores the documents, this is not it. The trade-off is real in both directions. Classic mode means you own the state and the undo stack, which is more code but no surprises when your model is unusual. Managed mode gives you undo/redo for the operations the library supports, which is a lot of value for a product that wants undo without writing a history system, but it is a bounded guarantee, since the snapshots cover supported operations only.

## Angular 17.3 and later, and the cost of that choice

The current 19.x releases target Angular 17.3 and later, and the README is unusually clear about what happens if that is not your situation. If your app is on Angular 12 through 17.2, you should check the Angular Version Compatibility guide first and pin the matching Foblex Flow line before installing. That is a meaningful upgrade cost to plan for. A node editor library is not a leaf utility, because it brings components, styles and its own Angular APIs, and the versions of it that support older Angular releases are, by the nature of the ecosystem, not receiving the same work. The README also says the library has been maintained full time since 2022, which matters less as a slogan than as a signal about how long the API surface has been settling. The alternative to pinning, if your app is on an older Angular, is to upgrade Angular first or to look elsewhere entirely, and for a team on Angular 12 the second option is the more likely one. The Angular-first framing is the point. The library positions its API as fitting Angular applications rather than wrapping a React-style state model, which is a real difference in how components, inputs and change detection are expected to work.

## Editing, navigation, accessibility, layout and scale

The feature overview in the README is organised by area, and it is worth reading closely because the split between what ships by default and what is optional is the useful part. Editing covers drag and drop of nodes and groups, connection creation by drag, click or keyboard, reassign, waypoints, resize, rotate, snap and alignment guides and magnetic lines. Navigation covers pan, wheel, pinch and double-click zoom, a minimap, auto-pan at the edges, fit-to-screen and configurable control schemes with Miro-like and draw.io-like presets. Selection is click, marquee, multi-select and select-all, with selection events, and the application decides what selection means. Accessibility is the row most projects underestimate. ARIA semantics are on by default, and there is an opt-in keyboard layer for spatial navigation, move, delete and connection creation without a mouse, with screen reader announcements and remappable keys. Layout ships Dagre and ELK auto-layout packages, reflow-on-resize and layer ordering. Scale is where the optional modules live, since node virtualization, render caching and background workers are described as scaling tools rather than day-one requirements, which keeps the default install small.

## Customisation is templated, theming is tokens, and the runtime stays yours

The customization row is about replacing the parts, not just styling them. Nodes, connections and connectors are fully templated, so a domain-specific node is a template you write rather than a CSS override, and there are custom markers, connection gradients and connection labels. Theming is done through CSS tokens and SCSS mixins, which is the mechanism an Angular design system would want, since a single variable change can restyle every node without touching the templates. On the integration side the README calls the library SSR-safe and zoneless-ready, which matters for two separate audiences, server rendered Angular applications and applications that have moved away from zone-based change detection. The rest of the row is about your data, and it is a deliberately small surface. Persistence is not provided, so your graph records live wherever your application keeps them, and the managed state mode does not change that, it changes who owns the record objects. For a product where a diagram is a first-class persisted entity, that means the library sits on one side of your architecture and the rest is yours.

## Documentation written for agents, with codes that fail loudly

Foblex Flow does something unusual for a UI library, which is to treat AI coding agents as a first-class audience. The package ships a version-matched guide at node_modules/@foblex/flow/AI.md, ng add writes workspace agent rules, and the developer experience exposes stable FFxxxx diagnostics that give an agent a concrete pass or fail signal instead of a vague error. There is also an AI setup guide and a curated, LLM-readable reference published as llms-full.txt, and the repository itself carries AGENT.md, AGENTS.md and CLAUDE.md alongside a context7.json. The README even tells you not to infer APIs from other node editor libraries, which is a warning worth heeding, since the React-style state model that dominates other editors is precisely what this one says it does not wrap. The mechanism is the interesting part. Rather than hoping a model produces plausible Angular, the library gives the agent a document that matches the installed version and a diagnostic namespace it can check its own work against. For a team with agents in the loop, that is a clearly different failure mode from free-form generation.

## An Nx monorepo with five reference applications

The repository is bigger than a typical library, and the structure explains why. It is an Nx workspace, with nx.json at the root, and the package.json scripts drive nx targets rather than a single build. The dev scripts serve a portal application and a set of reference apps:

```json
    "dev": "nx serve portal --configuration development",
    "dev:reference-apps": "nx run-many -t serve --projects=schema-designer,call-center,uml-diagram,tournament-bracket,marketing-automation --parallel=5",
    "build": "nx run-many -t build --projects=portal,schema-designer,call-center,uml-diagram,tournament-bracket,marketing-automation",
```

Those five reference applications are the documentation in executable form, since a schema designer, a call centre flow, a UML diagram, a tournament bracket and a marketing automation canvas each exercise a different part of the API, and reading them is often faster than reading the docs. The rest of the tree is the usual modern setup, with libs/ for the packages, apps/, starters/, docs/, tools/ and scripts/, an Nx based CI workflow, husky hooks, commitlint configuration, prettier, an eslint config and a .versionrc.js that drives versioning, with a CHANGELOG.md, a ROADMAP.md, a SECURITY.md and a CODE_OF_CONDUCT.md at the root. The npm package itself is @foblex/flow, the licence is MIT, and the documentation site is flow.foblex.com.

## Where Foblex Flow is the wrong choice

Three cases stand out. The first is any application that is not Angular. The library is Angular-native, with Angular components, inputs and a way of signalling change that differs from a React-style state model, so a Vue, React or plain TypeScript team is looking at a different library entirely. The README itself points to honest comparison pages for that decision, including one on React Flow versus Foblex Flow for Angular teams and another on ngx-vflow versus Foblex Flow, and the difference in approach behind those comparisons is the framework boundary. A framework-agnostic core gives you a portable editor and a wrapper that adapts it to your framework, while an Angular-native library gives you first-class components and a state model that matches the rest of your app, at the cost of being tied to one framework and one Angular version range. The second case is a team that wants a workflow engine. Validation, persistence, permissions and business meaning stay in your application in both state modes, so if your requirement is to run the graph rather than draw it, this library stops at the drawing. The third case is a project on Angular 12 to 17.2 that cannot upgrade, since the current line needs 17.3 or later and older lines are the ones no longer being worked on. On the scale side, the optional virtualization, caching and worker modules are the answer for large scenes, and if your scene is large from day one, those are part of your cost rather than an upgrade.

## Conclusion

Foblex Flow fits an Angular team that needs a workflow builder, AI pipeline canvas or diagram editor and wants the interaction layer solved without adopting a framework-agnostic core and a wrapper. It does not fit a non-Angular application, and it will not give you a workflow engine, since validation, persistence, permissions and business meaning stay with your code by design. Before you start, check the Angular version compatibility guide and pin the matching Foblex Flow line, and note the last push was on 2026-10-11 with v19.3.0 released on 2026-09-27.

## FAQ

### Which Angular versions does Foblex Flow support?

The current 19.x releases target Angular 17.3 and later. If your app is on Angular 12 to 17.2, the README says to check the Angular Version Compatibility guide and pin the matching Foblex Flow line before installing.

### What is the difference between classic mode and withFlowState() in Foblex Flow?

Classic mode keeps graph records in your application and communicates through an event-driven API. The optional provideFFlow(withFlowState()) form gives typed managed records, snapshots and undo/redo for supported operations. In both modes validation, persistence, permissions and domain logic remain application concerns.

### Does Foblex Flow include validation, persistence or a workflow engine?

No. The README states that your application stays in control of validation rules, permissions, persistence and business meaning in either state mode, so the library provides the editor layer rather than the execution layer.

### How does Foblex Flow support AI coding agents?

The package ships a version-matched guide at node_modules/@foblex/flow/AI.md, ng add writes workspace agent rules, and development diagnostics use stable FFxxxx codes so an agent gets a concrete pass or fail signal. The project also publishes an AI setup guide and an LLM-readable reference at llms-full.txt.

## Sources

- [Foblex/f-flow on GitHub](https://github.com/Foblex/f-flow)
- [License: MIT](https://github.com/Foblex/f-flow/blob/main/LICENSE)
- [Project website](https://flow.foblex.com/)
- [README](https://github.com/Foblex/f-flow/blob/main/README.md)
- [Releases](https://github.com/Foblex/f-flow/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/foblex-f-flow