{"id":13521960,"url":"https://github.com/bytedance/flow-builder","last_synced_at":"2025-05-16T00:07:24.123Z","repository":{"id":37709185,"uuid":"414945027","full_name":"bytedance/flow-builder","owner":"bytedance","description":"A highly customizable streaming flow builder.","archived":false,"fork":false,"pushed_at":"2025-03-30T10:57:30.000Z","size":2353,"stargazers_count":633,"open_issues_count":5,"forks_count":91,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-11T07:39:27.645Z","etag":null,"topics":["builder","flow","process","react"],"latest_commit_sha":null,"homepage":"https://bytedance.github.io/flow-builder","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bytedance.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-10-08T10:35:59.000Z","updated_at":"2025-05-11T07:09:05.000Z","dependencies_parsed_at":"2023-02-09T19:16:02.979Z","dependency_job_id":"b49b5cad-f864-44af-a269-ec26699e33ec","html_url":"https://github.com/bytedance/flow-builder","commit_stats":{"total_commits":49,"total_committers":1,"mean_commits":49.0,"dds":0.0,"last_synced_commit":"7f6b4d6bd137ea88d64ad03983e51986d38cf00d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2Fflow-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2Fflow-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2Fflow-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2Fflow-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytedance","download_url":"https://codeload.github.com/bytedance/flow-builder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","flow","process","react"],"created_at":"2024-08-01T06:00:40.250Z","updated_at":"2025-05-16T00:07:19.103Z","avatar_url":"https://github.com/bytedance.png","language":"TypeScript","readme":"# Introduction\n\nEnglish | [简体中文](https://github.com/bytedance/flow-builder/blob/main/README.zh-CN.md)\n\nA highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.\n\n| ![demo1](./public/demo1-en.png) | ![demo2](./public/demo2-en.png) |\n| ------------------------------- | ------------------------------- |\n\n## Try it out\n\nhttps://bytedance.github.io/flow-builder\n\n## Github\n\nhttps://github.com/bytedance/flow-builder\n\n## Installation\n\n```\nyarn add react-flow-builder\n\nor\n\nnpm install react-flow-builder\n```\n\n## Usage\n\n```tsx\n// index.tsx\nimport React, { useState, useContext } from 'react';\nimport FlowBuilder, {\n NodeContext,\n INode,\n IRegisterNode,\n} from 'react-flow-builder';\n\nimport './index.css';\n\nconst StartNodeDisplay: React.FC = () =\u003e {\n const node = useContext(NodeContext);\n return \u003cdiv className=\"start-node\"\u003e{node.name}\u003c/div\u003e;\n};\n\nconst EndNodeDisplay: React.FC = () =\u003e {\n const node = useContext(NodeContext);\n return \u003cdiv className=\"end-node\"\u003e{node.name}\u003c/div\u003e;\n};\n\nconst OtherNodeDisplay: React.FC = () =\u003e {\n const node = useContext(NodeContext);\n return \u003cdiv className=\"other-node\"\u003e{node.name}\u003c/div\u003e;\n};\n\nconst ConditionNodeDisplay: React.FC = () =\u003e {\n const node = useContext(NodeContext);\n return \u003cdiv className=\"condition-node\"\u003e{node.name}\u003c/div\u003e;\n};\n\nconst registerNodes: IRegisterNode[] = [\n {\n type: 'start',\n name: 'start node',\n displayComponent: StartNodeDisplay,\n isStart: true,\n },\n {\n type: 'end',\n name: 'end node',\n displayComponent: EndNodeDisplay,\n isEnd: true,\n },\n {\n type: 'node',\n name: 'other node',\n displayComponent: OtherNodeDisplay,\n },\n {\n type: 'condition',\n name: 'condition node',\n displayComponent: ConditionNodeDisplay,\n },\n {\n type: 'branch',\n name: 'branch node',\n conditionNodeType: 'condition',\n },\n];\n\nconst Demo = () =\u003e {\n const [nodes, setNodes] = useState\u003cINode[]\u003e([]);\n\n const handleChange = (nodes: INode[]) =\u003e {\n console.log('nodes change', nodes);\n setNodes(nodes);\n };\n\n return (\n \u003cFlowBuilder\n nodes={nodes}\n onChange={handleChange}\n registerNodes={registerNodes}\n /\u003e\n );\n};\n\nexport default Demo;\n\n// index.css\n.start-node, .end-node {\n height: 64px;\n width: 64px;\n border-radius: 50%;\n line-height: 64px;\n color: #fff;\n text-align: center;\n}\n\n.start-node {\n background-color: #338aff;\n}\n\n.end-node {\n background-color: #666;\n}\n\n.other-node, .condition-node {\n width: 224px;\n border-radius: 4px;\n color: #666;\n background: #fff;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);\n}\n\n.other-node {\n height: 118px;\n padding: 16px;\n display: flex;\n flex-direction: column;\n}\n\n.condition-node {\n height: 44px;\n padding: 12px 16px;\n}\n```\n\n## API\n\n### FlowBuilder\n\n| Property | Description | Type | Required | Default | Version |\n| :------------------------ | :-------------------------------------------------- | :--------------------------------------------------------------------------- | :------- | :--------- | :------ |\n| backgroundColor | The color of background | `string` | | #F7F7F7 | |\n| className | The class name of the container | `string` | | - |\n| draggable | drag and drop | `boolean` | | false | 1.0.0 |\n| DragComponent | custom drag component | `React.FC`\\\u003c[DragComponent](#dragcomponent)\\\u003e | | - | 1.0.0 |\n| DropComponent | custom drop component | `React.FC`\\\u003c[DropComponent](#dropcomponent)\\\u003e | | - | 1.0.0 |\n| createUuid | custom node uuid | `(type?: string) =\u003e string` | | - | 2.0.0 |\n| DrawerComponent | Drawer component | `React.FC`\\\u003c[DrawerComponent](#drawercomponent)\\\u003e | | - | 2.0.0 |\n| PopoverComponent | Popover component | `React.FC`\\\u003c[PopoverComponent](#popovercomponent)\\\u003e | | - | 2.0.0 |\n| PopconfirmComponent | Popconfirm component | `React.FC`\\\u003c[PopconfirmComponent](#popconfirmcomponent)\\\u003e | | - | 2.0.0 |\n| drawerProps | Extra props of DrawerComponent | `any` | | - | |\n| drawerVisibleWhenAddNode | Drawer visible when add node | `boolean` | | false | |\n| historyTool | undo and redo | `boolean` \\| [HistoryToolConfig](#historytoolconfig) | | false |\n| layout | Use vertical or horizontal layout | `vertical` \\| `horizontal` | | `vertical` | |\n| lineColor | The color of line | `string` | | #999999 | |\n| nodes | The nodes of FlowBuilder | [Node](#node)[] | ✓ | - | |\n| readonly | Readonly mode, cannot add, remove, configure. | `boolean` | | false | |\n| registerNodes | The registered nodes | [RegisterNode](#registernode)[] | ✓ | - | |\n| registerRemoteNodes | The registered remote nodes | [RegisterRemoteNode](#registerremotenode)[] | | - | 1.3.0 |\n| showPracticalBranchNode | - | `boolean` | | false | 1.1.0 |\n| showPracticalBranchRemove | - | `boolean` | | false | 1.1.0 |\n| sortable | Condition nodes can be dragged and sorted in branch | `boolean` | | false | 1.4.0 |\n| sortableAnchor | Anchor for start dragging 序 | `ReactNode` | | - | 1.4.0 |\n| spaceX | Horizontal spacing between nodes | `number` | | `16` | |\n| spaceY | Vertical spacing between nodes | `number` | | `16` |\n| zoomTool | zoom | `boolean` \\| [ZoomToolConfig](#zoomtoolconfig) | | false | |\n| onChange | Callback function for when the data change | (nodes: [Node](#node)[], changeEvent: `string`, nodeChanged?: INode) =\u003e void | ✓ | - | |\n| onHistoryChange | | `(undoDisabled: boolean, redoDisabled: boolean) =\u003e void` | | - | |\n| onZoomChange | | `(outDisabled: boolean, value: number, inDisabled: boolean) =\u003e void` | | - | |\n| showArrow | Show arrow | `boolean` | | false | 1.4.5 |\n| arrowIcon | The icon of the arrow | `ReactNode` | | - | 1.4.5 |\n| onAddNodeSuccess | Called when add node success | `(type: string, node: INode) =\u003e void` | | - | 1.4.9 |\n| onDropNodeSuccess | Called when drop node success | `(type: string, node: INode) =\u003e void` | | - | 1.4.9 |\n| onRemoveNodeSuccess | Called when remove node success | `(node: INode) =\u003e void` | | - | 2.2.0 |\n| allowStartConfig | Allow start node config | `boolean` | | - | 2.1.0 |\n| allowEndConfig | Allow end node config | `boolean` | | - | 2.1.0 |\n| scrollByDrag | Scroll by mouse dragging | `boolean` | | - | 2.6.0 |\n\n#### HistoryToolConfig\n\n| Property | Description | Type | Default |\n| :------- | :---------- | :-------- | :------ |\n| hidden | | `boolean` | false |\n| max | | `number` | 10 |\n\n#### ZoomToolConfig\n\n| Property | Description | Type | Default |\n| :----------- | :---------- | :-------- | :------ |\n| hidden | | `boolean` | false |\n| initialValue | | `number` | 100 |\n| min | | `number` | 10 |\n| max | | `number` | 200 |\n| step | | `number` | 10 |\n\n#### DragComponent\n\n| Property | Description | Type | Version |\n| :---------- | :--------------------------------------------------------------------------------------------------------------------------------- | :--------------------------- | :------ |\n| onDragStart | The dragStart event of the custom drag component needs to call this method to set the dragged type（ dragType in BuilderContext ） | `(nodeType: string) =\u003e void` | 1.0.0 |\n| onDragEnd | The dragEnd event of the custom drag component needs to call this method to clear the dragged type（ dragType in BuilderContext ） | `() =\u003e void` | 1.0.0 |\n\n#### DropComponent\n\n| Property | Description | Type | Version |\n| :------- | :--------------------------------------------------------------------------------------------- | :----------- | :------ |\n| onDrop | The drop event of the custom drop component needs to call this method to add the new node type | `() =\u003e void` | 1.0.0 |\n\n#### DrawerComponent\n\n| Property | Description | Type | Version |\n| :----------------- | :--------------------------------------------------------------- | :------------------------------ | :------ |\n| visible | You can judge the boolean value of **selectedNode** by yourself. | `any` | 2.0.0 |\n| onClose | You can also call **closeDrawer** by yourself. | `any` | 2.0.0 |\n| children | | `any` | 2.0.0 |\n| title | | `any` | 2.0.0 |\n| width | | `any` | 2.0.0 |\n| destroyOnClose | | `any` | 2.0.0 |\n| maskClosable | | `any` | 2.0.0 |\n| configComponentRef | | `React.MutableRefObject`\\\u003cany\\\u003e | 2.5.0 |\n\n#### PopoverComponent\n\n| Property | Description | Type | Version |\n| :---------------- | :---------- | :---- | :------ |\n| visible | | `any` | 2.0.0 |\n| onVisibleChange | | `any` | 2.0.0 |\n| children | | `any` | 2.0.0 |\n| overlayClassName | | `any` | 2.0.0 |\n| placement | | `any` | 2.0.0 |\n| trigger | | `any` | 2.0.0 |\n| content | | `any` | 2.0.0 |\n| getPopupContainer | | `any` | 2.0.0 |\n\n#### PopconfirmComponent\n\n| Property | Description | Type | Version |\n| :---------------- | :----------------------------------------- | :---- | :------ |\n| title | | `any` | 2.0.0 |\n| onConfirm | You can also call **removeNode** yourself. | `any` | 2.0.0 |\n| children | | `any` | 2.0.0 |\n| getPopupContainer | | `any` | 2.0.0 |\n\n### FlowBuilderInstance\n\n| Name | Description | Type | Version |\n| :---------- | :------------- | :------------------------------------------------------------------------------ | :------ |\n| add | add node | `(node: INode, newNodeType: string) =\u003e void` \\| `(newNodeType: string) =\u003e void` |\n| history | undo, redo | `(type: 'undo' \\| 'redo') =\u003e void` |\n| remove | remove noded | `(nodes: INode \\| INode[] = useContext(NodeContext)) =\u003e void` |\n| zoom | zoom | `(type: 'out' \\| 'in' \\| number) =\u003e void` |\n| closeDrawer | close drawer | `() =\u003e void` |\n| context | BuilderContext | [BuilderContext](#buildercontext) | 1.3.5 |\n\n### Formatter\n\n| Name | Description | Type |\n| :------------- | :---------------------- | :---------------------------------------------------------------------- |\n| buildFlatNodes | Translate to flat nodes | `(params: {registerNodes: IRegisterNode[], nodes: INode[]}) =\u003e INode[]` |\n| buildTreeNodes | Translate to tree nodes | `(params: {nodes: INode[]}) =\u003e INode[]` |\n| createUuid | Create uuid | `(prefix?: string) =\u003e string` |\n\n### RegisterNode\n\n| Property | Description | Type | Required | Default | Version |\n| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :-------------------------------- | :------ |\n| addableComponent | | `React.FC`\\\u003c[AddableComponent](#addablecomponent)\\\u003e | | - |\n| addableNodeTypes | The list of nodes that can be added below the node | `string[]` | | - |\n| addIcon | The icon in addable node list (There are already some default icons) | `ReactNode` | | - |\n| addConditionIcon | The icon of the branch node when adding a condition (The default icon already exists) | `ReactNode` | | - | 1.3.3 |\n| className | The class name of node | `string` | | - | 1.3.4 |\n| conditionMaxNum | The max number of condition node | `number` | | - |\n| conditionNodeType | The type of condition node | `string` | | - |\n| configComponent | The Component of configuring node form | `React.FC`\\\u003c[ConfigComponent](#configcomponent)\\\u003e \\| `React.ForwardRefExoticComponent`\\\u003c[ConfigComponent](#configcomponent) \u0026 `React.RefAttributes`\\\u003cany\\\u003e\\\u003e | | - |\n| configTitle | The drawer title of configuring node | `string \\| ((node: INode, nodes: INode[]) =\u003e string)` | | - |\n| customRemove | Custom remove button | `boolean` | | false |\n| displayComponent | The Component of displaying node | `React.FC`\\\u003c[DisplayComponent](#displaycomponent)\\\u003e | | - |\n| initialNodeData | the initial data when add new node | `Record\u003cstring, any\u003e` | | - |\n| isStart | Is start node | `boolean` | | false |\n| isEnd | Is end node | `boolean` | | false |\n| isLoop | Is loop node | `boolean` | | false | 1.4.6 |\n| name | The name of node | `string` | ✓ | - |\n| removeConfirmTitle | The confirmation information before deleting the node. The [title](https://ant.design/components/popconfirm/#API) of Popconfirm | `string` \\| `ReactNode` | | Are you sure to remove this node? |\n| showPracticalBranchNode | - | `boolean` | | false | 1.1.0 |\n| showPracticalBranchRemove | - | `boolean` | | false | 1.1.0 |\n| type | The type of node, promise `start` is start node type and `end` is end node type | `string` | ✓ | - |\n\n### RegisterRemoteNode\n\n| Property | Description | Type | Required | Default | Version |\n| :------- | :------------- | :------- | :------- | :------ | :------ |\n| url | remote url | `string` | ✓ | - | 1.3.0 |\n| cssUrl | remote css url | `string` | | - | 1.3.0 |\n\n#### DisplayComponent\n\n| Property | Description | Type |\n| :------- | :---------------------------------------------------------------- | :----------------------------------- |\n| node | The all information of node (NodeContext is recommended since V1) | [Node](#node) |\n| nodes | (BuilderContext is recommended since V1) | [Node](#node)[] |\n| readonly | (BuilderContext is recommended since V1) | `boolean` |\n| remove | Remove node (useAction is recommended since V1) | `(nodes?: INode \\| INode[]) =\u003e void` |\n\n#### ConfigComponent\n\n| Property | Description | Type |\n| :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------- |\n| cancel | Called on cancel, used to close the drawer (useDrawer is recommended since V1) | `() =\u003e void` |\n| node | The all information of node (NodeContext is recommended since V1) | [Node](#node) |\n| nodes | (BuilderContext is recommended since V1) | [Node](#node)[] |\n| save | Called on save node data (automatically close the drawer, no need to call cancel). FlowBuilder will set the `validateStatusError` property according to the second param (useDrawer is recommended since V1) | `(values: any, validateStatusError?: boolean) =\u003e void` |\n\n#### AddableComponent\n\n| Property | Description | Type |\n| :------- | :---------------------------------------------------------------- | :----------------------- |\n| add | | `(type: string) =\u003e void` |\n| node | The all information of node (NodeContext is recommended since V1) | [Node](#node) |\n| nodes | (BuilderContext is recommended since V1) | [Node](#node)[] |\n\n### Node\n\n| Property | Description | Type |\n| :------------------ | :------------------------------------------------------------------------------------------------------------------------------ | :-------------- |\n| children | The condition nodes array of branch node, or the next flow of condition node | [Node](#node)[] |\n| configuring | Whether configuring of node. The display Component can highlight the node according to this property | `boolean` |\n| data | The data of node | `any` |\n| id | The unique id of node | `string` |\n| name | The name of node. Same as the `name` of the registered node | `string` |\n| path | The full path in FlowBuilder | `string[]` |\n| type | The type of node. Same as the `type` of the registered node | `string` |\n| validateStatusError | The Component of configuring node form validate failed. The display Component can highlight the node according to this property | `boolean` |\n\n### Context\n\n**Added since V1**\n\nIn the context of FlowBuilder the following contexts can be used\n\n#### BuilderContext\n\nContains [props](#flowbuilder) and state. The following is the state:\n\n| Property | Description | Type |\n| :-------------------------- | :------------------------------------- | :----------------------------------- |\n| zoomValue | current zoom value | `number` |\n| setZoomValue | set zoomValue | `(zoomValue: number) =\u003e void` |\n| historyRecords | history nodes records | `INode[][]` |\n| setHistoryRecords | set historyRecords | `(records: INode[][]) =\u003e void` |\n| activeHistoryRecordIndex | current index in history nodes records | `number` |\n| setActiveHistoryRecordIndex | set activeHistoryRecordIndex | `(index: number) =\u003e void` |\n| selectedNode | current selecred node | `INode \\| undefined` |\n| setSelectedNode | set selectedNode | `(node: INode \\| undefined) =\u003e void` |\n| drawerTitle | the title of Drawer | `string` |\n| setDrawerTitle | set drawerTitle | `(title: string) =\u003e void` |\n| dragType | dragged node type | `string` |\n| setDragType | set dragType | `(type: string) =\u003e void` |\n\n#### NodeContext\n\nGet the data of the node where it is used. For details [Node](#node)\n\n### Hooks\n\n**Added since V1**\n\nIn the context of FlowBuilder the following hooks can be used\n\n#### useAction\n\n| Property | Description | Type | Version |\n| :------------ | :-------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | :------ |\n| clickNode | click node | `(node: INode = useContext(NodeContext)) =\u003e void` |\n| addNode | add one node. (Get the current node through NodeContext when there is no node property) | `(node: INode, newNodeType: string) =\u003e void` \\| `(newNodeType: string) =\u003e void` |\n| addNodeInLoop | add one node in loop node. | `(newNodeType: string) =\u003e void` | 1.4.6 |\n| removeNode | remove one node or more nodes. | `(targetNode: INode \\| INode[] = useContext(NodeContext)) =\u003e void` |\n\n#### useDrawer\n\n| Property | Description | Type |\n| :---------- | :------------------------------------------------------------------------------------------ | :----------------------------------------------------- |\n| closeDrawer | close Drawer and clear selectedNode | `() =\u003e void` |\n| saveDrawer | save the content in Drawer (same as the save method in [ConfigComponent](#configcomponent)) | `(values: any, validateStatusError?: boolean) =\u003e void` |\n\n#### useZoom\n\n| Property | Description | Type |\n| :------- | :----------------------------------------------------------------------------------------- | :---------------------------------------- |\n| minZoom | minimum zoom value | `number` |\n| maxZoom | maximum zoom value | `number` |\n| zoom | change zoom value (same as the zoom method in [FlowBuilderInstance](#flowbuilderinstance)) | `(type: 'out' \\| 'in' \\| number) =\u003e void` |\n\n#### useHistory\n\n| Property | Description | Type |\n| :---------- | :------------------------------------------------------------------------------------- | :-------------------------------------------------------------- |\n| maxLength | Maximum length of history nodes records | `number` |\n| pushHistory | add history nodes record | `(record?: INode[] = useContext(BuilderContext).nodes) =\u003e void` |\n| history | undo, redo (same as the history method in [FlowBuilderInstance](#flowbuilderinstance)) | `(type: 'undo' \\| 'redo') =\u003e void` |\n\n#### useSort\n\n| Property | Description | Type | Version |\n| :------- | :--------------- | :------------------------------------------------ | :------ |\n| backward | sort to backward | `(node: INode = useContext(NodeContext)) =\u003e void` | 1.4.3 |\n| forward | sort to forward | `(node: INode = useContext(NodeContext)) =\u003e void` | 1.4.3 |\n| end | sort to end | `(node: INode = useContext(NodeContext)) =\u003e void` | 1.4.3 |\n| start | sort to start | `(node: INode = useContext(NodeContext)) =\u003e void` | 1.4.3 |\n","funding_links":[],"categories":["Javascript Libraries","技术方案"],"sub_categories":["Renderers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytedance%2Fflow-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytedance%2Fflow-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytedance%2Fflow-builder/lists"}