flowkit is a common, abstract, portable, configurable visual-builder UI kit for React, extracted from Flowise's Agentflow canvas and generalized so that other products — BPMN builders, data-pipeline studios, automation designers — can stand up the same polished node-editor experience with a single config object.
| Document | Read it when |
|---|---|
You want the high-level design: layers, mental model, data flow, state ownership, and the three core conventions. |
|
You need the full spec of the graph node model: schemas, params, anchors, handle-id grammar, visibility engine, edges, the flow document — and how to extend the model. |
|
You are building the backend that feeds the builder: node registry, icons, async option loading, flow persistence, concurrency. |
|
You need the complete |
|
You want recipes: custom registries, field renderers, node/edge renderers, connection rules, serializers — plus two full walkthroughs and the Flowise adapter as reference. |
-
New to the kit: Architecture & mental model
-
Then Node model spec to understand what nodes actually are.
-
Integrating a backend: Backend API spec.
-
Wiring an app: Configuration reference + Extending flowkit.
| Package | Contents |
|---|---|
|
Design system: theme factory (light/dark), ~35 generic MUI components, hooks, utils. No domain knowledge. |
|
The canvas kit: |
|
Two complete builders on one kit: a data-pipeline studio and a BPMN builder. The portability proof. |
-
Kit — the two npm packages together.
-
Consumer — an application embedding the kit (e.g. Flowise, a BPMN tool).
-
Adapter — the consumer-side code that implements the config interfaces.
-
Registry — the source of node schemas (static list, REST API, anything).
-
Code identifiers use
monospace; file paths are relative to the repo root unless noted.