Angular Node-Based UI Library

Foblex Flow is an Angular-native node-based UI library for building interfaces where users edit connected entities visually. It gives you the rendering and interaction layer for node editors, workflow builders, visual automation tools, AI pipeline builders, and other graph-style product surfaces.

The starting path is small: f-flow, f-canvas, nodes, connectors, and connections. Most teams add helpers like minimap, selection area, snapping, caching, virtualization, or worker-assisted rendering only later.

When to use it

Use Foblex Flow when your Angular application needs users to:

place and move nodes on a canvas,
create or reassign connections,
zoom, pan, select, and align elements,
apply domain rules while keeping the graph model in app state,
build a custom editor instead of embedding a generic diagram widget.

Why Angular-first matters

Many graph UI tools are React-first, or they bring their own store and conventions. Foblex Flow takes a different approach:

the rendering primitives are built for Angular templates and Angular change detection,
the library stays compatible with SSR-friendly setups,
your application keeps ownership of data, validation, permissions, and persistence,
you can compose the editor with your own services, signals, RxJS streams, or NgRx state.

Key capabilities

f-flow and f-canvas as the editor root and viewport.
Nodes, connectors, groups, and persisted connections.
Drag-to-connect, drag-to-reassign, box selection, zoom, minimap, snapping, and waypoints.
Helper plugins such as Magnetic Lines and Magnetic Rects for cleaner layouts.
A UI-agnostic foundation that works with Angular Material or your own design system.

Related docs and examples

GitHub and install

Start with:

Then explore the GitHub repository for source code, examples, and release notes.