diff --git a/examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte b/examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte
index 7cca42c0..4f0ac60f 100644
--- a/examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte
@@ -1,15 +1,7 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
-
-	interface Props {
-		isConnectable: $$Props['isConnectable'];
-		[key: string]: any
-	}
-
-	let { isConnectable, ...rest }: Props = $props();
-	rest;
+	let { isConnectable }: NodeProps = $props();
 
 	const handleStyle = 'width: 10px; height: 10px; bottom: -5px;';
 </script>
diff --git a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
index eb26b88d..dc3abb13 100644
--- a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
@@ -2,16 +2,7 @@
 	import type { Writable } from 'svelte/store';
 	import { Handle, Position, type NodeProps, type Node } from '@xyflow/svelte';
 
-	type $$Props = NodeProps<Node<{ colorStore: Writable<string> }>>;
-
-	interface Props {
-		data: $$Props['data'];
-		[key: string]: any
-	}
-
-	let { data, ...rest }: Props = $props();
-
-	rest;
+	let { data }: NodeProps<Node<{ colorStore: Writable<string> }>> = $props();
 
 	const { colorStore } = data;
 </script>
diff --git a/examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte b/examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte
index d6be0c52..ce5b27a9 100644
--- a/examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte
+++ b/examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps, type Connection } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
-
-	interface Props {
-		id: $$Props['id'];
-		[key: string]: any
-	}
-
-	let { id, ...rest }: Props = $props();
+	let { id }: NodeProps = $props();
 
 	function onConnectTarget(connection: Connection[]) {
 		console.log('connect target', connection);
@@ -25,8 +18,6 @@
 	function onDisconnectSource(connection: Connection[]) {
 		console.log('disconnect source', connection);
 	}
-
-	rest;
 </script>
 
 <div class="custom">
diff --git a/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte b/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
index 1f8c2a78..ccbe336c 100644
--- a/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
@@ -1,15 +1,7 @@
 <script lang="ts">
 	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
-	rest;
-
-	interface Props {
-		data: $$Props['data'];
-		[key: string]: any
-	}
-
-	let { data, ...rest }: Props = $props();
+	let { data }: NodeProps = $props();
 </script>
 
 <NodeToolbar
diff --git a/examples/svelte/src/routes/examples/overview/CustomNode.svelte b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
index e7e88120..2f687bdd 100644
--- a/examples/svelte/src/routes/examples/overview/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
 	import { Handle, Position, type BuiltInNode, type NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps<BuiltInNode>;
-	rest;
-
-	interface Props {
-		data?: { label: string };
-		positionAbsoluteX?: number;
-		positionAbsoluteY?: number;
-		[key: string]: any
-	}
-
-	let { data = { label: 'Node' }, positionAbsoluteX = 0, positionAbsoluteY = 0, ...rest }: Props = $props();
+	let {
+		data = { label: 'Node' },
+		positionAbsoluteX = 0,
+		positionAbsoluteY = 0
+	}: NodeProps = $props();
 </script>
 
 <div class="custom">
diff --git a/examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte b/examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte
index 41d59778..d211e6fb 100644
--- a/examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte
+++ b/examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte
@@ -1,15 +1,7 @@
 <script lang="ts">
 	import type { BuiltInNode, NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps<BuiltInNode>;
-	rest;
-
-	interface Props {
-		data?: { label: string };
-		[key: string]: any
-	}
-
-	let { data = { label: 'Node' }, ...rest }: Props = $props();
+	let { data = { label: 'Node' } }: NodeProps<BuiltInNode> = $props();
 </script>
 
 <div class="custom">
diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
index 8d5f0724..c28e36b2 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
@@ -8,22 +8,16 @@
 	} from '@xyflow/svelte';
 	import { isTextNode, type MyNode } from './+page.svelte';
 
-	type $$Props = NodeProps;
-
-	interface Props {
-		id: $$Props['id'];
-		[key: string]: any
-	}
-
-	let { id, ...rest }: Props = $props();
-	rest;
+	let { id }: NodeProps = $props();
 
 	const connections = useHandleConnections({
 		nodeId: id,
 		type: 'target'
 	});
 
-	let nodeData = $derived(useNodesData<MyNode>($connections.map((connection) => connection.source)));
+	let nodeData = $derived(
+		useNodesData<MyNode>($connections.map((connection) => connection.source))
+	);
 	let textNodes = $derived($nodeData.filter(isTextNode));
 </script>
 
diff --git a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
index cb2a0335..10ea8e70 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
@@ -1,18 +1,9 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps, useSvelteFlow } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
-
-	interface Props {
-		id: $$Props['id'];
-		data: $$Props['data'];
-		[key: string]: any
-	}
-
-	let { id, data, ...rest }: Props = $props();
+	let { id, data }: NodeProps = $props();
 
 	const { updateNodeData } = useSvelteFlow();
-	rest;
 </script>
 
 <div class="custom">
diff --git a/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte b/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
index a041de86..fcbd852f 100644
--- a/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
@@ -1,20 +1,11 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps, useUpdateNodeInternals } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
-
-	interface Props {
-		id: $$Props['id'];
-		[key: string]: any
-	}
-
-	let { id, ...rest }: Props = $props();
-	rest;
+	let { id }: NodeProps = $props();
 
 	const updateNodeInternals = useUpdateNodeInternals();
 
 	let handleCount = $state(1);
