diff --git a/packages/svelte/src/routes/customnode/+page.svelte b/packages/svelte/src/routes/customnode/+page.svelte
index 28d92038..e2c287a4 100644
--- a/packages/svelte/src/routes/customnode/+page.svelte
+++ b/packages/svelte/src/routes/customnode/+page.svelte
@@ -10,7 +10,8 @@
     Position,
     type Node,
     type NodeTypes,
-    type Edge
+    type Edge,
+    type Connection
   } from '../../lib/index';
   import { CustomNode } from './CustomNode';
 
@@ -102,9 +103,20 @@
       animated: true
     }
   ]);
+
+  const onConnect = (connection: Connection) => {
+    console.log('on connect', connection);
+  };
 </script>
 
-<SvelteFlow {nodes} {edges} {nodeTypes} style="--bgcolor: {$bgColor}" fitView>
+<SvelteFlow
+  {nodes}
+  {edges}
+  {nodeTypes}
+  style="--bgcolor: {$bgColor}"
+  fitView
+  on:connect={onConnect}
+>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />
diff --git a/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte b/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
index 3158de2a..639b7957 100644
--- a/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
+++ b/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
@@ -6,10 +6,16 @@
   export let data: { color: string; onChange: () => void } = { color: '#111', onChange: () => {} };
 </script>
 
-<Handle type="target" position={Position.Left} />
+<Handle type="target" position={Position.Left} on:connect />
 <div>
   Custom Color Picker Node: <strong>{data.color}</strong>
 </div>
 <input class="nodrag" type="color" on:input={data.onChange} value={data.color} />
-<Handle type="source" position={Position.Right} id="a" style="top: 10px;" />
-<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;" />
+<Handle type="source" position={Position.Right} id="a" style="top: 10px;" on:connect />
+<Handle
+  type="source"
+  position={Position.Right}
+  id="b"
+  style="top: auto; bottom: 10px;"
+  on:connect
+/>