Flow Builder
https://github.com/bytedance/flow-builder- Category
- Developer Tools
- Rank
- No. 642Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- bytedance
- GitHub
- 697 stars
- Date
About
Highly customizable streaming flow builder for React. Compose step-by-step pipelines (LLM chains, ETL, approval flows) in a visual editor.
What it does
Flow Builder is a controlled React component for editing structured node sequences. Your application owns the node data and registers how each node type looks and configures. The component renders starts, ends, branches, conditions, loops, and common steps, then reports edits through a change callback.
Why it's ranked here
Its strongest case is control: teams can supply node displays, configuration panels, identifiers, drag surfaces, confirmations, and remote registrations while retaining ownership of state. Built-in history, zoom, sorting, readonly display, and tree conversion cover substantial editor plumbing. It remains an interface toolkit, not a workflow execution system.
What's good
The registration model separates workflow data from presentation and configuration. Branch and condition relationships are explicit, while loop, start, and end roles remain configurable. Consumers get vertical or horizontal layouts, optional arrows, drag insertion, condition sorting, undo and redo, zoom controls, custom spacing, and callbacks for important mutations.
Tradeoffs
The host application must use React and manage the node array itself. Several integration points accept broadly typed values, reducing TypeScript protection around drawers, popovers, confirmations, and node data. Remote node loading depends on browser globals and SystemJS. The repository code shown handles editing and graph conversion, not step execution, scheduling, persistence, or monitoring.
How to use it well
Use it when a React product needs a branded workflow editor and the team can define node schemas, forms, validation, and state handling. Keep execution, storage, permissions, and operational status in adjacent services. It suits controlled process modeling better than teams seeking a ready-made automation backend or standalone application.
Technical notes+
package.json defines the react-flow-builder package, React and React DOM peer requirements of version 16 or newer, build and test scripts, and CommonJS, ES module, and TypeScript declaration package surfaces. src/index.tsx exports the public interfaces, contexts, hooks, graph utilities, and default component. src/Builder/index.tsx recursively selects renderers for start, end, branch, condition, loop, and common nodes, exposes imperative history, zoom, add, remove, and drawer controls, and initializes empty state with registered boundary nodes. src/utils/index.ts classifies registered node types, creates nested branch children, converts trees to flat nodes with successor IDs, rebuilds trees from paths, and loads remote JavaScript and optional styles through SystemJS.
Observed
- Primary language
- TypeScript with React TSX components
- Install surface
- Published as the react-flow-builder package for npm or Yarn
- Interface
- React component library with exported types, contexts, hooks, and graph utilities
- React support
- Peer dependencies require React and React DOM version 16 or newer
- Package formats
- The package manifest declares CommonJS, ES module, and TypeScript declaration entry surfaces
- Built-in node structures
- Supports start, end, branch, condition, loop, and common node categories
Read from README.md, package.json, src/index.tsx, src/typings.d.ts, src/Lines/index.ts, src/Nodes/index.ts, src/Tools/index.ts, src/hooks/index.ts, src/utils/index.ts, src/Arrow/index.tsx, src/hooks/useSort.ts, src/hooks/useZoom.ts, src/Builder/index.tsx, src/contexts/index.ts, src/Nodes/EndNode.tsx.
What it can do
Create visual flow diagrams
User interactions in visual editor → Visual flow diagram representation
Build LLM processing chains
Language model components and prompts → Connected LLM processing pipeline
Design ETL data pipelines
Data sources and transformation rules → Extract-Transform-Load workflow
Configure approval workflows
Approval steps and user roles → Multi-stage approval process
Connect pipeline steps
Individual workflow components → Integrated step-by-step pipeline
Execute streaming data flows
Configured pipeline and streaming data → Processed data stream results
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.