-	
 
 	const onClick = () => {
 		handleCount += 1;
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9e1f81e3..89ccce66 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -79,7 +79,7 @@
     "svelte-eslint-parser": "^0.43.0",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "typescript": "5.4.2"
+    "typescript": "^5.5.0"
   },
   "peerDependencies": {
     "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 4fc060a6..b5cfb65d 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -19,79 +19,93 @@
   import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
   import { useColorModeClass } from '$lib/hooks/useColorModeClass';
 
-  type $$Props = SvelteFlowProps;
+  let {
+    id = '1',
+    nodes,
+    edges,
+    fitView,
+    fitViewOptions,
+    minZoom,
+    maxZoom,
+    initialViewport,
+    viewport,
+    nodeTypes,
+    edgeTypes,
+    selectionKey,
+    selectionMode,
+    panActivationKey,
+    multiSelectionKey,
+    zoomActivationKey,
+    nodesDraggable,
+    nodesConnectable,
+    nodeDragThreshold,
+    elementsSelectable,
+    snapGrid,
+    deleteKey,
+    connectionRadius,
+    connectionLineType,
+    connectionMode = ConnectionMode.Strict,
+    connectionLineStyle = '',
+    connectionLineContainerStyle = '',
+    onMoveStart,
+    onMove,
+    onMoveEnd,
+    isValidConnection,
+    translateExtent,
+    nodeExtent,
+    onlyRenderVisibleElements,
+    panOnScrollMode = PanOnScrollMode.Free,
+    preventScrolling = true,
+    zoomOnScroll = true,
+    zoomOnDoubleClick = true,
+    zoomOnPinch = true,
+    panOnScroll = false,
+    panOnDrag = true,
+    selectionOnDrag,
+    autoPanOnConnect = true,
+    autoPanOnNodeDrag = true,
+    onerror,
+    ondelete,
+    onedgecreate,
+    attributionPosition,
+    proOptions,
+    defaultEdgeOptions,
+    width,
+    height,
+    colorMode = 'light',
+    onconnect,
+    onconnectstart,
+    onconnectend,
+    onbeforedelete,
+    oninit,
+    nodeOrigin,
+    paneClickDistance = 0,
+    nodeClickDistance = 0,
+    defaultMarkerColor = '#b1b1b7',
+    style,
+    class: className,
+    connectionLine,
+    children,
+    onnodeclick,
+    onnodecontextmenu,
+    onnodedrag,
+    onnodedragstart,
+    onnodedragstop,
+    onnodemouseenter,
+    onnodemousemove,
+    onnodemouseleave,
+    onselectionclick,
+    onselectioncontextmenu,
+    onedgeclick,
+    onedgecontextmenu,
+    onedgemouseenter,
+    onedgemouseleave,
+    ...rest
+  }: SvelteFlowProps = $props();
 
-  export let id: $$Props['id'] = '1';
-  export let nodes: $$Props['nodes'];
-  export let edges: $$Props['edges'];
-  export let fitView: $$Props['fitView'] = undefined;
-  export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
-  export let minZoom: $$Props['minZoom'] = undefined;
-  export let maxZoom: $$Props['maxZoom'] = undefined;
-  export let initialViewport: $$Props['initialViewport'] = undefined;
-  export let viewport: $$Props['viewport'] = undefined;
-  export let nodeTypes: $$Props['nodeTypes'] = undefined;
-  export let edgeTypes: $$Props['edgeTypes'] = undefined;
-  export let selectionKey: $$Props['selectionKey'] = undefined;
-  export let selectionMode: $$Props['selectionMode'] = undefined;
-  export let panActivationKey: $$Props['panActivationKey'] = undefined;
-  export let multiSelectionKey: $$Props['multiSelectionKey'] = undefined;
-  export let zoomActivationKey: $$Props['zoomActivationKey'] = undefined;
-  export let nodesDraggable: $$Props['nodesDraggable'] = undefined;
-  export let nodesConnectable: $$Props['nodesConnectable'] = undefined;
-  export let nodeDragThreshold: $$Props['nodeDragThreshold'] = undefined;
-  export let elementsSelectable: $$Props['elementsSelectable'] = undefined;
-  export let snapGrid: $$Props['snapGrid'] = undefined;
-  export let deleteKey: $$Props['deleteKey'] = undefined;
-  export let connectionRadius: $$Props['connectionRadius'] = undefined;
-  export let connectionLineType: $$Props['connectionLineType'] = undefined;
-  export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict;
-  export let connectionLineStyle: $$Props['connectionLineStyle'] = '';
-  export let connectionLineContainerStyle: $$Props['connectionLineContainerStyle'] = '';
-  export let onMoveStart: $$Props['onMoveStart'] = undefined;
-  export let onMove: $$Props['onMove'] = undefined;
-  export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
-  export let isValidConnection: $$Props['isValidConnection'] = undefined;
-  export let translateExtent: $$Props['translateExtent'] = undefined;
-  export let nodeExtent: $$Props['nodeExtent'] = undefined;
-  export let onlyRenderVisibleElements: $$Props['onlyRenderVisibleElements'] = undefined;
-  export let panOnScrollMode: $$Props['panOnScrollMode'] = PanOnScrollMode.Free;
-  export let preventScrolling: $$Props['preventScrolling'] = true;
-  export let zoomOnScroll: $$Props['zoomOnScroll'] = true;
-  export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'] = true;
-  export let zoomOnPinch: $$Props['zoomOnPinch'] = true;
-  export let panOnScroll: $$Props['panOnScroll'] = false;
-  export let panOnDrag: $$Props['panOnDrag'] = true;
-  export let selectionOnDrag: $$Props['selectionOnDrag'] = undefined;
-  export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true;
-  export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
-  export let onerror: $$Props['onerror'] = undefined;
-  export let ondelete: $$Props['ondelete'] = undefined;
-  export let onedgecreate: $$Props['onedgecreate'] = undefined;
-  export let attributionPosition: $$Props['attributionPosition'] = undefined;
-  export let proOptions: $$Props['proOptions'] = undefined;
-  export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
-  export let width: $$Props['width'] = undefined;
-  export let height: $$Props['height'] = undefined;
-  export let colorMode: $$Props['colorMode'] = 'light';
-  export let onconnect: $$Props['onconnect'] = undefined;
-  export let onconnectstart: $$Props['onconnectstart'] = undefined;
-  export let onconnectend: $$Props['onconnectend'] = undefined;
-  export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
-  export let oninit: $$Props['oninit'] = undefined;
-  export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
-  export let paneClickDistance: $$Props['paneClickDistance'] = 0;
-  export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
-
-  export let defaultMarkerColor = '#b1b1b7';
-
-  export let style: $$Props['style'] = undefined;
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-
-  let domNode: HTMLDivElement;
-  let clientWidth: number;
-  let clientHeight: number;
+  let domNode = $state<HTMLDivElement>();
+  let clientWidth = $state<number>();
+  let clientHeight = $state<number>();
 
   const initViewport = $viewport || initialViewport;
 
@@ -108,9 +122,9 @@
       });
 
   onMount(() => {
-    store.width.set(clientWidth);
-    store.height.set(clientHeight);
-    store.domNode.set(domNode);
+    store.width.set(clientWidth!);
+    store.height.set(clientHeight!);
+    store.domNode.set(domNode!);
 
     store.syncNodeStores(nodes);
     store.syncEdgeStores(edges);
@@ -139,26 +153,26 @@
   });
 
   // Update width & height on resize
