Foblex/f-flow

Angular-native node editor library for production workflow builders, AI pipelines, and interactive diagram editors. MIT licensed.

What it solves

Foblex Flow is a node editor library for Angular that handles the complex UI/UX challenges of building production-grade workflow builders, AI pipelines, and interactive diagrams. It replaces the need to build custom drag-and-drop logic, connection paths, and canvas navigation from scratch.

How it works

The library provides Angular-native building blocks like f-flow, f-canvas, and f-connection. Developers can choose between two state management modes:

  • Classic Mode: The application owns the graph records and handles validation and updates via interaction events.
  • Managed Mode: Uses withFlowState() to provide typed records with built-in support for snapshots, undo/redo, and automatic gesture application.

It includes optional scaling tools like node virtualization and render caching for large scenes, and integrates with layout engines like Dagre and ELK.

Who it’s for

Angular developers and teams building low-code AI tools, call-flow editors, UML diagrams, and other node-based internal or customer-facing interfaces.

Highlights

  • Angular-First API: Designed specifically for Angular instead of wrapping a different framework's state model.
  • Production-Ready Features: Includes zoom, pan, minimap, snapping, alignment guides, and multi-select out of the box.
  • AI Agent Optimized: Ships with AI.md and llms.txt to help AI coding agents generate accurate code using the library's specific APIs.
  • Accessibility: Built-in ARIA semantics and an optional keyboard layer for spatial navigation and connection creation.
  • Customizable: Fully templated nodes and connections that can be themed via CSS tokens and SCSS mixins.

Related

  • Project
    SamurAIGPT/Vibe-Workflow

    Vibe Workflow is an open‑source, MIT‑licensed node‑based visual editor for building generative image and video pipelines. It consists of a Next.js front‑end, a FastAPI back‑end that calls MuAPI’s generative models, and a reusable workflow‑builder UI library. You can self‑host it (Docker or manual) or use the hosted SaaS version, and you can extend it with custom nodes to call any AI model or external API.

  • Project
    Comfy-Org/ComfyUI_frontend

    ComfyUI_frontend is the official browser/Electron UI for the ComfyUI AI workflow engine. It offers a node‑graph editor, mask editor, queue/history view, multilingual UI, and a JavaScript extension API for custom panels, commands, keybindings, and toast messages. Releases follow a 2‑week dev → 2‑week freeze cycle, with daily nightlies available via a launch flag.

  • Project
    Comfy-Org/ComfyUI

    A modular, node-based AI engine for visual professionals to create complex workflows for generating images, video, audio, and 3D models with precise parameter control.

  • Project
    bytedance/flowgram.ai

    A composable workflow development framework and toolkit for building custom AI workflow platforms with visual canvases and variable management.

  • Project
    chatfire-AI/huobao-canvas

    Huobao Canvas is an open‑source, node‑based visual editor that lets you chain text, image, and video AI models from 11 providers on an infinite canvas. It offers a lightweight Node server for persistence and async run queues, Docker and Electron deployment options, and a single‑key setup via Huobao. Ideal for building multimodal creative pipelines without writing code.