diff --git a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
index f0bd7a74..2f5378c2 100644
--- a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
+++ b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
@@ -56,11 +56,11 @@
 			};
 
 			nodes.push(newNode);
-			edges.push({
-				source: connectingNodeId,
-				target: id,
-				id: `${connectingNodeId}--${id}`
-			});
+			// edges.push({
+			// 	source: connectingNodeId,
+			// 	target: id,
+			// 	id: `${connectingNodeId}--${id}`
+			// });
 		}
 	};
 </script>
diff --git a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
index cb9eea2b..9fc68a5e 100644
--- a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
+++ b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
@@ -13,7 +13,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable<Node[]>([
+	const initialNodes = [
 		{
 			id: '1',
 			type: 'input',
@@ -32,9 +32,11 @@
 			data: { label: 'Output Node' },
 			position: { x: 300, y: 150 }
 		}
-	]);
+	];
 
-	const edges = writable([
+	let nodes = $state.raw<Node[]>(initialNodes);
+
+	let edges = $state.raw([
 		{
 			id: '1-2',
 			type: 'default',
@@ -50,7 +52,7 @@
 		}
 	]);
 
-	const svelteFlow = useSvelteFlow();
+	const { screenToFlowPosition } = $derived(useSvelteFlow());
 
 	const onDragOver = (event: DragEvent) => {
 		event.preventDefault();
@@ -68,7 +70,7 @@
 		}
 
 		const type = event.dataTransfer.getData('application/svelteflow') || 'default';
-		const position = svelteFlow.screenToFlowPosition({
+		const position = screenToFlowPosition({
 			x: event.clientX,
 			y: event.clientY
 		});
@@ -79,15 +81,14 @@
 			data: { label: `${type} node` }
 		};
 
-		$nodes.push(newNode);
-		$nodes = $nodes;
+		nodes = [...nodes, newNode];
 	};
 
-	$inspect($nodes);
+	$inspect(nodes);
 </script>
 
 <main>
-	<SvelteFlow {nodes} {edges} fitView on:dragover={onDragOver} on:drop={onDrop}>
+	<SvelteFlow bind:nodes bind:edges fitView ondragover={onDragOver} ondrop={onDrop}>
 		<Controls />
 		<Background variant={BackgroundVariant.Dots} />
 		<MiniMap />
diff --git a/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte b/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
index a143a94d..30cad2ee 100644
--- a/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
+++ b/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
@@ -10,7 +10,7 @@
 		event.dataTransfer.effectAllowed = 'move';
 	};
 
-	const { zoomIn, zoomOut, fitView, viewport, nodes } = useSvelteFlow();
+	// const { zoomIn, zoomOut, fitView, viewport, nodes } = $derived(useSvelteFlow());
 </script>
 
 <aside>
diff --git a/packages/svelte/src/lib/hooks/useConnection.svelte.ts b/packages/svelte/src/lib/hooks/useConnection.ts
similarity index 100%
rename from packages/svelte/src/lib/hooks/useConnection.svelte.ts
rename to packages/svelte/src/lib/hooks/useConnection.ts
diff --git a/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts b/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
index fcb0bd09..2b6b1ff0 100644
--- a/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
+++ b/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
@@ -1,4 +1,3 @@
-import { get } from 'svelte/store';
 import { errorMessages } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 8ac9da57..2cf48b73 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -33,7 +33,7 @@ export * from '$lib/utils';
 //hooks
 export * from '$lib/hooks/useSvelteFlow';
 export * from '$lib/hooks/useUpdateNodeInternals';
-export * from '$lib/hooks/useConnection.svelte';
+export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
 export * from '$lib/hooks/useHandleConnections';
 export * from '$lib/hooks/useNodesData';