Playground

Controls: Pan: Click & drag | Zoom: Mouse wheel | Connect: Drag from output to input | Delete: Select & press Delete/Backspace | Waypoints: Ctrl+click edge to add, Ctrl+click waypoint to delete | Groups: Drag nodes into/out of groups | Selection: Ctrl+drag to select multiple, Ctrl+A to select all | Copy/Paste: Ctrl+C/V (works across browser tabs!) | Virtual Wire: connect into channel 1, exit from one or more channel 1 portals without a long pair cable

Data Sources

Text Input

Number Input

API Data

Text

Number

Boolean

Transform

Text

Number

Boolean

Result

Merge

Combines inputs

In 1

In 2

Aggregator

Portal In

any

Portal Out

any

Portal Out

any

Outputs

Result A

Result B

Result A Mirror

Remember to connect all data sources!

Output nodes receive processed data here

Markdown support!
italic and code
kaykay repo

Live JSON

Edit valid JSON to update the canvas.

{
  "nodes": [
    {
      "id": "group-1",
      "type": "group",
      "position": {
        "x": 40,
        "y": 40
      },
      "width": 300,
      "height": 350,
      "data": {
        "label": "Data Sources",
        "color": "#22c55e"
      }
    },
    {
      "id": "node-1",
      "type": "input",
      "position": {
        "x": 30,
        "y": 50
      },
      "data": {
        "label": "Text Input"
      },
      "parent_id": "group-1"
    },
    {
      "id": "node-2",
      "type": "input",
      "position": {
        "x": 30,
        "y": 120
      },
      "data": {
        "label": "Number Input"
      },
      "parent_id": "group-1"
    },
    {
      "id": "node-3",
      "type": "datasource",
      "position": {
        "x": 30,
        "y": 190
      },
      "data": {
        "label": "API Data"
      },
      "parent_id": "group-1"
    },
    {
      "id": "node-4",
      "type": "labeled",
      "position": {
        "x": 420,
        "y": 60
      },
      "data": {
        "label": "Transform"
      }
    },
    {
      "id": "node-5",
      "type": "process",
      "position": {
        "x": 420,
        "y": 200
      },
      "data": {
        "operation": "Merge",
        "description": "Combines inputs"
      }
    },
    {
      "id": "node-6",
      "type": "multihandle",
      "position": {
        "x": 420,
        "y": 340
      },
      "data": {
        "label": "Aggregator"
      }
    },
    {
      "id": "group-2",
      "type": "group",
      "position": {
        "x": 840,
        "y": 100
      },
      "width": 280,
      "height": 380,
      "data": {
        "label": "Outputs",
        "color": "#8b5cf6"
      }
    },
    {
      "id": "node-7",
      "type": "output",
      "position": {
        "x": 30,
        "y": 50
      },
      "data": {
        "title": "Result A"
      },
      "parent_id": "group-2"
    },
    {
      "id": "node-8",
      "type": "output",
      "position": {
        "x": 30,
        "y": 150
      },
      "data": {
        "title": "Result B"
      },
      "parent_id": "group-2"
    },
    {
      "id": "node-9",
      "type": "output",
      "position": {
        "x": 30,
        "y": 250
      },
      "data": {
        "title": "Result A Mirror"
      },
      "parent_id": "group-2"
    },
    {
      "id": "sticky-1",
      "type": "sticky",
      "position": {
        "x": 450,
        "y": 500
      },
      "width": 180,
      "height": 100,
      "data": {
        "text": "Remember to connect\nall data sources!",
        "color": "#fef08a"
      }
    },
    {
      "id": "sticky-2",
      "type": "sticky",
      "position": {
        "x": 750,
        "y": 420
      },
      "width": 200,
      "height": 120,
      "data": {
        "text": "Output nodes receive\nprocessed data here",
        "color": "#bbf7d0"
      }
    },
    {
      "id": "sticky-3",
      "type": "markdown-sticky",
      "position": {
        "x": 100,
        "y": 450
      },
      "width": 220,
      "height": 140,
      "data": {
        "text": "**Markdown** support!\n_italic_ and `code`\n[kaykay repo](https://github.com/rakunlabs/kaykay)",
        "color": "#bfdbfe"
      }
    }
  ],
  "edges": [
    {
      "id": "edge-1",
      "source": "node-1",
      "source_handle": "out",
      "target": "node-4",
      "target_handle": "text",
      "type": "bezier"
    },
    {
      "id": "edge-2",
      "source": "node-2",
      "source_handle": "out",
      "target": "node-4",
      "target_handle": "number",
      "type": "bezier"
    },
    {
      "id": "edge-5",
      "source": "node-4",
      "source_handle": "out",
      "target": "node-6",
      "target_handle": "in-1",
      "type": "bezier"
    },
    {
      "id": "edge-6",
      "source": "node-5",
      "source_handle": "output",
      "target": "node-6",
      "target_handle": "in-2",
      "type": "bezier"
    },
    {
      "id": "virtual:edge-7:edge-7-portal",
      "source": "node-6",
      "source_handle": "out",
      "target": "node-7",
      "target_handle": "in",
      "type": "bezier",
      "style": "dashed",
      "color": "#38bdf8",
      "data": {
        "kaykay_virtual_wire": {
          "version": 1,
          "pair_id": "main-bus",
          "channel_id": "1",
          "input_node_id": "wire-in-main",
          "output_node_id": "wire-out-main",
          "input_edge_id": "edge-7",
          "output_edge_id": "edge-7-portal"
        }
      }
    },
    {
      "id": "virtual:edge-7:edge-7-portal-mirror",
      "source": "node-6",
      "source_handle": "out",
      "target": "node-9",
      "target_handle": "in",
      "type": "bezier",
      "style": "dashed",
      "color": "#38bdf8",
      "data": {
        "kaykay_virtual_wire": {
          "version": 1,
          "pair_id": "main-bus",
          "channel_id": "1",
          "input_node_id": "wire-in-main",
          "output_node_id": "wire-out-main-mirror",
          "input_edge_id": "edge-7",
          "output_edge_id": "edge-7-portal-mirror"
        }
      }
    },
    {
      "id": "virtual:edge-8:edge-8-portal",
      "source": "node-4",
      "source_handle": "out",
      "target": "node-8",
      "target_handle": "in",
      "type": "bezier",
      "style": "dashed",
      "color": "#38bdf8",
      "data": {
        "kaykay_virtual_wire": {
          "version": 1,
          "pair_id": "main-bus",
          "channel_id": "2",
          "input_node_id": "wire-in-main",
          "output_node_id": "wire-out-main",
          "input_edge_id": "edge-8",
          "output_edge_id": "edge-8-portal"
        }
      }
    }
  ],
  "kaykay": {
    "version": 1,
    "virtual_wires": {
      "version": 1,
      "nodes": [
        {
          "id": "wire-in-main",
          "type": "virtual-wire-input",
          "position": {
            "x": 620,
            "y": 225
          },
          "data": {
            "pair_id": "main-bus",
            "pair_label": "Main Bus",
            "label": "Main Bus In",
            "color": "#38bdf8",
            "channels": [
              {
                "id": "1",
                "label": "1"
              },
              {
                "id": "2",
                "label": "2"
              }
            ]
          }
        },
        {
          "id": "wire-out-main",
          "type": "virtual-wire-output",
          "position": {
            "x": 630,
            "y": 20
          },
          "data": {
            "pair_id": "main-bus",
            "pair_label": "Main Bus",
            "label": "Main Bus Out",
            "color": "#38bdf8",
            "channels": [
              {
                "id": "1",
                "label": "1"
              },
              {
                "id": "2",
                "label": "2"
              }
            ]
          }
        },
        {
          "id": "wire-out-main-mirror",
          "type": "virtual-wire-output",
          "position": {
            "x": 630,
            "y": 360
          },
          "data": {
            "pair_id": "main-bus",
            "pair_label": "Main Bus",
            "label": "Main Bus Mirror Out",
            "color": "#38bdf8",
            "channels": [
              {
                "id": "1",
                "label": "1"
              },
              {
                "id": "2",
                "label": "2"
              }
            ]
          }
        }
      ],
      "edges": [
        {
          "id": "edge-7",
          "source": "node-6",
          "source_handle": "out",
          "target": "wire-in-main",
          "target_handle": "in-1",
          "type": "bezier"
        },
        {
          "id": "edge-7-portal",
          "source": "wire-out-main",
          "source_handle": "out-1",
          "target": "node-7",
          "target_handle": "in",
          "type": "bezier",
          "style": "dashed",
          "color": "#38bdf8"
        },
        {
          "id": "edge-7-portal-mirror",
          "source": "wire-out-main-mirror",
          "source_handle": "out-1",
          "target": "node-9",
          "target_handle": "in",
          "type": "bezier",
          "style": "dashed",
          "color": "#38bdf8"
        },
        {
          "id": "edge-8",
          "source": "node-4",
          "source_handle": "out",
          "target": "wire-in-main",
          "target_handle": "in-2",
          "type": "bezier"
        },
        {
          "id": "edge-8-portal",
          "source": "wire-out-main",
          "source_handle": "out-2",
          "target": "node-8",
          "target_handle": "in",
          "type": "bezier",
          "style": "dashed",
          "color": "#38bdf8"
        }
      ]
    }
  }
}

Synced with canvas