Guides -> Custom Nodes -> Using Multiple Handles

src/App.tsx

@@ -1,16 +1,17 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import ReactFlow, {
-  Background,
+  addEdge,
-  Controls,
   applyEdgeChanges,
   applyNodeChanges,
-  addEdge,
+  Background,
-  Node,
-  Edge,
-  NodeChange,
-  EdgeChange,
   Connection,
+  Controls,
+  Edge,
+  EdgeChange,
+  Node,
+  NodeChange,
   NodeTypes,
+  Position,
 } from 'reactflow';
 
 import TextUpdaterNode from './components/TextUpdaterNode';
@@ -22,7 +23,10 @@ const rfStyle = {
   backgroundColor: '#B8CEFF',
 };
 
-const initialEdges: Edge[] = [];
+const initialEdges: Edge[] = [
+  { id: 'edge-1', source: 'node-1', target: 'node-2', sourceHandle: 'a' },
+  { id: 'edge-2', source: 'node-1', target: 'node-3', sourceHandle: 'b' },
+];
 
 const initialNodes: Node[] = [
   {
@@ -31,6 +35,20 @@ const initialNodes: Node[] = [
     position: { x: 0, y: 0 },
     data: { value: 123 },
   },
+  {
+    id: 'node-2',
+    type: 'output',
+    targetPosition: Position.Top,
+    position: { x: 0, y: 200 },
+    data: { label: 'node 2' },
+  },
+  {
+    id: 'node-3',
+    type: 'output',
+    targetPosition: Position.Top,
+    position: { x: 200, y: 200 },
+    data: { label: 'node 3' },
+  },
 ];
 
 const nodeTypes: NodeTypes = { textUpdater: TextUpdaterNode };