use generics across the library

packages/svelte/src/lib/actions/drag/index.ts

@@ -1,9 +1,10 @@
-import { XYDrag, type OnDrag } from '@xyflow/system';
+import { XYDrag, type NodeBase, type OnDrag, type XYDragParams } from '@xyflow/system';
 
 import type { SvelteFlowStore } from '$lib/store/types';
+import type { Node, Edge, NodeTargetEventWithPointer } from '$lib/types';
 
-export type UseDragParams = {
-  store: SvelteFlowStore;
+export type UseDragParams<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  store: SvelteFlowStore<NodeType, EdgeType>;
   disabled?: boolean;
   noDragClass?: string;
   handleSelector?: string;
@@ -16,7 +17,10 @@ export type UseDragParams = {
   onNodeMouseDown?: (id: string) => void;
 };
 
-export default function drag(domNode: Element, params: UseDragParams) {
+export default function drag<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
+  domNode: Element,
+  params: UseDragParams<NodeType, EdgeType>
+) {
   const { store, onDrag, onDragStart, onDragStop, onNodeMouseDown } = params;
   const dragInstance = XYDrag({
     onDrag,
@@ -27,7 +31,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
       const { snapGrid, viewport } = store;
 
       return {
-        nodes: store.nodes,
+        nodes: store.nodes satisfies NodeBase[],
         nodeLookup: store.nodeLookup,
         edges: store.edges,
         nodeExtent: store.nodeExtent,
@@ -46,9 +50,9 @@ export default function drag(domNode: Element, params: UseDragParams) {
         panBy: store.panBy
       };
     }
-  });
+  } as XYDragParams<NodeTargetEventWithPointer<MouseEvent | TouchEvent, NodeType>>);
 
