Foblex Flow is an Angular-native UI library designed for building sophisticated node-based interfaces such as editors, workflow builders, and interactive graph visualizations. It empowers Angular teams to create complex graph-driven applications without adopting a React-centric development model. The library offers a progressive enhancement approach, allowing developers to start with core components and integrate advanced features like virtualization or caching only as needed, ensuring flexibility and performance for diverse use cases from simple diagrams to full-fledged low-code platforms.

How It Works

The library's core architecture revolves around f-flow as the editor host and f-canvas for panning and zooming. Any HTML element can become a node using the fNode directive, while fConnector directives define connection points. This Angular-first API integrates seamlessly into existing Angular applications, providing direct control over state, validation, and domain logic. Its design prioritizes an easy starting path with optional complexity, making it suitable for both lightweight diagrams and demanding workflow-builder products.

Quick Start & Requirements

• Primary Install: Use ng add @foblex/flow for Angular 17.3+ projects.
• Version Compatibility: For Angular versions 12-17.2, consult the "Angular Version Compatibility guide" and pin the appropriate Foblex Flow version before installation.
• Prerequisites: An Angular development environment. ng add automatically installs necessary companion packages (@foblex/platform, @foblex/mediator, @foblex/2d, @foblex/utils).
• Default Theme: Integrate the default theme by adding node_modules/@foblex/flow/styles/default.scss to your styles.scss or by using provided SCSS mixins for selective styling.
• Resources: Links to "Get Started", "Angular Version Compatibility", "Documentation", and "Examples" are available.

Highlighted Details

• Editing & Interaction: Features drag-and-drop nodes/groups, flexible connection creation, node reassignment, resizing, snapping, and alignment guides.
• Navigation & UI: Supports pan, zoom, minimap, auto-pan, fit-to-screen, and configurable control schemes (e.g., Miro-like, draw.io-like).
• Accessibility: Built with ARIA semantics, offering an opt-in keyboard layer for spatial navigation, actions, and screen-reader announcements.
• Advanced Features: Optional scaling tools like node virtualization and render caching, plus integrated Dagre and ELK auto-layout packages.
• Customization & Integration: Fully templated nodes/connections, themable via CSS/SCSS, and an event-driven API that ensures the library never mutates user data, supporting SSR and zoneless architectures.

Maintenance & Community

The project is hosted on GitHub with active community engagement through GitHub Discussions and an Issue Tracker. For questions or partnership inquiries, contact support@foblex.com. A roadmap is available for future development insights.

Licensing & Compatibility

Foblex Flow is released under the permissive MIT License. This license allows for broad compatibility, including commercial use and integration within closed-source projects without significant restrictions.

Limitations & Caveats

The library requires careful attention to version compatibility for Angular projects older than version 17.3; users must consult the compatibility guide to ensure correct installation. While designed for scalability, performance with extremely large graphs may depend on the effective use of optional scaling features like virtualization.