Flexible Flowchart Builder For React

A flexible and customizable flow builder for visualizing your workflows.

How to use it:

1. Install and import the Flowchart builder.

# Yarn
$ yarn add react-flow-builder

$ npm i react-flow-builder
import React, { useState } from 'react';
import FlowBuilder from 'react-flow-builder';

2. Register initial nodes.

const registerNodes = [
    type: 'start',
    name: 'start',
    type: 'end',
    name: 'end',
    type: 'common',
    name: 'common',
    type: 'branch',
    name: 'branch',
    conditionNodeType: 'condition',
    type: 'condition',
    name: 'condition',

3. Render the flowchart.

export default function () {
  const [nodes, setNodes] = useState([]);
  return (


Flexible Flowchart Builder For React

Download Details:

Author: bytedance

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/bytedance/flow-builder

License: MIT

You Might Be Interested In:

Add Comment