Flow Builder

Visually wire a no-code flow — drag form / condition / action nodes onto a canvas, edit each node with the embedded builders, and see the flow JSON live. (Phase 1: edit only, no execution.)

FLOW BUILDER

React Flow

◆ 6 nodes · 6 edges

{
  "version": 1,
  "nodes": [
    {
      "id": "start",
      "type": "start",
      "position": {
        "x": 40,
        "y": 127
      }
    },
    {
      "id": "form-1",
      "type": "form",
      "position": {
        "x": 250,
        "y": 119
      },
      "config": {
        "version": 1,
        "fields": [
          {
            "key": "days",
            "label": "Days",
            "component": "Number",
            "dataType": "number"
          }
        ]
      }
    },
    {
      "id": "cond-1",
      "type": "condition",
      "position": {
        "x": 460,
        "y": 127
      }
    },
    {
      "id": "act-1",
      "type": "action",
      "position": {
        "x": 670,
        "y": 29
      },
      "config": {
        "kind": "notify",
        "params": {}
      }
    },
    {
      "id": "act-2",
      "type": "action",
      "position": {
        "x": 670,
        "y": 209
      },
      "config": {
        "kind": "db.update",
        "params": {}
      }
    },
    {
      "id": "end",
      "type": "end",
      "position": {
        "x": 880,
        "y": 127
      }
    }
  ],
  "edges": [
    {
      "id": "e1",
      "source": "start",
      "target": "form-1"
    },
    {
      "id": "e2",
      "source": "form-1",
      "target": "cond-1",
      "trigger": "onSubmit"
    },
    {
      "id": "e3",
      "source": "cond-1",
      "target": "act-1",
      "sourceHandle": "yes",
      "label": "yes"
    },
    {
      "id": "e4",
      "source": "cond-1",
      "target": "act-2",
      "sourceHandle": "no",
      "label": "no"
    },
    {
      "id": "e5",
      "source": "act-1",
      "target": "end"
    },
    {
      "id": "e6",
      "source": "act-2",
      "target": "end"
    }
  ]
}

Flow JSON