# Foblex Flow

> Angular-native library for building node-based UIs, workflow builders, AI pipeline tools, and interactive diagram editors. MIT licensed. Built by a small team in Warsaw, Poland since 2022.

## Key facts

- Package: `@foblex/flow` on npm — https://www.npmjs.com/package/@foblex/flow
- Current version: v19.0.0 (see the npm page for the live number)
- Weekly installs: ~16K (verify on npm for the latest number)
- GitHub: https://github.com/Foblex/f-flow
- License: MIT
- Supports: Angular 17.3+ (older 12–17.2 lines pinned separately)
- Built for: Angular teams. Not a React wrapper. Not framework-agnostic.

## Documentation

- [Introduction](https://flow.foblex.com/docs/intro): What Foblex Flow is, who it's for, core primitives
- [Get Started](https://flow.foblex.com/docs/get-started): Install and render your first flow in 5 minutes
- [Angular Version Compatibility](https://flow.foblex.com/docs/angular-version-compatibility)
- [React Flow vs Foblex Flow](https://flow.foblex.com/docs/react-flow-vs-foblex-flow-for-angular-teams): Honest comparison for Angular teams
- [Roadmap](https://flow.foblex.com/docs/roadmap): Planned features and release timeline
- [Errors and Warnings](https://flow.foblex.com/docs/errors): FFxxxx diagnostic codes with causes and fixes
- [AI Agents](https://flow.foblex.com/docs/ai): Setting up LLMs and coding agents (AGENTS.md, bundled AI.md, llms.txt, Context7)

## API Reference

- [f-flow Component](https://flow.foblex.com/docs/f-flow-component): Root container, flow state, selection, redraw
- [f-canvas Component](https://flow.foblex.com/docs/f-canvas-component): Viewport, pan/zoom, fitToScreen, centering
- [fNode Directive](https://flow.foblex.com/docs/f-node-directive): Draggable nodes, position, size, rotation
- [fGroup Directive](https://flow.foblex.com/docs/f-group-directive): Node grouping, hierarchy, auto-sizing
- [fConnector Directive](https://flow.foblex.com/docs/f-connector-directive): Unified connector (source/target/source-target/outlet), replaces fNodeOutput/fNodeInput/fNodeOutlet
- [fNodeOutput Directive](https://flow.foblex.com/docs/f-node-output-directive): Output connectors, connection rules (deprecated — use fConnector)
- [fNodeInput Directive](https://flow.foblex.com/docs/f-node-input-directive): Input connectors, categories, multiplicity (deprecated — use fConnector)
- [fNodeOutlet Directive](https://flow.foblex.com/docs/f-node-outlet-directive): Shared outlet connectors (deprecated — use fConnector)
- [f-connection Component](https://flow.foblex.com/docs/f-connection-component): Connection rendering, types, behavior
- [f-connection-for-create](https://flow.foblex.com/docs/f-connection-for-create-component): Drag-to-connect preview
- [f-snap-connection](https://flow.foblex.com/docs/f-snap-connection-component): Snap helper during connection drag
- [f-connection-waypoints](https://flow.foblex.com/docs/f-connection-waypoints-component): Editable bend points
- [Connection Markers](https://flow.foblex.com/docs/f-connection-marker-directive): Arrow, circle, and custom SVG markers
- [fDraggable Directive](https://flow.foblex.com/docs/f-draggable-directive): All pointer interactions, events, triggers
- [fDragHandle Directive](https://flow.foblex.com/docs/f-drag-handle-directive): Drag-start surface
- [fResizeHandle Directive](https://flow.foblex.com/docs/f-resize-handle-directive): Resize handles with directions
- [fRotateHandle Directive](https://flow.foblex.com/docs/f-rotate-handle-directive): Rotation handles
- [fZoom Directive](https://flow.foblex.com/docs/f-zoom-directive): Wheel, pinch, and double-click zoom
- [f-minimap Component](https://flow.foblex.com/docs/f-minimap-component): Overview navigator
- [f-background Component](https://flow.foblex.com/docs/f-background-component): Canvas background patterns
- [f-selection-area](https://flow.foblex.com/docs/f-selection-area-component): Rectangle multi-select
- [Control Scheme](https://flow.foblex.com/docs/control-scheme): Configurable gesture-to-action mapping with presets
- [Accessibility](https://flow.foblex.com/docs/accessibility): ARIA semantics always on; withA11y() adds keyboard navigation, movement, and connection creation
- [fExternalItem Directive](https://flow.foblex.com/docs/f-external-item-directive): Drag from palette to canvas
- [f-auto-pan Component](https://flow.foblex.com/docs/f-auto-pan-component): Edge-based auto-scroll
- [f-magnetic-lines](https://flow.foblex.com/docs/f-magnetic-lines-component): Alignment guide lines
- [f-magnetic-rects](https://flow.foblex.com/docs/f-magnetic-rects-component): Equal-spacing helpers (Figma-like) for node layout
- [f-line-alignment](https://flow.foblex.com/docs/f-line-alignment-component): Legacy alignment helper (deprecated - use f-magnetic-lines)
- [Connection Rules](https://flow.foblex.com/docs/connection-rules): Restricting valid connections
- [Event System](https://flow.foblex.com/docs/event-system): Final-result events, triggers, CSS state classes
- [Selection System](https://flow.foblex.com/docs/selection-system): Pointer, box and programmatic selection

## Styling

- [Default Theme and Styling](https://flow.foblex.com/docs/default-theme-and-styling): Theme setup, installation
- [Styling Tokens and Overrides](https://flow.foblex.com/docs/styling-tokens-and-overrides): CSS custom properties (`--ff-*`)
- [Styling Mixins and Scoping](https://flow.foblex.com/docs/styling-mixins-and-scoping): SCSS mixins API
- [Styling Recipes](https://flow.foblex.com/docs/styling-recipes): Common styling patterns

## Use cases

- [Angular Node-Based UI Library](https://flow.foblex.com/docs/angular-node-based-ui-library)
- [Angular Flowchart Library](https://flow.foblex.com/docs/angular-flowchart-library): Editable flowcharts with draggable steps and wired connections
- [Angular AI Agent Builder](https://flow.foblex.com/docs/angular-ai-agent-builder): Visual AI pipelines and low-code LLM tools on Foblex Flow
- [React Flow Alternative for Angular](https://flow.foblex.com/docs/react-flow-alternative-for-angular): How the nodes/edges model maps to Angular-native templates
- [ngx-graph Alternative](https://flow.foblex.com/docs/ngx-graph-alternative): Maintained editor with a migration path from ngx-graph
- [Angular Node Editor Library](https://flow.foblex.com/docs/angular-node-editor-library)
- [Angular Workflow Builder](https://flow.foblex.com/docs/angular-workflow-builder)
- [Angular Diagram Library](https://flow.foblex.com/docs/angular-diagram-library)

## Examples

- [Click to Connect](https://flow.foblex.com/examples/click-to-connect): Click source, then target — withConnectionFlow('click')
- [Accessibility](https://flow.foblex.com/examples/accessibility): Keyboard-operable editor with screen-reader announcements — opt-in via withA11y()

- [All Examples Overview](https://flow.foblex.com/examples/overview): 50+ interactive examples
- [AI Low-Code Platform](https://flow.foblex.com/examples/ai-low-code-platform): Reference app
- [Schema Designer](https://flow.foblex.com/examples/schema-designer)
- [Call Center Flow](https://flow.foblex.com/examples/call-center)
- [UML Diagram](https://flow.foblex.com/examples/uml-diagram-example)

## Full reference

- [llms-full.txt](https://flow.foblex.com/llms-full.txt): Complete inline API reference with all inputs, outputs, methods, types, code examples, and styling documentation

## Services

- [Consulting & custom development](https://flow.foblex.com/services): Architecture review from $1,500, prototype sprints $5–15K, full partnerships $25K+

## Optional

- [Changelog](https://github.com/Foblex/f-flow/blob/main/CHANGELOG.md)
- [Blog](https://flow.foblex.com/blog/overview)
- [Showcase](https://flow.foblex.com/showcase/overview)