-  $: {
+  $effect.pre(() => {
     if (clientWidth !== undefined && clientHeight !== undefined) {
       store.width.set(clientWidth);
       store.height.set(clientHeight);
     }
-  }
+  });
 
   // Call oninit once when flow is intialized
   const { initialized } = store;
-  let onInitCalled = false;
-  $: {
+  let onInitCalled = $state(false);
+  $effect.pre(() => {
     if (!onInitCalled && $initialized) {
       oninit?.();
       onInitCalled = true;
     }
-  }
+  });
 
   // this updates the store for simple changes
   // where the prop names equals the store name
-  $: {
+  $effect(() => {
     const updatableProps: UpdatableStoreProps = {
       flowId: id,
       connectionLineType,
@@ -186,18 +200,20 @@
     };
 
     updateStoreByKeys(store, updatableProps);
-  }
-
-  $: updateStore(store, {
-    nodeTypes,
-    edgeTypes,
-    minZoom,
-    maxZoom,
-    translateExtent,
-    paneClickDistance
   });
 
-  $: colorModeClass = useColorModeClass(colorMode);
+  $effect(() => {
+    updateStore(store, {
+      nodeTypes,
+      edgeTypes,
+      minZoom,
+      maxZoom,
+      translateExtent,
+      paneClickDistance
+    });
+  });
+
+  let colorModeClass = $derived(useColorModeClass(colorMode));
 </script>
 
 <div
@@ -207,9 +223,7 @@
   {style}
   class={cc(['svelte-flow', className, $colorModeClass])}
   data-testid="svelte-flow__wrapper"
-  on:dragover
-  on:drop
-  {...$$restProps}
+  {...rest}
   role="application"
 >
   <KeyHandler
@@ -242,44 +256,47 @@
       <ViewportComponent>
         <EdgeRenderer
           on:edgeclick
-          on:edgecontextmenu
-          on:edgemouseenter
-          on:edgemouseleave
+          {onedgeclick}
+          {onedgecontextmenu}
+          {onedgemouseenter}
+          {onedgemouseleave}
           {defaultEdgeOptions}
         />
-        <ConnectionLine
+        <!-- <ConnectionLine
           containerStyle={connectionLineContainerStyle}
           style={connectionLineStyle}
-          isCustomComponent={$$slots.connectionLine}
+          isCustomComponent={connectionLine}
         >
-          <slot name="connectionLine" slot="connectionLine" />
-        </ConnectionLine>
-        <div class="svelte-flow__edgelabel-renderer" />
-        <div class="svelte-flow__viewport-portal" />
+          {#snippet connectionLine()}
+            {@render connectionLine_render?.()}
+          {/snippet}
+        </ConnectionLine> -->
+        <div class="svelte-flow__edgelabel-renderer"></div>
+        <div class="svelte-flow__viewport-portal"></div>
         <NodeRenderer
           {nodeClickDistance}
-          on:nodeclick
-          on:nodemouseenter
-          on:nodemousemove
-          on:nodemouseleave
-          on:nodedragstart
-          on:nodedrag
-          on:nodedragstop
-          on:nodecontextmenu
+          {onnodeclick}
+          {onnodecontextmenu}
+          {onnodemouseenter}
+          {onnodemousemove}
+          {onnodemouseleave}
+          {onnodedrag}
+          {onnodedragstart}
+          {onnodedragstop}
         />
         <NodeSelection
-          on:selectionclick
-          on:selectioncontextmenu
-          on:nodedragstart
-          on:nodedrag
-          on:nodedragstop
+          {onselectionclick}
+          {onselectioncontextmenu}
+          {onnodedrag}
+          {onnodedragstart}
+          {onnodedragstop}
         />
       </ViewportComponent>
       <UserSelection />
     </Pane>
   </Zoom>
   <Attribution {proOptions} position={attributionPosition} />
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 0963424e..1e6afd81 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -34,319 +34,327 @@ import type {
   IsValidConnection
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
+import type { Snippet } from 'svelte';
+import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$lib/types/events';
 
-export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
-  /** The id of the flow
-   *
-   * This is necessary if you want to render multiple flows.
-   * @optional
-   */
-  id?: string;
-  /** An array of nodes to render in a controlled flow.
-   * @example
-   * const nodes = writable([
-   *  {
-   *    id: 'node-1',
-   *    type: 'input',
-   *    data: { label: 'Node 1' },
-   *    position: { x: 250, y: 50 }
-   *  }
-   * ]);
-   */
-  nodes: Writable<Node[]>;
-  /** An array of edges to render in a controlled flow.
-   * @example
-   * const edges = writable([
-   *  {
-   *    id: 'edge-1-2',
-   *    source: 'node-1',
-   *    target: 'node-2',
-   *  }
-   * ]);
-   */
-  edges: Writable<Edge[]>;
-  /** Custom node types to be available in a flow.
-   *
-   * Svelte Flow matches a node's type to a component in the nodeTypes object.
-   * @example
-   * import CustomNode from './CustomNode.svelte';
-   *
-   * const nodeTypes = { nameOfNodeType: CustomNode };
-   */
-  nodeTypes?: NodeTypes;
-  /** Custom edge types to be available in a flow.
-   *
-   * Svelte Flow matches an edge's type to a component in the edgeTypes object.
-   * @example
-   * import CustomEdge from './CustomEdge.svelte';
-   *
-   * const edgeTypes = { nameOfEdgeType: CustomEdge };
-   */
-  edgeTypes?: EdgeTypes;
-  /** Pressing down this key you can select multiple elements with a selection box.
-   * @default 'Shift'
-   */
-  selectionKey?: KeyDefinition | KeyDefinition[] | null;
-  /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
-   *
-   * By setting this prop to null you can disable this functionality.
-   * @default 'Space'
-   */
-  panActivationKey?: KeyDefinition | KeyDefinition[] | null;
-  /** Pressing down this key deletes all selected nodes & edges.
-   * @default 'Backspace'
-   */
-  deleteKey?: KeyDefinition | KeyDefinition[] | null;
-  /** Pressing down this key you can select multiple elements by clicking.
-   * @default 'Meta' for macOS, "Ctrl" for other systems
-   */
-  multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
-  /** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
-   *
-   * By setting this prop to null you can disable this functionality.
-   * @default 'Meta' for macOS, "Ctrl" for other systems
-   * */
-  zoomActivationKey?: KeyDefinition | KeyDefinition[] | null;
-  /** If set, initial viewport will show all nodes & edges */
-  fitView?: boolean;
-  /** Options to be used in combination with fitView
-   * @example
-   * const fitViewOptions = {
-   *  padding: 0.1,
-   *  includeHiddenNodes: false,
-   *  minZoom: 0.1,
-   *  maxZoom: 1,
-   *  duration: 200,
-   *  nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit
-   * };
-   */
-  fitViewOptions?: FitViewOptions;
-  /** Defines nodes relative position to its coordinates
-   * @example
-   * [0, 0] // default, top left
-   * [0.5, 0.5] // center
-   * [1, 1] // bottom right
-   */
-  nodeOrigin?: NodeOrigin;
-  /** With a threshold greater than zero you can control the distinction between node drag and click events.
-   *
-   * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
-   * @default 1
-   */
-  nodeDragThreshold?: number;
-  /** Distance that the mouse can move between mousedown/up that will trigger a click
-   * @default 0
-   */
-  paneClickDistance?: number;
-  /** Distance that the mouse can move between mousedown/up that will trigger a click
-   * @default 0
-   */
-  nodeClickDistance?: number;
-  /** Minimum zoom level
-   * @default 0.5
-   */
-  minZoom?: number;
-  /** Maximum zoom level
-   * @default 2
-   */
-  maxZoom?: number;
-  /** Sets the initial position and zoom of the viewport.
-   *
-   * If a default viewport is provided but fitView is enabled, the default viewport will be ignored.
-   * @example
-   * const initialViewport = {
-   *  zoom: 0.5,
-   *  position: { x: 0, y: 0 }
-   * };
-   */
-  initialViewport?: Viewport;
-  /** Custom viewport writable to be used instead of internal one */
-  viewport?: Writable<Viewport>;
-  /** The radius around a handle where you drop a connection line to create a new edge.
-   * @default 20
-   */
-  connectionRadius?: number;
-  /** 'strict' connection mode will only allow you to connect source handles to target handles.
-   *
-   * 'loose' connection mode will allow you to connect handles of any type to one another.
-   * @default 'strict'
-   */
-  connectionMode?: ConnectionMode;
-  /** Styles to be applied to the connection line */
-  connectionLineStyle?: string;
-  /** Styles to be applied to the container of the connection line */
-  connectionLineContainerStyle?: string;
-  /** When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.
-   * @default 'full'
-   */
-  selectionMode?: SelectionMode;
-  /** Grid all nodes will snap to
-   * @example [20, 20]
-   */
-  snapGrid?: SnapGrid;
-  /** Color of edge markers
-   * @example "#b1b1b7"
-   */
-  defaultMarkerColor?: string;
-  /** Controls if all nodes should be draggable
-   * @default true
-   */
-  nodesDraggable?: boolean;
-  /** Controls if all nodes should be connectable to each other
-   * @default true
-   */
-  nodesConnectable?: boolean;
-  /** Controls if all elements should (nodes & edges) be selectable
-   * @default true
-   */
-  elementsSelectable?: boolean;
-  /** By default the viewport extends infinitely. You can use this prop to set a boundary.
-   *
-   * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
-   * @example [[-1000, -10000], [1000, 1000]]
-   */
-  translateExtent?: CoordinateExtent;
-  /** By default the nodes can be placed anywhere. You can use this prop to set a boundary.
-   *
-   * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
-   * @example [[-1000, -10000], [1000, 1000]]
-   */
-  nodeExtent?: CoordinateExtent;
-  /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
-   * @default true
-   */
-  preventScrolling?: boolean;
-  /** Controls if the viewport should zoom by scrolling inside the container */
-  zoomOnScroll?: boolean;
-  /** Controls if the viewport should zoom by double clicking somewhere on the flow */
-  zoomOnDoubleClick?: boolean;
-  /** Controls if the viewport should zoom by pinching on a touch screen */
-  zoomOnPinch?: boolean;
-  /** Controls if the viewport should pan by scrolling inside the container
-   *
-   * Can be limited to a specific direction with panOnScrollMode
-   */
-  panOnScroll?: boolean;
-  /** This prop is used to limit the direction of panning when panOnScroll is enabled.
-   *
-   * The "free" option allows panning in any direction.
-   * @default "free"
-   * @example "horizontal" | "vertical"
-   */
-  panOnScrollMode?: PanOnScrollMode;
-  /** Enableing this prop allows users to pan the viewport by clicking and dragging.
-   *
-   * You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.
-   * @example [0, 2] // allows panning with the left and right mouse buttons
-   * [0, 1, 2, 3, 4] // allows panning with all mouse buttons
-   */
-  panOnDrag?: boolean | number[];
-  /** Select multiple elements with a selection box, without pressing down selectionKey */
-  selectionOnDrag?: boolean;
-  /** You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
-   *
-   * This might improve performance when you have a large number of nodes and edges but also adds an overhead.
-   * @default false
-   */
-  onlyRenderVisibleElements?: boolean;
-  /** You can enable this prop to automatically pan the viewport while making a new connection.
-   * @default true
-   */
-  autoPanOnConnect?: boolean;
-  /** You can enable this prop to automatically pan the viewport while dragging a node.
-   * @default true
-   */
-  autoPanOnNodeDrag?: boolean;
-  /** Set position of the attribution
-   * @default 'bottom-right'
-   * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
-   */
-  attributionPosition?: PanelPosition;
-  /** By default, we render a small attribution in the corner of your flows that links back to the project.
-   *
-   * Anyone is free to remove this attribution whether they're a Pro subscriber or not
-   * but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide}
-   * before doing so.
-   */
-  proOptions?: ProOptions;
-  /** Defaults to be applied to all new edges that are added to the flow.
-   *
-   * Properties on a new edge will override these defaults if they exist.
-   * @example
-   * const defaultEdgeOptions = {
-   *  type: 'customEdgeType',
-   *  animated: true,
-   *  interactionWidth: 10,
-   *  data: { label: 'custom label' },
-   *  hidden: false,
-   *  deletable: true,
-   *  selected: false,
-   *  focusable: true,
-   *  markerStart: EdgeMarker.ArrowClosed,
-   *  markerEnd: EdgeMarker.ArrowClosed,
-   *  zIndex: 12,
-   *  ariaLabel: 'custom aria label'
-   * }
-   */
-  defaultEdgeOptions?: DefaultEdgeOptions;
-  /** Sets a fixed width for the flow */
-  width?: number;
-  /** Sets a fixed height for the flow */
-  height?: number;
-  /** Controls color scheme used for styling the flow
-   * @default 'system'
-   * @example 'system' | 'light' | 'dark'
-   */
-  colorMode?: ColorMode;
-  /** Class to be applied to the flow container */
-  class?: string;
-  /** Styles to be applied to the flow container */
-  style?: string;
-  /** Choose from the built-in edge types to be used for connections
-   * @default 'default' | ConnectionLineType.Bezier
-   * @example 'straight' | 'default' | 'step' | 'smoothstep' | 'bezier'
-   * @example ConnectionLineType.Straight | ConnectionLineType.Default | ConnectionLineType.Step | ConnectionLineType.SmoothStep | ConnectionLineType.Bezier
-   */
-  connectionLineType?: ConnectionLineType;
-  /** This callback can be used to validate a new connection
-   *
-   * If you return false, the edge will not be added to your flow.
-   * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
-   * @default (connection: Connection) => true
-   */
-  isValidConnection?: IsValidConnection;
-  /** This event handler is called when the user begins to pan or zoom the viewport */
-  onMoveStart?: OnMoveStart;
-  /** This event handler is called when the user pans or zooms the viewport */
-  onMove?: OnMove;
-  /** This event handler is called when the user stops panning or zooming the viewport */
-  onMoveEnd?: OnMoveEnd;
-  /** Ocassionally something may happen that causes Svelte Flow to throw an error.
-   *
-   * Instead of exploding your application, we log a message to the console and then call this event handler.
-   * You might use it for additional logging or to show a message to the user.
-   */
-  onerror?: OnError;
-  /** This handler gets called when the user deletes nodes or edges.
-   * @example
-   * onDelete={({nodes, edges}) => {
-   *  console.log('deleted nodes:', nodes);
-   *  console.log('deleted edges:', edges);
-   * }}
-   */
-  ondelete?: OnDelete;
-  /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
-  onbeforedelete?: OnBeforeDelete;
+export type SvelteFlowProps = NodeEvents &
+  NodeSelectionEvents &
+  EdgeEvents &
+  PaneEvents &
+  DOMAttributes<HTMLDivElement> & {
+    /** The id of the flow
+     *
+     * This is necessary if you want to render multiple flows.
+     * @optional
+     */
+    id?: string;
+    /** An array of nodes to render in a controlled flow.
+     * @example
+     * const nodes = writable([
+     *  {
+     *    id: 'node-1',
+     *    type: 'input',
+     *    data: { label: 'Node 1' },
+     *    position: { x: 250, y: 50 }
+     *  }
+     * ]);
+     */
+    nodes: Writable<Node[]>;
+    /** An array of edges to render in a controlled flow.
+     * @example
+     * const edges = writable([
+     *  {
+     *    id: 'edge-1-2',
+     *    source: 'node-1',
+     *    target: 'node-2',
+     *  }
+     * ]);
+     */
+    edges: Writable<Edge[]>;
+    /** Custom node types to be available in a flow.
+     *
+     * Svelte Flow matches a node's type to a component in the nodeTypes object.
+     * @example
+     * import CustomNode from './CustomNode.svelte';
+     *
+     * const nodeTypes = { nameOfNodeType: CustomNode };
+     */
+    nodeTypes?: NodeTypes;
+    /** Custom edge types to be available in a flow.
+     *
+     * Svelte Flow matches an edge's type to a component in the edgeTypes object.
+     * @example
+     * import CustomEdge from './CustomEdge.svelte';
+     *
+     * const edgeTypes = { nameOfEdgeType: CustomEdge };
+     */
+    edgeTypes?: EdgeTypes;
+    /** Pressing down this key you can select multiple elements with a selection box.
+     * @default 'Shift'
+     */
+    selectionKey?: KeyDefinition | KeyDefinition[] | null;
+    /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
+     *
+     * By setting this prop to null you can disable this functionality.
+     * @default 'Space'
+     */
+    panActivationKey?: KeyDefinition | KeyDefinition[] | null;
+    /** Pressing down this key deletes all selected nodes & edges.
+     * @default 'Backspace'
+     */
+    deleteKey?: KeyDefinition | KeyDefinition[] | null;
+    /** Pressing down this key you can select multiple elements by clicking.
+     * @default 'Meta' for macOS, "Ctrl" for other systems
+     */
+    multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
+    /** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
+     *
+     * By setting this prop to null you can disable this functionality.
+     * @default 'Meta' for macOS, "Ctrl" for other systems
+     * */
+    zoomActivationKey?: KeyDefinition | KeyDefinition[] | null;
+    /** If set, initial viewport will show all nodes & edges */
+    fitView?: boolean;
+    /** Options to be used in combination with fitView
+     * @example
+     * const fitViewOptions = {
+     *  padding: 0.1,
+     *  includeHiddenNodes: false,
+     *  minZoom: 0.1,
+     *  maxZoom: 1,
+     *  duration: 200,
+     *  nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit
+     * };
+     */
+    fitViewOptions?: FitViewOptions;
+    /** Defines nodes relative position to its coordinates
+     * @example
+     * [0, 0] // default, top left
+     * [0.5, 0.5] // center
+     * [1, 1] // bottom right
+     */
+    nodeOrigin?: NodeOrigin;
+    /** With a threshold greater than zero you can control the distinction between node drag and click events.
+     *
+     * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
+     * @default 1
+     */
+    nodeDragThreshold?: number;
+    /** Distance that the mouse can move between mousedown/up that will trigger a click
+     * @default 0
+     */
+    paneClickDistance?: number;
+    /** Distance that the mouse can move between mousedown/up that will trigger a click
+     * @default 0
+     */
+    nodeClickDistance?: number;
+    /** Minimum zoom level
+     * @default 0.5
+     */
+    minZoom?: number;
+    /** Maximum zoom level
+     * @default 2
+     */
+    maxZoom?: number;
+    /** Sets the initial position and zoom of the viewport.
+     *
+     * If a default viewport is provided but fitView is enabled, the default viewport will be ignored.
+     * @example
+     * const initialViewport = {
+     *  zoom: 0.5,
+     *  position: { x: 0, y: 0 }
+     * };
+     */
+    initialViewport?: Viewport;
+    /** Custom viewport writable to be used instead of internal one */
+    viewport?: Writable<Viewport>;
+    /** The radius around a handle where you drop a connection line to create a new edge.
+     * @default 20
+     */
+    connectionRadius?: number;
+    /** 'strict' connection mode will only allow you to connect source handles to target handles.
+     *
+     * 'loose' connection mode will allow you to connect handles of any type to one another.
+     * @default 'strict'
+     */
+    connectionMode?: ConnectionMode;
+    /** Provide a custom snippet to be used insted of the default connection line */
+    connectionLine?: Snippet;
+    /** Styles to be applied to the connection line */
+    connectionLineStyle?: string;
+    /** Styles to be applied to the container of the connection line */
+    connectionLineContainerStyle?: string;
+    /** When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.
+     * @default 'full'
+     */
+    selectionMode?: SelectionMode;
+    /** Grid all nodes will snap to
+     * @example [20, 20]
+     */
+    snapGrid?: SnapGrid;
+    /** Color of edge markers
+     * @example "#b1b1b7"
+     */
+    defaultMarkerColor?: string;
+    /** Controls if all nodes should be draggable
+     * @default true
+     */
+    nodesDraggable?: boolean;
+    /** Controls if all nodes should be connectable to each other
+     * @default true
+     */
+    nodesConnectable?: boolean;
+    /** Controls if all elements should (nodes & edges) be selectable
+     * @default true
+     */
+    elementsSelectable?: boolean;
+    /** By default the viewport extends infinitely. You can use this prop to set a boundary.
+     *
+     * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+     * @example [[-1000, -10000], [1000, 1000]]
+     */
+    translateExtent?: CoordinateExtent;
+    /** By default the nodes can be placed anywhere. You can use this prop to set a boundary.
+     *
+     * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+     * @example [[-1000, -10000], [1000, 1000]]
+     */
+    nodeExtent?: CoordinateExtent;
+    /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
+     * @default true
+     */
+    preventScrolling?: boolean;
+    /** Controls if the viewport should zoom by scrolling inside the container */
+    zoomOnScroll?: boolean;
+    /** Controls if the viewport should zoom by double clicking somewhere on the flow */
+    zoomOnDoubleClick?: boolean;
+    /** Controls if the viewport should zoom by pinching on a touch screen */
+    zoomOnPinch?: boolean;
+    /** Controls if the viewport should pan by scrolling inside the container
+     *
+     * Can be limited to a specific direction with panOnScrollMode
+     */
+    panOnScroll?: boolean;
+    /** This prop is used to limit the direction of panning when panOnScroll is enabled.
+     *
+     * The "free" option allows panning in any direction.
+     * @default "free"
+     * @example "horizontal" | "vertical"
+     */
+    panOnScrollMode?: PanOnScrollMode;
+    /** Enableing this prop allows users to pan the viewport by clicking and dragging.
+     *
+     * You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.
+     * @example [0, 2] // allows panning with the left and right mouse buttons
+     * [0, 1, 2, 3, 4] // allows panning with all mouse buttons
+     */
+    panOnDrag?: boolean | number[];
+    /** Select multiple elements with a selection box, without pressing down selectionKey */
+    selectionOnDrag?: boolean;
+    /** You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
+     *
+     * This might improve performance when you have a large number of nodes and edges but also adds an overhead.
+     * @default false
+     */
+    onlyRenderVisibleElements?: boolean;
+    /** You can enable this prop to automatically pan the viewport while making a new connection.
+     * @default true
+     */
+    autoPanOnConnect?: boolean;
+    /** You can enable this prop to automatically pan the viewport while dragging a node.
+     * @default true
+     */
+    autoPanOnNodeDrag?: boolean;
+    /** Set position of the attribution
+     * @default 'bottom-right'
+     * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+     */
+    attributionPosition?: PanelPosition;
+    /** By default, we render a small attribution in the corner of your flows that links back to the project.
+     *
+     * Anyone is free to remove this attribution whether they're a Pro subscriber or not
+     * but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide}
+     * before doing so.
+     */
+    proOptions?: ProOptions;
+    /** Defaults to be applied to all new edges that are added to the flow.
+     *
+     * Properties on a new edge will override these defaults if they exist.
+     * @example
+     * const defaultEdgeOptions = {
+     *  type: 'customEdgeType',
+     *  animated: true,
+     *  interactionWidth: 10,
+     *  data: { label: 'custom label' },
+     *  hidden: false,
+     *  deletable: true,
+     *  selected: false,
+     *  focusable: true,
+     *  markerStart: EdgeMarker.ArrowClosed,
+     *  markerEnd: EdgeMarker.ArrowClosed,
+     *  zIndex: 12,
+     *  ariaLabel: 'custom aria label'
+     * }
+     */
+    defaultEdgeOptions?: DefaultEdgeOptions;
+    /** Sets a fixed width for the flow */
+    width?: number;
+    /** Sets a fixed height for the flow */
+    height?: number;
+    /** Controls color scheme used for styling the flow
+     * @default 'system'
+     * @example 'system' | 'light' | 'dark'
+     */
+    colorMode?: ColorMode;
+    /** Class to be applied to the flow container */
+    class?: string;
+    /** Styles to be applied to the flow container */
+    style?: string;
+    /** Choose from the built-in edge types to be used for connections
+     * @default 'default' | ConnectionLineType.Bezier
+     * @example 'straight' | 'default' | 'step' | 'smoothstep' | 'bezier'
+     * @example ConnectionLineType.Straight | ConnectionLineType.Default | ConnectionLineType.Step | ConnectionLineType.SmoothStep | ConnectionLineType.Bezier
+     */
+    connectionLineType?: ConnectionLineType;
+    /** This callback can be used to validate a new connection
+     *
+     * If you return false, the edge will not be added to your flow.
+     * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
+     * @default (connection: Connection) => true
+     */
+    isValidConnection?: IsValidConnection;
+    /** This event handler is called when the user begins to pan or zoom the viewport */
+    onMoveStart?: OnMoveStart;
+    /** This event handler is called when the user pans or zooms the viewport */
+    onMove?: OnMove;
+    /** This event handler is called when the user stops panning or zooming the viewport */
+    onMoveEnd?: OnMoveEnd;
+    /** Ocassionally something may happen that causes Svelte Flow to throw an error.
+     *
+     * Instead of exploding your application, we log a message to the console and then call this event handler.
+     * You might use it for additional logging or to show a message to the user.
+     */
+    onerror?: OnError;
+    /** This handler gets called when the user deletes nodes or edges.
+     * @example
+     * onDelete={({nodes, edges}) => {
+     *  console.log('deleted nodes:', nodes);
+     *  console.log('deleted edges:', edges);
+     * }}
+     */
+    ondelete?: OnDelete;
+    /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
+    onbeforedelete?: OnBeforeDelete;
 
-  /** This handler gets called when a new edge is created. You can use it to modify the newly created edge. */
-  onedgecreate?: OnEdgeCreate;
+    /** This handler gets called when a new edge is created. You can use it to modify the newly created edge. */
+    onedgecreate?: OnEdgeCreate;
 
-  /** This event gets fired when a connection successfully completes and an edge is created. */
-  onconnect?: OnConnect;
-  /** When a user starts to drag a connection line, this event gets fired. */
-  onconnectstart?: OnConnectStart;
-  /** When a user stops dragging a connection line, this event gets fired. */
-  onconnectend?: OnConnectEnd;
-  /** This handler gets called when the flow is finished initializing */
-  oninit?: () => void;
-};
+    /** This event gets fired when a connection successfully completes and an edge is created. */
+    onconnect?: OnConnect;
+    /** When a user starts to drag a connection line, this event gets fired. */
+    onconnectstart?: OnConnectStart;
+    /** When a user stops dragging a connection line, this event gets fired. */
+    onconnectend?: OnConnectEnd;
+    /** This handler gets called when the flow is finished initializing */
+    oninit?: () => void;
+  };
diff --git a/packages/svelte/src/lib/types/events.ts b/packages/svelte/src/lib/types/events.ts
new file mode 100644
index 00000000..d4b6ea8f
--- /dev/null
+++ b/packages/svelte/src/lib/types/events.ts
@@ -0,0 +1,56 @@
+import type { Edge } from './edges';
+import type { Node } from './nodes';
+
+export type NodeEventWithPointer = ({
+  node,
+  event
+}: {
+  node: Node;
+  event: MouseEvent | TouchEvent;
+}) => void;
+
+export type NodesEventWithPointer = ({
+  nodes,
+  event
+}: {
+  nodes: Node[];
+  event: MouseEvent | TouchEvent;
+}) => void;
+
+export type NodeTargetEventWithPointer = ({
+  targetNode,
+  nodes,
+  event
+}: {
+  targetNode: Node | null;
+  nodes: Node[];
+  event: MouseEvent | TouchEvent;
+}) => void;
+
+export type NodeEvents = {
+  onnodeclick?: NodeEventWithPointer;
+  onnodecontextmenu?: NodeEventWithPointer;
+  onnodedrag?: NodeTargetEventWithPointer;
+  onnodedragstart?: NodeTargetEventWithPointer;
+  onnodedragstop?: NodeTargetEventWithPointer;
+  onnodemouseenter?: NodeEventWithPointer;
+  onnodemouseleave?: NodeEventWithPointer;
+  onnodemousemove?: NodeEventWithPointer;
+};
+
+export type NodeSelectionEvents = {
+  onselectioncontextmenu?: NodesEventWithPointer;
+  onselectionclick?: NodesEventWithPointer;
+};
+
+export type PaneEvents = {
+  onpaneclick?: ({ event }: { event: MouseEvent | TouchEvent }) => void;
+  onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void;
+};
+
+export type EdgeEvents = {
+  onedgeclick?: ({ edge, event }: { edge: Edge; event: MouseEvent | TouchEvent }) => void;
+  onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
+  onedgemouseenter?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
+  onedgemouseleave?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
+};