-  function updateDrag(domNode: Element, params: UseDragParams) {
+  function updateDrag(domNode: Element, params: UseDragParams<NodeType, EdgeType>) {
     if (params.disabled) {
       dragInstance.destroy();
       return;
@@ -67,7 +71,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
   updateDrag(domNode, params);
 
   return {
-    update(params: UseDragParams) {
+    update(params: UseDragParams<NodeType, EdgeType>) {
       updateDrag(domNode, params);
     },
     destroy() {

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import type { Component } from 'svelte';
   import {
     ConnectionLineType,
@@ -9,6 +9,7 @@
   } from '@xyflow/system';
 
   import type { SvelteFlowStore } from '$lib/store/types';
+  import type { Node, Edge } from '$lib/types';
 
   let {
     store = $bindable(),
@@ -17,7 +18,7 @@
     style,
     LineComponent
   }: {
-    store: SvelteFlowStore;
+    store: SvelteFlowStore<NodeType, EdgeType>;
     type: ConnectionLineType;
     containerStyle?: string;
     style?: string;

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { setContext } from 'svelte';
 
   import { elementSelectionKeys, getMarkerId } from '@xyflow/system';
 
   import { BezierEdgeInternal } from '$lib/components/edges';
 
-  import type { EdgeLayouted, Edge, EdgeEvents } from '$lib/types';
+  import type { Node, EdgeLayouted, Edge, EdgeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
 
   const {
@@ -15,7 +15,10 @@
     onedgecontextmenu,
     onedgepointerenter,
     onedgepointerleave
-  }: { store: SvelteFlowStore; edge: EdgeLayouted } & EdgeEvents = $props();
+  }: {
+    store: SvelteFlowStore<NodeType, EdgeType>;
+    edge: EdgeLayouted<EdgeType>;
+  } & EdgeEvents<EdgeType> = $props();
 
   let {
     source,
@@ -76,7 +79,7 @@
 
   function onmouseevent<T = MouseEvent>(
     event: T,
-    callback: ({ edge, event }: { edge: Edge; event: T }) => void
+    callback: ({ edge, event }: { edge: EdgeType; event: T }) => void
   ) {
     const edge = store.edgeLookup.get(id);
 

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import {
     shortcut,
     type ShortcutEventDetail,
@@ -7,7 +7,7 @@
   import { isInputDOMNode, isMacOs } from '@xyflow/system';
 
   import type { KeyHandlerProps } from './types';
-  import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
+  import type { Node, Edge, KeyDefinition, KeyDefinitionObject } from '$lib/types';
   import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
 
   let {
@@ -17,9 +17,9 @@
     deleteKey = 'Backspace',
     panActivationKey = ' ',
     zoomActivationKey = isMacOs() ? 'Meta' : 'Control'
-  }: KeyHandlerProps = $props();
+  }: KeyHandlerProps<NodeType, EdgeType> = $props();
 
-  let { deleteElements } = useSvelteFlow();
+  let { deleteElements } = useSvelteFlow<NodeType, EdgeType>();
 
   function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
     return key !== null && typeof key === 'object';

packages/svelte/src/lib/components/KeyHandler/types.ts

@@ -1,8 +1,8 @@
 import type { SvelteFlowStore } from '$lib/store/types';
-import type { KeyDefinition } from '$lib/types';
+import type { Node, Edge, KeyDefinition } from '$lib/types';
 
-export type KeyHandlerProps = {
-  store: SvelteFlowStore;
+export type KeyHandlerProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  store: SvelteFlowStore<NodeType, EdgeType>;
   selectionKey?: KeyDefinition | KeyDefinition[] | null;
   multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
   deleteKey?: KeyDefinition | KeyDefinition[] | null;

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { arrowKeyDiffs, getInternalNodesBounds, isNumeric, type Rect } from '@xyflow/system';
 
   import { Selection } from '$lib/components/Selection';
@@ -6,6 +6,7 @@
 
   import type { NodeSelectionProps } from './types';
   import { toPxString } from '$lib/utils';
+  import type { Node, Edge } from '$lib/types';
 
   let {
     store = $bindable(),
@@ -14,7 +15,7 @@
     onnodedragstop,
     onselectionclick,
     onselectioncontextmenu
-  }: NodeSelectionProps = $props();
+  }: NodeSelectionProps<NodeType, EdgeType> = $props();
 
   let ref = $state<HTMLDivElement>();
 
@@ -63,13 +64,13 @@
       disabled: false,
       store,
       onDrag: (event, _, __, nodes) => {
-        onnodedrag?.({ event, targetNode: null, nodes });
+        onnodedrag?.({ event, targetNode: null, nodes: nodes as NodeType[] });
       },
       onDragStart: (event, _, __, nodes) => {
-        onnodedragstart?.({ event, targetNode: null, nodes });
+        onnodedragstart?.({ event, targetNode: null, nodes: nodes as NodeType[] });
       },
       onDragStop: (event, _, __, nodes) => {
-        onnodedragstop?.({ event, targetNode: null, nodes });
+        onnodedragstop?.({ event, targetNode: null, nodes: nodes as NodeType[] });
       }
     }}
     {oncontextmenu}

packages/svelte/src/lib/components/NodeSelection/types.ts

@@ -1,5 +1,7 @@
 import type { SvelteFlowStore } from '$lib/store/types';
-import type { NodeEvents, NodeSelectionEvents } from '$lib/types';
+import type { Node, Edge, NodeEvents, NodeSelectionEvents } from '$lib/types';
 
-export type NodeSelectionProps = { store: SvelteFlowStore } & NodeSelectionEvents &
-  Pick<NodeEvents, 'onnodedrag' | 'onnodedragstart' | 'onnodedragstop'>;
+export type NodeSelectionProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  store: SvelteFlowStore<NodeType, EdgeType>;
+} & NodeSelectionEvents<NodeType> &
+  Pick<NodeEvents<NodeType>, 'onnodedrag' | 'onnodedragstart' | 'onnodedragstop'>;

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { setContext, onDestroy } from 'svelte';
   import {
     arrowKeyDiffs,
@@ -13,7 +13,7 @@
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 
   import type { ConnectableContext, NodeWrapperProps } from './types';
-  import type { NodeEvents } from '$lib/types';
+  import type { Node, Edge, NodeEvents } from '$lib/types';
   import { toPxString } from '$lib/utils';
 
   let {
@@ -29,7 +29,7 @@
     onnodepointerleave,
     onnodepointermove,
     onnodecontextmenu
-  }: NodeWrapperProps & NodeEvents = $props();
+  }: NodeWrapperProps<NodeType, EdgeType> & NodeEvents<NodeType> = $props();
 
   let {
     data = {},
@@ -55,7 +55,8 @@
     dragHandle,
     internals: {
       z: zIndex = 0,
-      positionAbsolute: { x: positionX, y: positionY }
+      positionAbsolute: { x: positionX, y: positionY },
+      userNode
     }
   } = $derived(node);
 
@@ -162,7 +163,7 @@
       store.handleNodeSelection(id);
     }
 
-    onnodeclick?.({ node, event });
+    onnodeclick?.({ node: userNode, event });
   }
 
   function onKeyDown(event: KeyboardEvent) {
@@ -205,13 +206,17 @@
       nodeClickDistance,
       onNodeMouseDown: store.handleNodeSelection,
       onDrag: (event, _, targetNode, nodes) => {
-        onnodedrag?.({ event, targetNode, nodes });
+        onnodedrag?.({ event, targetNode: targetNode as NodeType, nodes: nodes as NodeType[] });
       },
       onDragStart: (event, _, targetNode, nodes) => {
-        onnodedragstart?.({ event, targetNode, nodes });
+        onnodedragstart?.({
+          event,
+          targetNode: targetNode as NodeType,
+          nodes: nodes as NodeType[]
+        });
       },
       onDragStop: (event, _, targetNode, nodes) => {
-        onnodedragstop?.({ event, targetNode, nodes });
+        onnodedragstop?.({ event, targetNode: targetNode as NodeType, nodes: nodes as NodeType[] });
       },
       store
     }}
@@ -230,10 +235,18 @@
     style:visibility={initialized ? 'visible' : 'hidden'}
     style="{style};width:{inlineDimensions.width};height:{inlineDimensions.height}"
     onclick={onSelectNodeHandler}
-    onpointerenter={onnodepointerenter ? (event) => onnodepointerenter({ node, event }) : undefined}
-    onpointerleave={onnodepointerleave ? (event) => onnodepointerleave({ node, event }) : undefined}
-    onpointermove={onnodepointermove ? (event) => onnodepointermove({ node, event }) : undefined}
-    oncontextmenu={onnodecontextmenu ? (event) => onnodecontextmenu({ node, event }) : undefined}
+    onpointerenter={onnodepointerenter
+      ? (event) => onnodepointerenter({ node: userNode, event })
+      : undefined}
+    onpointerleave={onnodepointerleave
+      ? (event) => onnodepointerleave({ node: userNode, event })
+      : undefined}
+    onpointermove={onnodepointermove
+      ? (event) => onnodepointermove({ node: userNode, event })
+      : undefined}
+    oncontextmenu={onnodecontextmenu
+      ? (event) => onnodecontextmenu({ node: userNode, event })
+      : undefined}
     onkeydown={focusable ? onKeyDown : undefined}
     tabIndex={focusable ? 0 : undefined}
     role={focusable ? 'button' : undefined}

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -1,13 +1,13 @@
 import type { SvelteFlowStore } from '$lib/store/types';
-import type { InternalNode } from '$lib/types';
+import type { Node, Edge, InternalNode } from '$lib/types';
 
 export type ConnectableContext = {
   value: boolean;
 };
 
-export type NodeWrapperProps = {
-  node: InternalNode;
-  store: SvelteFlowStore;
+export type NodeWrapperProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  node: InternalNode<NodeType>;
+  store: SvelteFlowStore<NodeType, EdgeType>;
   nodeClickDistance?: number;
   resizeObserver?: ResizeObserver | null;
 };

packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte

@@ -1,14 +1,15 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { onDestroy, setContext } from 'svelte';
 
   import { createStore, key } from '$lib/store';
   import type { SvelteFlowProviderProps } from './types';
   import type { ProviderContext, SvelteFlowStore } from '$lib/store/types';
+  import type { Node, Edge } from '$lib/types';
 
   let { children }: SvelteFlowProviderProps = $props();
 
   let store = $state.raw(
-    createStore({
+    createStore<NodeType, EdgeType>({
       props: {},
       nodes: [],
       edges: []
@@ -20,10 +21,10 @@
     getStore() {
       return store;
     },
-    setStore: (newStore: SvelteFlowStore) => {
+    setStore: (newStore: SvelteFlowStore<NodeType, EdgeType>) => {
       store = newStore;
     }
-  } satisfies ProviderContext);
+  } satisfies ProviderContext<NodeType, EdgeType>);
 
   onDestroy(() => {
     store.reset();

packages/svelte/src/lib/components/SvelteFlowProvider/types.ts

@@ -1,13 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { NodeOrigin } from '@xyflow/system';
-import type { Edge, Node } from '$lib/types';
 
 export type SvelteFlowProviderProps = {
-  initialNodes?: Node[];
-  initialEdges?: Edge[];
-  initialWidth?: number;
-  initialHeight?: number;
-  fitView?: boolean;
-  nodeOrigin?: NodeOrigin;
   children?: Snippet;
 };

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
-  import type { EdgeEvents } from '$lib/types';
+  import type { Node, Edge, EdgeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
@@ -10,7 +10,7 @@
     onedgecontextmenu,
     onedgepointerenter,
     onedgepointerleave
-  }: { store: SvelteFlowStore } & EdgeEvents = $props();
+  }: { store: SvelteFlowStore<NodeType, EdgeType> } & EdgeEvents<EdgeType> = $props();
 </script>
 
 <svg class="svelte-flow__marker">

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { onDestroy } from 'svelte';
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
 
-  import type { NodeEvents } from '$lib/types';
+  import type { Node, Edge, NodeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
@@ -17,7 +17,10 @@
     onnodedrag,
     onnodedragstart,
     onnodedragstop
-  }: { store: SvelteFlowStore; nodeClickDistance?: number } & NodeEvents = $props();
+  }: {
+    store: SvelteFlowStore<NodeType, EdgeType>;
+    nodeClickDistance?: number;
+  } & NodeEvents<NodeType> = $props();
 
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -38,7 +38,7 @@
   }
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
 
   import type { Node, Edge } from '$lib/types';
@@ -51,7 +51,7 @@
     onpaneclick,
     onpanecontextmenu,
     children
-  }: PaneProps = $props();
+  }: PaneProps<NodeType, EdgeType> = $props();
 
   // svelte-ignore non_reactive_update
   let container: HTMLDivElement;

packages/svelte/src/lib/container/Pane/types.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-import type { PaneEvents } from '$lib/types';
+import type { Node, Edge, PaneEvents } from '$lib/types';
 import type { SvelteFlowStore } from '$lib/store/types';
 
-export type PaneProps = {
-  store: SvelteFlowStore;
+export type PaneProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  store: SvelteFlowStore<NodeType, EdgeType>;
   panOnDrag?: boolean | number[];
   selectionOnDrag?: boolean;
   children: Snippet;

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -3,7 +3,7 @@
   import type { Snippet } from 'svelte';
   import { type SvelteFlowRestProps } from '$lib/store/types';
   import { toPxString } from '$lib/utils';
-  import type { Node, Edge, NodeTypes } from '$lib/types';
+  import type { Node, Edge } from '$lib/types';
 
   let {
     width,

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -45,9 +45,9 @@ import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$l
 export type SvelteFlowProps<
   NodeType extends Node = Node,
   EdgeType extends Edge = Edge
-> = NodeEvents &
-  NodeSelectionEvents &
-  EdgeEvents &
+> = NodeEvents<NodeType> &
+  NodeSelectionEvents<NodeType> &
+  EdgeEvents<EdgeType> &
   PaneEvents & {
     /** The id of the flow
      *

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -1,8 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import type { SvelteFlowStore } from '$lib/store/types';
+  import type { Node, Edge } from '$lib/types';
   import type { Snippet } from 'svelte';
 
-  let { store = $bindable(), children }: { store: SvelteFlowStore; children: Snippet } = $props();
+  let {
+    store = $bindable(),
+    children
+  }: { store: SvelteFlowStore<NodeType, EdgeType>; children: Snippet } = $props();
 </script>
 
 <div

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { PanOnScrollMode, type PanZoomInstance, type Transform } from '@xyflow/system';
 
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
+  import type { Node, Edge } from '$lib/types';
 
   let {
     store = $bindable(),
@@ -19,7 +20,7 @@
     onmoveend,
     oninit,
     children
-  }: ZoomProps = $props();
+  }: ZoomProps<NodeType, EdgeType> = $props();
 
   let panOnDragActive = $derived(store.panActivationKeyPressed || panOnDrag);
   let panOnScrollActive = $derived(store.panActivationKeyPressed || panOnScroll);

packages/svelte/src/lib/container/Zoom/types.ts

@@ -1,9 +1,10 @@
 import type { SvelteFlowStore } from '$lib/store/types';
+import type { Edge, Node } from '$lib/types';
 import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode } from '@xyflow/system';
 import type { Snippet } from 'svelte';
 
-export type ZoomProps = {
-  store: SvelteFlowStore;
+export type ZoomProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  store: SvelteFlowStore<NodeType, EdgeType>;
   panOnScrollMode: PanOnScrollMode;
   preventScrolling: boolean;
   zoomOnScroll: boolean;

packages/svelte/src/lib/hooks/useStore.ts

@@ -3,9 +3,13 @@ import type { StoreContext, SvelteFlowStore } from '../store/types';
 
 import { key } from '../store';
 import { derivedWarning } from './derivedWarning.svelte';
+import type { Node, Edge } from '$lib/types';
 
-export function useStore(): SvelteFlowStore {
-  const storeContext = getContext<StoreContext>(key);
+export function useStore<
+  NodeType extends Node = Node,
+  EdgeType extends Edge = Edge
+>(): SvelteFlowStore<NodeType, EdgeType> {
+  const storeContext = getContext<StoreContext<NodeType, EdgeType>>(key);
 
   if (!storeContext) {
     throw new Error(

packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts

@@ -32,7 +32,7 @@ import { untrack } from 'svelte';
  *
  * @returns helper functions
  */
-export function useSvelteFlow(): {
+export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): {
   /**
    * Zooms viewport in by 1.2.
    *
@@ -51,33 +51,33 @@ export function useSvelteFlow(): {
    * @param id - the node id
    * @returns the node or undefined if no node was found
    */
-  getInternalNode: (id: string) => InternalNode | undefined;
+  getInternalNode: (id: string) => InternalNode<NodeType> | undefined;
   /**
    * Returns a node by id.
    *
    * @param id - the node id
    * @returns the node or undefined if no node was found
    */
-  getNode: (id: string) => Node | undefined;
+  getNode: (id: string) => NodeType | undefined;
   /**
    * Returns nodes.
    *
    * @returns nodes array
    */
-  getNodes: (ids?: string[]) => Node[];
+  getNodes: (ids?: string[]) => NodeType[];
   /**
    * Returns an edge by id.
    *
    * @param id - the edge id
    * @returns the edge or undefined if no edge was found
    */
-  getEdge: (id: string) => Edge | undefined;
+  getEdge: (id: string) => EdgeType | undefined;
   /**
    * Returns edges.
    *
    * @returns edges array
    */
-  getEdges: (ids?: string[]) => Edge[];
+  getEdges: (ids?: string[]) => EdgeType[];
   /**
    * Sets the current zoom level.
    *
@@ -133,10 +133,10 @@ export function useSvelteFlow(): {
    * @returns an array of intersecting nodes
    */
   getIntersectingNodes: (
-    nodeOrRect: Node | { id: Node['id'] } | Rect,
+    nodeOrRect: NodeType | { id: NodeType['id'] } | Rect,
     partially?: boolean,
-    nodesToIntersect?: Node[]
-  ) => Node[];
+    nodesToIntersect?: NodeType[]
+  ) => NodeType[];
   /**
    * Checks if the given node or rect intersects with the passed rect.
    *
@@ -147,7 +147,7 @@ export function useSvelteFlow(): {
    * @returns true if the node or rect intersects with the given area
    */
   isNodeIntersecting: (
-    nodeOrRect: Node | { id: Node['id'] } | Rect,
+    nodeOrRect: NodeType | { id: NodeType['id'] } | Rect,
     area: Rect,
     partially?: boolean
   ) => boolean;
@@ -170,9 +170,9 @@ export function useSvelteFlow(): {
     nodes,
     edges
   }: {
-    nodes?: (Node | { id: Node['id'] })[];
-    edges?: (Edge | { id: Edge['id'] })[];
-  }) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>;
+    nodes?: (Partial<NodeType> & { id: string })[];
+    edges?: (Partial<EdgeType> & { id: string })[];
+  }) => Promise<{ deletedNodes: NodeType[]; deletedEdges: EdgeType[] }>;
   /**
    * Converts a screen / client position to a flow position.
    *
@@ -209,12 +209,12 @@ export function useSvelteFlow(): {
    */
   // updateNode: (
   //   id: string,
-  //   nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
+  //   nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeTyp>),
   //   options?: { replace: boolean }
   // ) => void;
   updateNode: (
     id: string,
-    nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
+    nodeUpdate: Partial<NodeType> | ((node: NodeType) => NodeType),
     options?: { replace: boolean }
   ) => void;
   /**
@@ -229,7 +229,7 @@ export function useSvelteFlow(): {
    */
   updateNodeData: (
     id: string,
-    dataUpdate: object | ((node: Node) => object),
+    dataUpdate: Partial<NodeType['data']> | ((node: NodeType) => Partial<NodeType['data']>),
     options?: { replace: boolean }
   ) => void;
   /**
@@ -249,10 +249,10 @@ export function useSvelteFlow(): {
    */
   updateEdge: (
     id: string,
-    edgeUpdate: Partial<Edge> | ((edge: Edge) => Partial<Edge>),
+    edgeUpdate: Partial<EdgeType> | ((edge: EdgeType) => EdgeType),
     options?: { replace: boolean }
   ) => void;
-  toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
+  toObject: () => { nodes: NodeType[]; edges: EdgeType[]; viewport: Viewport };
   /**
    * Returns the bounds of the given nodes or node ids.
    *
@@ -260,7 +260,7 @@ export function useSvelteFlow(): {
    *
    * @returns the bounds of the given nodes
    */
-  getNodesBounds: (nodes: (Node | InternalNode | string)[]) => Rect;
+  getNodesBounds: (nodes: (NodeType | InternalNode<NodeType> | string)[]) => Rect;
   /** Gets all connections for a given handle belonging to a specific node.
    *
    * @param type - handle type 'source' or 'target'
@@ -282,9 +282,9 @@ export function useSvelteFlow(): {
     derivedWarning('useSvelteFlow');
   }
 
-  const store = useStore();
+  const store = useStore<NodeType, EdgeType>();
 
-  const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => {
+  const getNodeRect = (node: NodeType | { id: NodeType['id'] }): Rect | null => {
     const nodeToUse = isNode(node) ? node : store.nodeLookup.get(node.id)!;
     const position = nodeToUse.parentId
       ? evaluateAbsolutePosition(
@@ -308,13 +308,13 @@ export function useSvelteFlow(): {
 
   function updateNode(
     id: string,
-    nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
+    nodeUpdate: Partial<NodeType> | ((node: NodeType) => NodeType),
     options: { replace: boolean } = { replace: false }
   ) {
     store.nodes = untrack(() => store.nodes).map((node) => {
       if (node.id === id) {
-        const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
-        return options?.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+        const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate;
+        return options?.replace && isNode<NodeType>(nextNode) ? nextNode : { ...node, ...nextNode };
       }
 
       return node;
@@ -323,13 +323,13 @@ export function useSvelteFlow(): {
 
   function updateEdge(
     id: string,
-    edgeUpdate: Partial<Edge> | ((edge: Edge) => Partial<Edge>),
+    edgeUpdate: Partial<EdgeType> | ((edge: EdgeType) => EdgeType),
     options: { replace: boolean } = { replace: false }
   ) {
     store.edges = untrack(() => store.edges).map((edge) => {
       if (edge.id === id) {
         const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge) : edgeUpdate;
-        return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
+        return options.replace && isEdge<EdgeType>(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
       }
 
       return edge;
@@ -411,9 +411,9 @@ export function useSvelteFlow(): {
       return Promise.resolve(true);
     },
     getIntersectingNodes: (
-      nodeOrRect: Node | { id: Node['id'] } | Rect,
+      nodeOrRect: NodeType | { id: NodeType['id'] } | Rect,
       partially = true,
-      nodesToIntersect?: Node[]
+      nodesToIntersect?: NodeType[]
     ) => {
       const isRect = isRectObject(nodeOrRect);
       const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
@@ -436,7 +436,7 @@ export function useSvelteFlow(): {
       });
     },
     isNodeIntersecting: (
-      nodeOrRect: Node | { id: Node['id'] } | Rect,
+      nodeOrRect: NodeType | { id: NodeType['id'] } | Rect,
       area: Rect,
       partially = true
     ) => {
@@ -453,7 +453,10 @@ export function useSvelteFlow(): {
       return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
     },
     deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
-      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove<
+        NodeType,
+        EdgeType
+      >({
         nodesToRemove,
         edgesToRemove,
         nodes: store.nodes,
@@ -537,8 +540,10 @@ export function useSvelteFlow(): {
       }
 
       const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
-
-      updateNode(id, { data: options?.replace ? nextData : { ...node.data, ...nextData } });
+      updateNode(id, (node) => ({
+        ...node,
+        data: options?.replace ? nextData : { ...node.data, ...nextData }
+      }));
     },
     updateEdge,
     getNodesBounds: (nodes) => {
@@ -549,8 +554,14 @@ export function useSvelteFlow(): {
   };
 }
 
-function getElements(lookup: Map<string, InternalNode>, ids: string[]): Node[];
-function getElements(lookup: Map<string, Edge>, ids: string[]): Edge[];
+function getElements<NodeType extends Node = Node>(
+  lookup: Map<string, InternalNode<NodeType>>,
+  ids: string[]
+): NodeType[];
+function getElements<EdgeType extends Edge = Edge>(
+  lookup: Map<string, EdgeType>,
+  ids: string[]
+): EdgeType[];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getElements(lookup: Map<string, any>, ids: string[]): any[] {
   const result = [];

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -143,7 +143,7 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     connectionLookup: ConnectionLookup = new Map();
     edgeLookup: EdgeLookup<EdgeType> = new Map();
 
-    _prevVisibleEdges = new Map<string, EdgeLayouted>();
+    _prevVisibleEdges = new Map<string, EdgeLayouted<EdgeType>>();
     visible = $derived.by(() => {
       const {
         // We need to access this._nodes to trigger on changes
@@ -158,8 +158,8 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
         defaultEdgeOptions
       } = this;
 
-      let visibleNodes: Map<string, InternalNode>;
-      let visibleEdges: Map<string, EdgeLayouted>;
+      let visibleNodes: Map<string, InternalNode<NodeType>>;
+      let visibleEdges: Map<string, EdgeLayouted<EdgeType>>;
 
       const options = {
         edges,

packages/svelte/src/lib/store/types.ts

@@ -116,6 +116,6 @@ export type StoreContext<NodeType extends Node = Node, EdgeType extends Edge = E
 export type ProviderContext<
   NodeType extends Node = Node,
   EdgeType extends Edge = Edge
-> = StoreContext & {
+> = StoreContext<NodeType, EdgeType> & {
   setStore: (store: SvelteFlowStore<NodeType, EdgeType>) => void;
 };

packages/svelte/src/lib/store/visibleElements.ts

@@ -10,13 +10,13 @@ import {
   type Transform
 } from '@xyflow/system';
 
-export function getVisibleNodes(
-  nodeLookup: NodeLookup,
+export function getVisibleNodes<NodeType extends Node = Node>(
+  nodeLookup: NodeLookup<InternalNode<NodeType>>,
   transform: Transform,
   width: number,
   height: number
 ) {
-  const visibleNodes = new Map<string, InternalNode>();
+  const visibleNodes = new Map<string, InternalNode<NodeType>>();
   getNodesInside(nodeLookup, { x: 0, y: 0, width: width, height: height }, transform, true).forEach(
     (node) => {
       visibleNodes.set(node.id, node);
@@ -29,7 +29,7 @@ export interface EdgeLayoutBaseOptions<NodeType extends Node = Node, EdgeType ex
   edges: EdgeType[];
   defaultEdgeOptions: DefaultEdgeOptions;
   elevateEdgesOnSelect: boolean;
-  previousEdges: Map<string, EdgeLayouted>;
+  previousEdges: Map<string, EdgeLayouted<EdgeType>>;
   nodeLookup: NodeLookup<InternalNode<NodeType>>;
   connectionMode: ConnectionMode;
   onerror: OnError;
@@ -44,7 +44,10 @@ export interface EdgeLayoutAllOptions<NodeType extends Node = Node, EdgeType ext
   height: never;
 }
 
-export interface EdgeLayoutOnlyVisibleOptions extends EdgeLayoutBaseOptions {
+export interface EdgeLayoutOnlyVisibleOptions<
+  NodeType extends Node = Node,
+  EdgeType extends Edge = Edge
+> extends EdgeLayoutBaseOptions<NodeType, EdgeType> {
   visibleNodes: Map<string, InternalNode>;
   transform: Transform;
   width: number;
@@ -54,9 +57,11 @@ export interface EdgeLayoutOnlyVisibleOptions extends EdgeLayoutBaseOptions {
 
 export type EdgeLayoutOptions<NodeType extends Node = Node, EdgeType extends Edge = Edge> =
   | EdgeLayoutAllOptions<NodeType, EdgeType>
-  | EdgeLayoutOnlyVisibleOptions;
+  | EdgeLayoutOnlyVisibleOptions<NodeType, EdgeType>;
 
-export function getLayoutedEdges(options: EdgeLayoutOptions): Map<string, EdgeLayouted> {
+export function getLayoutedEdges<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
+  options: EdgeLayoutOptions<NodeType, EdgeType>
+): Map<string, EdgeLayouted<EdgeType>> {
   const {
     edges,
     defaultEdgeOptions,
@@ -67,7 +72,7 @@ export function getLayoutedEdges(options: EdgeLayoutOptions): Map<string, EdgeLa
     onlyRenderVisible,
     elevateEdgesOnSelect
   } = options;
-  const layoutedEdges = new Map<string, EdgeLayouted>();
+  const layoutedEdges = new Map<string, EdgeLayouted<EdgeType>>();
   for (const edge of edges) {
     const sourceNode = nodeLookup.get(edge.source);
     const targetNode = nodeLookup.get(edge.target);

packages/svelte/src/lib/types/edges.ts

@@ -151,11 +151,11 @@ export type EdgeTypes = Record<
 
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
 
-export type EdgeLayouted = Edge &
+export type EdgeLayouted<EdgeType extends Edge = Edge> = EdgeType &
   EdgePosition & {
     sourceNode?: Node;
     targetNode?: Node;
     sourceHandleId?: string | null;
     targetHandleId?: string | null;
-    edge: Edge;
+    edge: EdgeType;
   };

packages/svelte/src/lib/types/events.ts

@@ -1,46 +1,46 @@
 import type { Edge } from './edges';
 import type { Node } from './nodes';
 
-export type NodeEventWithPointer<T = PointerEvent> = ({
+export type NodeEventWithPointer<T = PointerEvent, NodeType extends Node = Node> = ({
   node,
   event
 }: {
-  node: Node;
+  node: NodeType;
   event: T;
 }) => void;
 
-export type NodesEventWithPointer<T = PointerEvent> = ({
+export type NodesEventWithPointer<T = PointerEvent, NodeType extends Node = Node> = ({
   nodes,
   event
 }: {
-  nodes: Node[];
+  nodes: NodeType[];
   event: T;
 }) => void;
 
-export type NodeTargetEventWithPointer<T = PointerEvent> = ({
+export type NodeTargetEventWithPointer<T = PointerEvent, NodeType extends Node = Node> = ({
   targetNode,
   nodes,
   event
 }: {
-  targetNode: Node | null;
-  nodes: Node[];
+  targetNode: NodeType | null;
+  nodes: NodeType[];
   event: T;
 }) => void;
 
-export type NodeEvents = {
-  onnodeclick?: NodeEventWithPointer<MouseEvent | TouchEvent>;
-  onnodecontextmenu?: NodeEventWithPointer<MouseEvent>;
-  onnodedrag?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
-  onnodedragstart?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
-  onnodedragstop?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
-  onnodepointerenter?: NodeEventWithPointer;
-  onnodepointerleave?: NodeEventWithPointer;
-  onnodepointermove?: NodeEventWithPointer;
+export type NodeEvents<NodeType extends Node = Node> = {
+  onnodeclick?: NodeEventWithPointer<MouseEvent | TouchEvent, NodeType>;
+  onnodecontextmenu?: NodeEventWithPointer<MouseEvent, NodeType>;
+  onnodedrag?: NodeTargetEventWithPointer<MouseEvent | TouchEvent, NodeType>;
+  onnodedragstart?: NodeTargetEventWithPointer<MouseEvent | TouchEvent, NodeType>;
+  onnodedragstop?: NodeTargetEventWithPointer<MouseEvent | TouchEvent, NodeType>;
+  onnodepointerenter?: NodeEventWithPointer<PointerEvent, NodeType>;
+  onnodepointerleave?: NodeEventWithPointer<PointerEvent, NodeType>;
+  onnodepointermove?: NodeEventWithPointer<PointerEvent, NodeType>;
 };
 
-export type NodeSelectionEvents = {
-  onselectioncontextmenu?: NodesEventWithPointer<MouseEvent>;
-  onselectionclick?: NodesEventWithPointer<MouseEvent>;
+export type NodeSelectionEvents<NodeType extends Node = Node> = {
+  onselectioncontextmenu?: NodesEventWithPointer<MouseEvent, NodeType>;
+  onselectionclick?: NodesEventWithPointer<MouseEvent, NodeType>;
 };
 
 export type PaneEvents = {
@@ -48,9 +48,9 @@ export type PaneEvents = {
   onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void;
 };
 
-export type EdgeEvents = {
-  onedgeclick?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
-  onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
-  onedgepointerenter?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
-  onedgepointerleave?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
+export type EdgeEvents<EdgeType extends Edge = Edge> = {
+  onedgeclick?: ({ edge, event }: { edge: EdgeType; event: MouseEvent }) => void;
+  onedgecontextmenu?: ({ edge, event }: { edge: EdgeType; event: MouseEvent }) => void;
+  onedgepointerenter?: ({ edge, event }: { edge: EdgeType; event: PointerEvent }) => void;
+  onedgepointerleave?: ({ edge, event }: { edge: EdgeType; event: PointerEvent }) => void;
 };