Merge pull request #3834 from xyflow/refactor/infer-node-types

React Flow: TS node types

examples/react/src/examples/CustomNode/index.tsx

@@ -9,13 +9,14 @@ import {
   SnapGrid,
   useEdgesState,
   Background,
-  Edge,
   OnNodeDrag,
   OnInit,
   applyNodeChanges,
   OnNodesChange,
   OnConnect,
   OnBeforeDelete,
+  BuiltInNode,
+  BuiltInEdge,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
@@ -24,9 +25,10 @@ export type ColorSelectorNode = Node<
   { color: string; onChange: (event: ChangeEvent<HTMLInputElement>) => void },
   'selectorNode'
 >;
-export type MyNode = Node | ColorSelectorNode;
+export type MyNode = BuiltInNode | ColorSelectorNode;
+export type MyEdge = BuiltInEdge;
 
-const onInit: OnInit<MyNode> = (reactFlowInstance) => {
+const onInit: OnInit<MyNode, MyEdge> = (reactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);
 };
 
@@ -44,7 +46,7 @@ const nodeTypes = {
 
 const CustomNodeFlow = () => {
   const [nodes, setNodes] = useState<MyNode[]>([]);
-  const onNodesChange: OnNodesChange = useCallback(
+  const onNodesChange: OnNodesChange<MyNode> = useCallback(
     (changes) =>
       setNodes((nds) => {
         const nextNodes = applyNodeChanges(changes, nds);
@@ -53,7 +55,7 @@ const CustomNodeFlow = () => {
     [setNodes]
   );
 
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<MyEdge>([]);
 
   const [bgColor, setBgColor] = useState<string>(initBgColor);
 
@@ -61,7 +63,7 @@ const CustomNodeFlow = () => {
     const onChange = (event: ChangeEvent<HTMLInputElement>) => {
       setNodes((nds) =>
         nds.map((node) => {
-          if (node.id !== '2') {
+          if (node.id !== '2' || node.type !== 'selectorNode') {
             return node;
           }
 
@@ -143,7 +145,7 @@ const CustomNodeFlow = () => {
     [setEdges]
   );
 
-  const onBeforeDelete: OnBeforeDelete<MyNode> = useCallback(async (params) => true, []);
+  const onBeforeDelete: OnBeforeDelete<MyNode, MyEdge> = useCallback(async (params) => true, []);
 
   return (
     <ReactFlow
@@ -164,7 +166,7 @@ const CustomNodeFlow = () => {
       maxZoom={2}
       onBeforeDelete={onBeforeDelete}
     >
-      <MiniMap
+      <MiniMap<MyNode>
         nodeStrokeColor={(n: MyNode): string => {
           if (n.type === 'input') return '#0041d0';
           if (n.type === 'selectorNode') return bgColor;

examples/react/src/examples/DragHandle/index.tsx

@@ -14,7 +14,7 @@ const initialNodes: Node[] = [
     dragHandle: '.custom-drag-handle',
     style: { border: '1px solid #ddd', padding: '20px 40px' },
     position: { x: 200, y: 200 },
-    data: null,
+    data: {},
   },
 ];
 

examples/react/src/examples/UseNodesData/index.tsx

@@ -18,7 +18,7 @@ import UppercaseNode from './UppercaseNode';
 export type TextNode = Node<{ text: string }, 'text'>;
 export type ResultNode = Node<{}, 'result'>;
 export type UppercaseNode = Node<{}, 'uppercase'>;
-export type MyNode = Node | TextNode | ResultNode | UppercaseNode;
+export type MyNode = TextNode | ResultNode | UppercaseNode;
 
 const nodeTypes = {
   text: TextNode,

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -7,7 +7,7 @@ import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapI
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { Panel } from '../../components/Panel';
-import type { ReactFlowState } from '../../types';
+import type { ReactFlowState, Node } from '../../types';
 
 import MiniMapNodes from './MiniMapNodes';
 import type { MiniMapProps } from './types';
@@ -38,7 +38,7 @@ const selector = (s: ReactFlowState) => {
 
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 
-function MiniMapComponent({
+function MiniMapComponent<NodeType extends Node = Node>({
   style,
   className,
   nodeStrokeColor,
@@ -62,8 +62,8 @@ function MiniMapComponent({
   inversePan,
   zoomStep = 10,
   offsetScale = 5,
-}: MiniMapProps) {
+}: MiniMapProps<NodeType>) {
-  const store = useStoreApi();
+  const store = useStoreApi<NodeType>();
   const svg = useRef<SVGSVGElement>(null);
   const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector, shallow);
   const elementWidth = (style?.width as number) ?? defaultWidth;
@@ -155,7 +155,7 @@ function MiniMapComponent({
         onClick={onSvgClick}
       >
         {ariaLabel && <title id={labelledBy}>{ariaLabel}</title>}
-        <MiniMapNodes
+        <MiniMapNodes<NodeType>
           onClick={onSvgNodeClick}
           nodeColor={nodeColor}
           nodeStrokeColor={nodeStrokeColor}
@@ -178,4 +178,4 @@ function MiniMapComponent({
 
 MiniMapComponent.displayName = 'MiniMap';
 
-export const MiniMap = memo(MiniMapComponent);
+export const MiniMap = memo(MiniMapComponent) as typeof MiniMapComponent;

packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx

@@ -6,16 +6,17 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
 import { MiniMapNode } from './MiniMapNode';
-import type { ReactFlowState } from '../../types';
+import type { ReactFlowState, Node } from '../../types';
 import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';
 
 declare const window: any;
 
 const selector = (s: ReactFlowState) => s.nodeOrigin;
 const selectorNodeIds = (s: ReactFlowState) => s.nodes.map((node) => node.id);
-const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
+const getAttrFunction = <NodeType extends Node>(func: any): GetMiniMapNodeAttribute<NodeType> =>
+  func instanceof Function ? func : () => func;
 
-function MiniMapNodes({
+function MiniMapNodes<NodeType extends Node>({
   nodeStrokeColor,
   nodeColor,
   nodeClassName = '',
@@ -25,12 +26,12 @@ function MiniMapNodes({
   // a component properly.
   nodeComponent: NodeComponent = MiniMapNode,
   onClick,
-}: MiniMapNodesProps) {
+}: MiniMapNodesProps<NodeType>) {
   const nodeIds = useStore(selectorNodeIds, shallow);
   const nodeOrigin = useStore(selector);
-  const nodeColorFunc = getAttrFunction(nodeColor);
+  const nodeColorFunc = getAttrFunction<NodeType>(nodeColor);
-  const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
+  const nodeStrokeColorFunc = getAttrFunction<NodeType>(nodeStrokeColor);
-  const nodeClassNameFunc = getAttrFunction(nodeClassName);
+  const nodeClassNameFunc = getAttrFunction<NodeType>(nodeClassName);
 
   const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
 
@@ -42,7 +43,7 @@ function MiniMapNodes({
         // minimize the cost of updates when individual nodes change.
         //
         // For more details, see a similar commit in `NodeRenderer/index.tsx`.
-        <NodeComponentWrapper
+        <NodeComponentWrapper<NodeType>
           key={nodeId}
           id={nodeId}
           nodeOrigin={nodeOrigin}
@@ -60,7 +61,7 @@ function MiniMapNodes({
   );
 }
 
-const NodeComponentWrapper = memo(function NodeComponentWrapper({
+function NodeComponentWrapperInner<NodeType extends Node>({
   id,
   nodeOrigin,
   nodeColorFunc,
@@ -74,9 +75,9 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({
 }: {
   id: string;
   nodeOrigin: NodeOrigin;
-  nodeColorFunc: GetMiniMapNodeAttribute;
+  nodeColorFunc: GetMiniMapNodeAttribute<NodeType>;
-  nodeStrokeColorFunc: GetMiniMapNodeAttribute;
+  nodeStrokeColorFunc: GetMiniMapNodeAttribute<NodeType>;
-  nodeClassNameFunc: GetMiniMapNodeAttribute;
+  nodeClassNameFunc: GetMiniMapNodeAttribute<NodeType>;
   nodeBorderRadius: number;
   nodeStrokeWidth?: number;
   NodeComponent: ComponentType<MiniMapNodeProps>;
@@ -84,7 +85,7 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({
   shapeRendering: string;
 }) {
   const { node, x, y } = useStore((s) => {
-    const node = s.nodeLookup.get(id);
+    const node = s.nodeLookup.get(id) as NodeType;
     const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
 
     return {
@@ -115,6 +116,8 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({
       id={node.id}
     />
   );
-});
+}
 
-export default memo(MiniMapNodes);
+const NodeComponentWrapper = memo(NodeComponentWrapperInner) as typeof NodeComponentWrapperInner;
+
+export default memo(MiniMapNodes) as typeof MiniMapNodes;

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -5,20 +5,20 @@ import { EdgeAnchor } from '../Edges/EdgeAnchor';
 import type { EdgeWrapperProps, Edge } from '../../types/edges';
 import { useStoreApi } from '../../hooks/useStore';
 
-type EdgeUpdateAnchorsProps = {
+type EdgeUpdateAnchorsProps<EdgeType extends Edge = Edge> = {
-  edge: Edge;
+  edge: EdgeType;
   isUpdatable: boolean | 'source' | 'target';
   edgeUpdaterRadius: EdgeWrapperProps['edgeUpdaterRadius'];
   sourceHandleId: Edge['sourceHandle'];
   targetHandleId: Edge['targetHandle'];
-  onEdgeUpdate: EdgeWrapperProps['onEdgeUpdate'];
+  onEdgeUpdate: EdgeWrapperProps<EdgeType>['onEdgeUpdate'];
-  onEdgeUpdateStart: EdgeWrapperProps['onEdgeUpdateStart'];
+  onEdgeUpdateStart: EdgeWrapperProps<EdgeType>['onEdgeUpdateStart'];
-  onEdgeUpdateEnd: EdgeWrapperProps['onEdgeUpdateEnd'];
+  onEdgeUpdateEnd: EdgeWrapperProps<EdgeType>['onEdgeUpdateEnd'];
   setUpdateHover: (hover: boolean) => void;
   setUpdating: (updating: boolean) => void;
 } & EdgePosition;
 
-export function EdgeUpdateAnchors({
+export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
   isUpdatable,
   edgeUpdaterRadius,
   edge,
@@ -35,7 +35,7 @@ export function EdgeUpdateAnchors({
   onEdgeUpdateEnd,
   setUpdating,
   setUpdateHover,
-}: EdgeUpdateAnchorsProps) {
+}: EdgeUpdateAnchorsProps<EdgeType>) {
   const store = useStoreApi();
 
   const handleEdgeUpdater = (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {

packages/react/src/components/EdgeWrapper/index.tsx

@@ -13,9 +13,9 @@ import { useStoreApi, useStore } from '../../hooks/useStore';
 import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
 import { builtinEdgeTypes, nullPosition } from './utils';
 import { EdgeUpdateAnchors } from './EdgeUpdateAnchors';
-import type { EdgeWrapperProps } from '../../types';
+import type { Edge, EdgeWrapperProps } from '../../types';
 
-export function EdgeWrapper({
+export function EdgeWrapper<EdgeType extends Edge = Edge>({
   id,
   edgesFocusable,
   edgesUpdatable,
@@ -34,8 +34,8 @@ export function EdgeWrapper({
   edgeTypes,
   noPanClassName,
   onError,
-}: EdgeWrapperProps): JSX.Element | null {
+}: EdgeWrapperProps<EdgeType>): JSX.Element | null {
-  let edge = useStore((s) => s.edgeLookup.get(id)!);
+  let edge = useStore((s) => s.edgeLookup.get(id)!) as EdgeType;
   const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
   edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
 
@@ -236,7 +236,7 @@ export function EdgeWrapper({
           />
         )}
         {isUpdatable && (
-          <EdgeUpdateAnchors
+          <EdgeUpdateAnchors<EdgeType>
             edge={edge}
             isUpdatable={isUpdatable}
             edgeUpdaterRadius={edgeUpdaterRadius}

packages/react/src/components/NodeWrapper/index.tsx

@@ -17,9 +17,9 @@ import { useDrag } from '../../hooks/useDrag';
 import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { handleNodeClick } from '../Nodes/utils';
 import { arrowKeyDiffs, builtinNodeTypes } from './utils';
-import type { NodeWrapperProps } from '../../types';
+import type { Node, NodeWrapperProps } from '../../types';
 
-export function NodeWrapper({
+export function NodeWrapper<NodeType extends Node>({
   id,
   onClick,
   onMouseEnter,
@@ -40,9 +40,9 @@ export function NodeWrapper({
   nodeExtent,
   nodeOrigin,
   onError,
-}: NodeWrapperProps) {
+}: NodeWrapperProps<NodeType>) {
   const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
-    const node = s.nodeLookup.get(id)!;
+    const node = s.nodeLookup.get(id)! as NodeType;
 
     const positionAbsolute = nodeExtent
       ? clampPosition(node.computed?.positionAbsolute, nodeExtent)

packages/react/src/components/NodesSelection/index.tsx

@@ -2,7 +2,6 @@
  * The nodes selection rectangle gets displayed when a user
  * made a selection with on or several nodes
  */
-
 import { useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
@@ -14,8 +13,8 @@ import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { arrowKeyDiffs } from '../NodeWrapper/utils';
 import type { Node, ReactFlowState } from '../../types';
 
-export type NodesSelectionProps = {
+export type NodesSelectionProps<NodeType> = {
-  onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
+  onSelectionContextMenu?: (event: MouseEvent, nodes: NodeType[]) => void;
   noPanClassName?: string;
   disableKeyboardA11y: boolean;
 };
@@ -32,8 +31,12 @@ const selector = (s: ReactFlowState) => {
   };
 };
 
-export function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
+export function NodesSelection<NodeType extends Node>({
-  const store = useStoreApi();
+  onSelectionContextMenu,
+  noPanClassName,
+  disableKeyboardA11y,
+}: NodesSelectionProps<NodeType>) {
+  const store = useStoreApi<NodeType>();
   const { width, height, transformString, userSelectionActive } = useStore(selector, shallow);
   const moveSelectedNodes = useMoveSelectedNodes();
 

packages/react/src/components/StoreUpdater/index.tsx

@@ -68,7 +68,12 @@ const reactFlowFieldsToTrack = [
 ] as const;
 
 type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
-type StoreUpdaterProps = Pick<ReactFlowProps, ReactFlowFieldsToTrack> & { rfId: string };
+type StoreUpdaterProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Pick<
+  ReactFlowProps<NodeType, EdgeType>,
+  ReactFlowFieldsToTrack
+> & {
+  rfId: string;
+};
 
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
 const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'] as const;
@@ -97,7 +102,9 @@ const initPrevValues = {
   rfId: '1',
 };
 
-export function StoreUpdater(props: StoreUpdaterProps) {
+export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
+  props: StoreUpdaterProps<NodeType, EdgeType>
+) {
   const {
     setNodes,
     setEdges,
@@ -108,7 +115,7 @@ export function StoreUpdater(props: StoreUpdaterProps) {
     reset,
     setDefaultNodesAndEdges,
   } = useStore(selector, shallow);
-  const store = useStoreApi();
+  const store = useStoreApi<NodeType, EdgeType>();
 
   useEffect(() => {
     setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
@@ -120,7 +127,7 @@ export function StoreUpdater(props: StoreUpdaterProps) {
     };
   }, []);
 
-  const previousFields = useRef<Partial<StoreUpdaterProps>>(initPrevValues);
+  const previousFields = useRef<Partial<StoreUpdaterProps<NodeType, EdgeType>>>(initPrevValues);
 
   useEffect(
     () => {

packages/react/src/container/EdgeRenderer/index.tsx

@@ -6,10 +6,10 @@ import { useVisibleEdgeIds } from '../../hooks/useVisibleEdgeIds';
 import MarkerDefinitions from './MarkerDefinitions';
 import { GraphViewProps } from '../GraphView';
 import { EdgeWrapper } from '../../components/EdgeWrapper';
-import type { ReactFlowState } from '../../types';
+import type { Edge, ReactFlowState, Node } from '../../types';
 
-type EdgeRendererProps = Pick<
+type EdgeRendererProps<EdgeType extends Edge = Edge> = Pick<
-  GraphViewProps,
+  GraphViewProps<Node, EdgeType>,
   | 'onEdgeClick'
   | 'onEdgeDoubleClick'
   | 'defaultMarkerColor'
@@ -40,7 +40,7 @@ const selector = (s: ReactFlowState) => ({
   onError: s.onError,
 });
 
-function EdgeRendererComponent({
+function EdgeRendererComponent<EdgeType extends Edge = Edge>({
   defaultMarkerColor,
   onlyRenderVisibleElements,
   rfId,
@@ -56,7 +56,7 @@ function EdgeRendererComponent({
   onEdgeDoubleClick,
   onEdgeUpdateStart,
   onEdgeUpdateEnd,
-}: EdgeRendererProps) {
+}: EdgeRendererProps<EdgeType>) {
   const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
   const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
 
@@ -66,7 +66,7 @@ function EdgeRendererComponent({
 
       {edgeIds.map((id) => {
         return (
-          <EdgeWrapper
+          <EdgeWrapper<EdgeType>
             key={id}
             id={id}
             edgesFocusable={edgesFocusable}
@@ -95,4 +95,4 @@ function EdgeRendererComponent({
 
 EdgeRendererComponent.displayName = 'EdgeRenderer';
 
-export const EdgeRenderer = memo(EdgeRendererComponent);
+export const EdgeRenderer = memo(EdgeRendererComponent) as typeof EdgeRendererComponent;

packages/react/src/container/FlowRenderer/index.tsx

@@ -7,10 +7,10 @@ import { GraphViewProps } from '../GraphView';
 import { ZoomPane } from '../ZoomPane';
 import { Pane } from '../Pane';
 import { NodesSelection } from '../../components/NodesSelection';
-import type { ReactFlowState } from '../../types';
+import type { ReactFlowState, Node } from '../../types';
 
-export type FlowRendererProps = Omit<
+export type FlowRendererProps<NodeType extends Node = Node> = Omit<
-  GraphViewProps,
+  GraphViewProps<NodeType>,
   | 'snapToGrid'
   | 'nodeTypes'
   | 'edgeTypes'
@@ -32,7 +32,7 @@ const selector = (s: ReactFlowState) => {
   return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };
 
-const FlowRendererComponent = ({
+function FlowRendererComponent<NodeType extends Node = Node>({
   children,
   onPaneClick,
   onPaneMouseEnter,
@@ -68,7 +68,7 @@ const FlowRendererComponent = ({
   disableKeyboardA11y,
   onViewportChange,
   isControlledViewport,
-}: FlowRendererProps) => {
+}: FlowRendererProps<NodeType>) {
   const { nodesSelectionActive, userSelectionActive } = useStore(selector);
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
   const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
@@ -125,8 +125,8 @@ const FlowRendererComponent = ({
       </Pane>
     </ZoomPane>
   );
-};
+}
 
 FlowRendererComponent.displayName = 'FlowRenderer';
 
-export const FlowRenderer = memo(FlowRendererComponent);
+export const FlowRenderer = memo(FlowRendererComponent) as typeof FlowRendererComponent;

packages/react/src/container/GraphView/index.tsx

@@ -8,15 +8,15 @@ import { useOnInitHandler } from '../../hooks/useOnInitHandler';
 import { useViewportSync } from '../../hooks/useViewportSync';
 import { ConnectionLineWrapper } from '../../components/ConnectionLine';
 import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
-import type { ReactFlowProps } from '../../types';
+import type { Edge, Node, ReactFlowProps } from '../../types';
 
-export type GraphViewProps = Omit<
+export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<
-  ReactFlowProps,
+  ReactFlowProps<NodeType, EdgeType>,
   'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'
 > &
   Required<
     Pick<
-      ReactFlowProps,
+      ReactFlowProps<NodeType, EdgeType>,
       | 'selectionKeyCode'
       | 'deleteKeyCode'
       | 'multiSelectionKeyCode'
@@ -37,7 +37,7 @@ export type GraphViewProps = Omit<
     rfId: string;
   };
 
-function GraphViewComponent({
+function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge = Edge>({
   nodeTypes,
   edgeTypes,
   onInit,
@@ -101,7 +101,7 @@ function GraphViewComponent({
   rfId,
   viewport,
   onViewportChange,
-}: GraphViewProps) {
+}: GraphViewProps<NodeType, EdgeType>) {
   useNodeOrEdgeTypesWarning(nodeTypes);
   useNodeOrEdgeTypesWarning(edgeTypes);
 
@@ -109,7 +109,7 @@ function GraphViewComponent({
   useViewportSync(viewport);
 
   return (
-    <FlowRenderer
+    <FlowRenderer<NodeType>
       onPaneClick={onPaneClick}
       onPaneMouseEnter={onPaneMouseEnter}
       onPaneMouseMove={onPaneMouseMove}
@@ -147,7 +147,7 @@ function GraphViewComponent({
       isControlledViewport={!!viewport}
     >
       <Viewport>
-        <EdgeRenderer
+        <EdgeRenderer<EdgeType>
           edgeTypes={edgeTypes}
           onEdgeClick={onEdgeClick}
           onEdgeDoubleClick={onEdgeDoubleClick}
@@ -173,7 +173,7 @@ function GraphViewComponent({
         />
         <div className="react-flow__edgelabel-renderer" />
         <div className="react-flow__viewport-portal" />
-        <NodeRenderer
+        <NodeRenderer<NodeType>
           nodeTypes={nodeTypes}
           onNodeClick={onNodeClick}
           onNodeDoubleClick={onNodeDoubleClick}
@@ -196,4 +196,4 @@ function GraphViewComponent({
 
 GraphViewComponent.displayName = 'GraphView';
 
-export const GraphView = memo(GraphViewComponent);
+export const GraphView = memo(GraphViewComponent) as typeof GraphViewComponent;

packages/react/src/container/NodeRenderer/index.tsx

@@ -7,10 +7,10 @@ import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
 import { useResizeObserver } from './useResizeObserver';
 import { NodeWrapper } from '../../components/NodeWrapper';
-import type { ReactFlowState } from '../../types';
+import type { Node, ReactFlowState } from '../../types';
 
-export type NodeRendererProps = Pick<
+export type NodeRendererProps<NodeType extends Node> = Pick<
-  GraphViewProps,
+  GraphViewProps<NodeType>,
   | 'onNodeClick'
   | 'onNodeDoubleClick'
   | 'onNodeMouseEnter'
@@ -35,7 +35,7 @@ const selector = (s: ReactFlowState) => ({
   onError: s.onError,
 });
 
-const NodeRendererComponent = (props: NodeRendererProps) => {
+function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<NodeType>) {
   const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
   const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
   const resizeObserver = useResizeObserver();
@@ -67,7 +67,7 @@ const NodeRendererComponent = (props: NodeRendererProps) => {
           //   moved into `NodeComponentWrapper`. This ensures they are
           //   memorized – so if `NodeRenderer` *has* to rerender, it only
           //   needs to regenerate the list of nodes, nothing else.
-          <NodeWrapper
+          <NodeWrapper<NodeType>
             key={nodeId}
             id={nodeId}
             nodeTypes={props.nodeTypes}
@@ -94,8 +94,8 @@ const NodeRendererComponent = (props: NodeRendererProps) => {
       })}
     </div>
   );
-};
+}
 
 NodeRendererComponent.displayName = 'NodeRenderer';
 
-export const NodeRenderer = memo(NodeRendererComponent);
+export const NodeRenderer = memo(NodeRendererComponent) as typeof NodeRendererComponent;

packages/react/src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type CSSProperties } from 'react';
+import { ForwardedRef, forwardRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import { ConnectionLineType, PanOnScrollMode, SelectionMode, infiniteExtent, isMacOs } from '@xyflow/system';
 
@@ -9,7 +9,7 @@ import { StoreUpdater } from '../../components/StoreUpdater';
 import { useColorModeClass } from '../../hooks/useColorModeClass';
 import { GraphView } from '../GraphView';
 import { Wrapper } from './Wrapper';
-import type { ReactFlowProps, ReactFlowRefType } from '../../types';
+import type { Edge, Node, ReactFlowProps, ReactFlowRefType } from '../../types';
 import { defaultViewport as initViewport, defaultNodeOrigin } from './init-values';
 
 const wrapperStyle: CSSProperties = {
@@ -20,280 +20,268 @@ const wrapperStyle: CSSProperties = {
   zIndex: 0,
 };
 
-const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
+function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
-  (
+  {
-    {
+    nodes,
-      nodes,
+    edges,
-      edges,
+    defaultNodes,
-      defaultNodes,
+    defaultEdges,
-      defaultEdges,
+    className,
-      className,
+    nodeTypes,
-      nodeTypes,
+    edgeTypes,
-      edgeTypes,
+    onNodeClick,
-      onNodeClick,
+    onEdgeClick,
-      onEdgeClick,
+    onInit,
-      onInit,
+    onMove,
-      onMove,
+    onMoveStart,
-      onMoveStart,
+    onMoveEnd,
-      onMoveEnd,
+    onConnect,
-      onConnect,
+    onConnectStart,
-      onConnectStart,
+    onConnectEnd,
-      onConnectEnd,
+    onClickConnectStart,
-      onClickConnectStart,
+    onClickConnectEnd,
-      onClickConnectEnd,
+    onNodeMouseEnter,
-      onNodeMouseEnter,
+    onNodeMouseMove,
-      onNodeMouseMove,
+    onNodeMouseLeave,
-      onNodeMouseLeave,
+    onNodeContextMenu,
-      onNodeContextMenu,
+    onNodeDoubleClick,
-      onNodeDoubleClick,
+    onNodeDragStart,
-      onNodeDragStart,
+    onNodeDrag,
-      onNodeDrag,
+    onNodeDragStop,
-      onNodeDragStop,
+    onNodesDelete,
-      onNodesDelete,
+    onEdgesDelete,
-      onEdgesDelete,
+    onDelete,
-      onDelete,
+    onSelectionChange,
-      onSelectionChange,
+    onSelectionDragStart,
-      onSelectionDragStart,
+    onSelectionDrag,
-      onSelectionDrag,
+    onSelectionDragStop,
-      onSelectionDragStop,
+    onSelectionContextMenu,
-      onSelectionContextMenu,
+    onSelectionStart,
-      onSelectionStart,
+    onSelectionEnd,
-      onSelectionEnd,
+    onBeforeDelete,
-      onBeforeDelete,
+    connectionMode,
-      connectionMode,
+    connectionLineType = ConnectionLineType.Bezier,
-      connectionLineType = ConnectionLineType.Bezier,
+    connectionLineStyle,
-      connectionLineStyle,
+    connectionLineComponent,
-      connectionLineComponent,
+    connectionLineContainerStyle,
-      connectionLineContainerStyle,
+    deleteKeyCode = 'Backspace',
-      deleteKeyCode = 'Backspace',
+    selectionKeyCode = 'Shift',
-      selectionKeyCode = 'Shift',
+    selectionOnDrag = false,
-      selectionOnDrag = false,
+    selectionMode = SelectionMode.Full,
-      selectionMode = SelectionMode.Full,
+    panActivationKeyCode = 'Space',
-      panActivationKeyCode = 'Space',
+    multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
-      multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
+    zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
-      zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
+    snapToGrid,
-      snapToGrid,
+    snapGrid,
-      snapGrid,
+    onlyRenderVisibleElements = false,
-      onlyRenderVisibleElements = false,
+    selectNodesOnDrag,
-      selectNodesOnDrag,
+    nodesDraggable,
-      nodesDraggable,
+    nodesConnectable,
-      nodesConnectable,
+    nodesFocusable,
-      nodesFocusable,
+    nodeOrigin = defaultNodeOrigin,
-      nodeOrigin = defaultNodeOrigin,
+    edgesFocusable,
-      edgesFocusable,
+    edgesUpdatable,
-      edgesUpdatable,
+    elementsSelectable = true,
-      elementsSelectable = true,
+    defaultViewport = initViewport,
-      defaultViewport = initViewport,
+    minZoom = 0.5,
-      minZoom = 0.5,
+    maxZoom = 2,
-      maxZoom = 2,
+    translateExtent = infiniteExtent,
-      translateExtent = infiniteExtent,
+    preventScrolling = true,
-      preventScrolling = true,
+    nodeExtent,
-      nodeExtent,
+    defaultMarkerColor = '#b1b1b7',
-      defaultMarkerColor = '#b1b1b7',
+    zoomOnScroll = true,
-      zoomOnScroll = true,
+    zoomOnPinch = true,
-      zoomOnPinch = true,
+    panOnScroll = false,
-      panOnScroll = false,
+    panOnScrollSpeed = 0.5,
-      panOnScrollSpeed = 0.5,
+    panOnScrollMode = PanOnScrollMode.Free,
-      panOnScrollMode = PanOnScrollMode.Free,
+    zoomOnDoubleClick = true,
-      zoomOnDoubleClick = true,
+    panOnDrag = true,
-      panOnDrag = true,
+    onPaneClick,
-      onPaneClick,
+    onPaneMouseEnter,
-      onPaneMouseEnter,
+    onPaneMouseMove,
-      onPaneMouseMove,
+    onPaneMouseLeave,
-      onPaneMouseLeave,
+    onPaneScroll,
-      onPaneScroll,
+    onPaneContextMenu,
-      onPaneContextMenu,
+    children,
-      children,
+    onEdgeUpdate,
-      onEdgeUpdate,
+    onEdgeContextMenu,
-      onEdgeContextMenu,
+    onEdgeDoubleClick,
-      onEdgeDoubleClick,
+    onEdgeMouseEnter,
-      onEdgeMouseEnter,
+    onEdgeMouseMove,
-      onEdgeMouseMove,
+    onEdgeMouseLeave,
-      onEdgeMouseLeave,
+    onEdgeUpdateStart,
-      onEdgeUpdateStart,
+    onEdgeUpdateEnd,
-      onEdgeUpdateEnd,
+    edgeUpdaterRadius = 10,
-      edgeUpdaterRadius = 10,
+    onNodesChange,
-      onNodesChange,
+    onEdgesChange,
-      onEdgesChange,
+    noDragClassName = 'nodrag',
-      noDragClassName = 'nodrag',
+    noWheelClassName = 'nowheel',
-      noWheelClassName = 'nowheel',
+    noPanClassName = 'nopan',
-      noPanClassName = 'nopan',
+    fitView,
-      fitView,
+    fitViewOptions,
-      fitViewOptions,
+    connectOnClick,
-      connectOnClick,
+    attributionPosition,
-      attributionPosition,
+    proOptions,
-      proOptions,
+    defaultEdgeOptions,
-      defaultEdgeOptions,
+    elevateNodesOnSelect,
-      elevateNodesOnSelect,
+    elevateEdgesOnSelect,
-      elevateEdgesOnSelect,
+    disableKeyboardA11y = false,
-      disableKeyboardA11y = false,
+    autoPanOnConnect,
-      autoPanOnConnect,
+    autoPanOnNodeDrag,
-      autoPanOnNodeDrag,
+    connectionRadius,
-      connectionRadius,
+    isValidConnection,
-      isValidConnection,
+    onError,
-      onError,
+    style,
-      style,
+    id,
-      id,
+    nodeDragThreshold,
-      nodeDragThreshold,
+    viewport,
-      viewport,
+    onViewportChange,
-      onViewportChange,
+    width,
-      width,
+    height,
-      height,
+    colorMode = 'light',
-      colorMode = 'light',
+    ...rest
-      ...rest
+  }: ReactFlowProps<NodeType, EdgeType>,
-    },
+  ref: ForwardedRef<ReactFlowRefType>
-    ref
+) {
-  ) => {
+  const rfId = id || '1';
-    const rfId = id || '1';
+  const colorModeClassName = useColorModeClass(colorMode);
-    const colorModeClassName = useColorModeClass(colorMode);
 
-    return (
+  return (
-      <div
+    <div
-        {...rest}
+      {...rest}
-        style={{ ...style, ...wrapperStyle }}
+      style={{ ...style, ...wrapperStyle }}
-        ref={ref}
+      ref={ref}
-        className={cc(['react-flow', className, colorModeClassName])}
+      className={cc(['react-flow', className, colorModeClassName])}
-        data-testid="rf__wrapper"
+      data-testid="rf__wrapper"
-        id={id}
+      id={id}
-      >
+    >
-        <Wrapper
+      <Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
+        <GraphView<NodeType, EdgeType>
+          onInit={onInit}
+          onNodeClick={onNodeClick}
+          onEdgeClick={onEdgeClick}
+          onNodeMouseEnter={onNodeMouseEnter}
+          onNodeMouseMove={onNodeMouseMove}
+          onNodeMouseLeave={onNodeMouseLeave}
+          onNodeContextMenu={onNodeContextMenu}
+          onNodeDoubleClick={onNodeDoubleClick}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          connectionLineType={connectionLineType}
+          connectionLineStyle={connectionLineStyle}
+          connectionLineComponent={connectionLineComponent}
+          connectionLineContainerStyle={connectionLineContainerStyle}
+          selectionKeyCode={selectionKeyCode}
+          selectionOnDrag={selectionOnDrag}
+          selectionMode={selectionMode}
+          deleteKeyCode={deleteKeyCode}
+          multiSelectionKeyCode={multiSelectionKeyCode}
+          panActivationKeyCode={panActivationKeyCode}
+          zoomActivationKeyCode={zoomActivationKeyCode}
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
+          defaultViewport={defaultViewport}
+          translateExtent={translateExtent}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          preventScrolling={preventScrolling}
+          zoomOnScroll={zoomOnScroll}
+          zoomOnPinch={zoomOnPinch}
+          zoomOnDoubleClick={zoomOnDoubleClick}
+          panOnScroll={panOnScroll}
+          panOnScrollSpeed={panOnScrollSpeed}
+          panOnScrollMode={panOnScrollMode}
+          panOnDrag={panOnDrag}
+          onPaneClick={onPaneClick}
+          onPaneMouseEnter={onPaneMouseEnter}
+          onPaneMouseMove={onPaneMouseMove}
+          onPaneMouseLeave={onPaneMouseLeave}
+          onPaneScroll={onPaneScroll}
+          onPaneContextMenu={onPaneContextMenu}
+          onSelectionContextMenu={onSelectionContextMenu}
+          onSelectionStart={onSelectionStart}
+          onSelectionEnd={onSelectionEnd}
+          onEdgeUpdate={onEdgeUpdate}
+          onEdgeContextMenu={onEdgeContextMenu}
+          onEdgeDoubleClick={onEdgeDoubleClick}
+          onEdgeMouseEnter={onEdgeMouseEnter}
+          onEdgeMouseMove={onEdgeMouseMove}
+          onEdgeMouseLeave={onEdgeMouseLeave}
+          onEdgeUpdateStart={onEdgeUpdateStart}
+          onEdgeUpdateEnd={onEdgeUpdateEnd}
+          edgeUpdaterRadius={edgeUpdaterRadius}
+          defaultMarkerColor={defaultMarkerColor}
+          noDragClassName={noDragClassName}
+          noWheelClassName={noWheelClassName}
+          noPanClassName={noPanClassName}
+          rfId={rfId}
+          disableKeyboardA11y={disableKeyboardA11y}
+          nodeOrigin={nodeOrigin}
+          nodeExtent={nodeExtent}
+          viewport={viewport}
+          onViewportChange={onViewportChange}
+        />
+        <StoreUpdater<NodeType, EdgeType>
           nodes={nodes}
           edges={edges}
           defaultNodes={defaultNodes}
           defaultEdges={defaultEdges}
-          width={width}
+          onConnect={onConnect}
-          height={height}
+          onConnectStart={onConnectStart}
+          onConnectEnd={onConnectEnd}
+          onClickConnectStart={onClickConnectStart}
+          onClickConnectEnd={onClickConnectEnd}
+          nodesDraggable={nodesDraggable}
+          nodesConnectable={nodesConnectable}
+          nodesFocusable={nodesFocusable}
+          edgesFocusable={edgesFocusable}
+          edgesUpdatable={edgesUpdatable}
+          elementsSelectable={elementsSelectable}
+          elevateNodesOnSelect={elevateNodesOnSelect}
+          elevateEdgesOnSelect={elevateEdgesOnSelect}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          nodeExtent={nodeExtent}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          snapToGrid={snapToGrid}
+          snapGrid={snapGrid}
+          connectionMode={connectionMode}
+          translateExtent={translateExtent}
+          connectOnClick={connectOnClick}
+          defaultEdgeOptions={defaultEdgeOptions}
           fitView={fitView}
-        >
+          fitViewOptions={fitViewOptions}
-          <GraphView
+          onNodesDelete={onNodesDelete}
-            onInit={onInit}
+          onEdgesDelete={onEdgesDelete}
-            onNodeClick={onNodeClick}
+          onDelete={onDelete}
-            onEdgeClick={onEdgeClick}
+          onNodeDragStart={onNodeDragStart}
-            onNodeMouseEnter={onNodeMouseEnter}
+          onNodeDrag={onNodeDrag}
-            onNodeMouseMove={onNodeMouseMove}
+          onNodeDragStop={onNodeDragStop}
-            onNodeMouseLeave={onNodeMouseLeave}
+          onSelectionDrag={onSelectionDrag}
-            onNodeContextMenu={onNodeContextMenu}
+          onSelectionDragStart={onSelectionDragStart}
-            onNodeDoubleClick={onNodeDoubleClick}
+          onSelectionDragStop={onSelectionDragStop}
-            nodeTypes={nodeTypes}
+          onMove={onMove}
-            edgeTypes={edgeTypes}
+          onMoveStart={onMoveStart}
-            connectionLineType={connectionLineType}
+          onMoveEnd={onMoveEnd}
-            connectionLineStyle={connectionLineStyle}
+          noPanClassName={noPanClassName}
-            connectionLineComponent={connectionLineComponent}
+          nodeOrigin={nodeOrigin}
-            connectionLineContainerStyle={connectionLineContainerStyle}
+          rfId={rfId}
-            selectionKeyCode={selectionKeyCode}
+          autoPanOnConnect={autoPanOnConnect}
-            selectionOnDrag={selectionOnDrag}
+          autoPanOnNodeDrag={autoPanOnNodeDrag}
-            selectionMode={selectionMode}
+          onError={onError}
-            deleteKeyCode={deleteKeyCode}
+          connectionRadius={connectionRadius}
-            multiSelectionKeyCode={multiSelectionKeyCode}
+          isValidConnection={isValidConnection}
-            panActivationKeyCode={panActivationKeyCode}
+          selectNodesOnDrag={selectNodesOnDrag}
-            zoomActivationKeyCode={zoomActivationKeyCode}
+          nodeDragThreshold={nodeDragThreshold}
-            onlyRenderVisibleElements={onlyRenderVisibleElements}
+          onBeforeDelete={onBeforeDelete}
-            defaultViewport={defaultViewport}
+        />
-            translateExtent={translateExtent}
+        <SelectionListener onSelectionChange={onSelectionChange} />
-            minZoom={minZoom}
+        {children}
-            maxZoom={maxZoom}
+        <Attribution proOptions={proOptions} position={attributionPosition} />
-            preventScrolling={preventScrolling}
+        <A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
-            zoomOnScroll={zoomOnScroll}
+      </Wrapper>
-            zoomOnPinch={zoomOnPinch}
+    </div>
-            zoomOnDoubleClick={zoomOnDoubleClick}
+  );
-            panOnScroll={panOnScroll}
+}
-            panOnScrollSpeed={panOnScrollSpeed}
-            panOnScrollMode={panOnScrollMode}
-            panOnDrag={panOnDrag}
-            onPaneClick={onPaneClick}
-            onPaneMouseEnter={onPaneMouseEnter}
-            onPaneMouseMove={onPaneMouseMove}
-            onPaneMouseLeave={onPaneMouseLeave}
-            onPaneScroll={onPaneScroll}
-            onPaneContextMenu={onPaneContextMenu}
-            onSelectionContextMenu={onSelectionContextMenu}
-            onSelectionStart={onSelectionStart}
-            onSelectionEnd={onSelectionEnd}
-            onEdgeUpdate={onEdgeUpdate}
-            onEdgeContextMenu={onEdgeContextMenu}
-            onEdgeDoubleClick={onEdgeDoubleClick}
-            onEdgeMouseEnter={onEdgeMouseEnter}
-            onEdgeMouseMove={onEdgeMouseMove}
-            onEdgeMouseLeave={onEdgeMouseLeave}
-            onEdgeUpdateStart={onEdgeUpdateStart}
-            onEdgeUpdateEnd={onEdgeUpdateEnd}
-            edgeUpdaterRadius={edgeUpdaterRadius}
-            defaultMarkerColor={defaultMarkerColor}
-            noDragClassName={noDragClassName}
-            noWheelClassName={noWheelClassName}
-            noPanClassName={noPanClassName}
-            rfId={rfId}
-            disableKeyboardA11y={disableKeyboardA11y}
-            nodeOrigin={nodeOrigin}
-            nodeExtent={nodeExtent}
-            viewport={viewport}
-            onViewportChange={onViewportChange}
-          />
-          <StoreUpdater
-            nodes={nodes}
-            edges={edges}
-            defaultNodes={defaultNodes}
-            defaultEdges={defaultEdges}
-            onConnect={onConnect}
-            onConnectStart={onConnectStart}
-            onConnectEnd={onConnectEnd}
-            onClickConnectStart={onClickConnectStart}
-            onClickConnectEnd={onClickConnectEnd}
-            nodesDraggable={nodesDraggable}
-            nodesConnectable={nodesConnectable}
-            nodesFocusable={nodesFocusable}
-            edgesFocusable={edgesFocusable}
-            edgesUpdatable={edgesUpdatable}
-            elementsSelectable={elementsSelectable}
-            elevateNodesOnSelect={elevateNodesOnSelect}
-            elevateEdgesOnSelect={elevateEdgesOnSelect}
-            minZoom={minZoom}
-            maxZoom={maxZoom}
-            nodeExtent={nodeExtent}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            snapToGrid={snapToGrid}
-            snapGrid={snapGrid}
-            connectionMode={connectionMode}
-            translateExtent={translateExtent}
-            connectOnClick={connectOnClick}
-            defaultEdgeOptions={defaultEdgeOptions}
-            fitView={fitView}
-            fitViewOptions={fitViewOptions}
-            onNodesDelete={onNodesDelete}
-            onEdgesDelete={onEdgesDelete}
-            onDelete={onDelete}
-            onNodeDragStart={onNodeDragStart}
-            onNodeDrag={onNodeDrag}
-            onNodeDragStop={onNodeDragStop}
-            onSelectionDrag={onSelectionDrag}
-            onSelectionDragStart={onSelectionDragStart}
-            onSelectionDragStop={onSelectionDragStop}
-            onMove={onMove}
-            onMoveStart={onMoveStart}
-            onMoveEnd={onMoveEnd}
-            noPanClassName={noPanClassName}
-            nodeOrigin={nodeOrigin}
-            rfId={rfId}
-            autoPanOnConnect={autoPanOnConnect}
-            autoPanOnNodeDrag={autoPanOnNodeDrag}
-            onError={onError}
-            connectionRadius={connectionRadius}
-            isValidConnection={isValidConnection}
-            selectNodesOnDrag={selectNodesOnDrag}
-            nodeDragThreshold={nodeDragThreshold}
-            onBeforeDelete={onBeforeDelete}
-          />
-          <SelectionListener onSelectionChange={onSelectionChange} />
-          {children}
-          <Attribution proOptions={proOptions} position={attributionPosition} />
-          <A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
-        </Wrapper>
-      </div>
-    );
-  }
-);
 
-ReactFlow.displayName = 'ReactFlow';
+export default forwardRef(ReactFlow) as typeof ReactFlow;
-
-export default ReactFlow;

packages/react/src/hooks/useEdges.ts

@@ -11,8 +11,8 @@ const edgesSelector = (state: ReactFlowState) => state.edges;
  * @public
  * @returns An array of edges
  */
-export function useEdges<EdgeData>(): Edge<EdgeData>[] {
+export function useEdges<EdgeType extends Edge = Edge>(): EdgeType[] {
-  const edges = useStore(edgesSelector, shallow);
+  const edges = useStore(edgesSelector, shallow) as EdgeType[];
 
   return edges;
 }

packages/react/src/hooks/useNodesEdgesState.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback, type Dispatch, type SetStateAction } from 'react';
 
 import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
-import type { Node, NodeChange, Edge, EdgeChange } from '../types';
+import type { Node, Edge, OnNodesChange, OnEdgesChange } from '../types';
 
 /**
  * Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
@@ -10,12 +10,12 @@ import type { Node, NodeChange, Edge, EdgeChange } from '../types';
  * @param initialNodes
  * @returns an array [nodes, setNodes, onNodesChange]
  */
-export function useNodesState<NodeType extends Node = Node>(
+export function useNodesState<NodeType extends Node>(
   initialNodes: NodeType[]
-): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange<NodeType>[]) => void] {
+): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnNodesChange<NodeType>] {
   const [nodes, setNodes] = useState(initialNodes);
-  const onNodesChange = useCallback(
+  const onNodesChange: OnNodesChange<NodeType> = useCallback(
-    (changes: NodeChange<NodeType>[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
     []
   );
 
@@ -31,10 +31,10 @@ export function useNodesState<NodeType extends Node = Node>(
  */
 export function useEdgesState<EdgeType extends Edge = Edge>(
   initialEdges: EdgeType[]
-): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange<EdgeType>[]) => void] {
+): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnEdgesChange<EdgeType>] {
   const [edges, setEdges] = useState(initialEdges);
-  const onEdgesChange = useCallback(
+  const onEdgesChange: OnEdgesChange<EdgeType> = useCallback(
-    (changes: EdgeChange<EdgeType>[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
     []
   );
 

packages/react/src/hooks/useOnInitHandler.ts

@@ -1,15 +1,17 @@
 import { useEffect, useRef } from 'react';
 
 import { useReactFlow } from './useReactFlow';
-import type { OnInit } from '../types';
+import type { OnInit, Node, Edge } from '../types';
 
 /**
  * Hook for calling onInit handler.
  *
  * @internal
  */
-export function useOnInitHandler(onInit: OnInit | undefined) {
+export function useOnInitHandler<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
-  const rfInstance = useReactFlow();
+  onInit: OnInit<NodeType, EdgeType> | undefined
+) {
+  const rfInstance = useReactFlow<NodeType, EdgeType>();
   const isInitialized = useRef<boolean>(false);
 
   useEffect(() => {

packages/react/src/hooks/useStore.ts

@@ -1,15 +1,13 @@
 import { useContext, useMemo } from 'react';
-import { useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional';
+import { UseBoundStoreWithEqualityFn, useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional';
-import type { StoreApi } from 'zustand';
 import { errorMessages } from '@xyflow/system';
 
 import StoreContext from '../contexts/RFStoreContext';
-import type { ReactFlowState } from '../types';
+import type { Edge, Node, ReactFlowState } from '../types';
+import { StoreApi } from 'zustand';
 
 const zustandErrorMessage = errorMessages['error001']();
 
-type ExtractState = StoreApi<ReactFlowState> extends { getState: () => infer T } ? T : never;
-
 /**
  * Hook for accessing the internal store. Should only be used in rare cases.
  *
@@ -17,8 +15,12 @@ type ExtractState = StoreApi<ReactFlowState> extends { getState: () => infer T }
  * @param selector
  * @param equalityFn
  * @returns The selected state slice
+ *
+ * @example
+ * const nodes = useStore((state: ReactFlowState<MyNodeType>) => state.nodes);
+ *
  */
-function useStore<StateSlice = ExtractState>(
+function useStore<StateSlice = unknown>(
   selector: (state: ReactFlowState) => StateSlice,
   equalityFn?: (a: StateSlice, b: StateSlice) => boolean
 ) {
@@ -31,8 +33,10 @@ function useStore<StateSlice = ExtractState>(
   return useZustandStore(store, selector, equalityFn);
 }
 
-const useStoreApi = () => {
+function useStoreApi<NodeType extends Node = Node, EdgeType extends Edge = Edge>() {
-  const store = useContext(StoreContext);
+  const store = useContext(StoreContext) as UseBoundStoreWithEqualityFn<
+    StoreApi<ReactFlowState<NodeType, EdgeType>>
+  > | null;
 
   if (store === null) {
     throw new Error(zustandErrorMessage);
@@ -47,6 +51,6 @@ const useStoreApi = () => {
     }),
     [store]
   );
-};
+}
 
 export { useStore, useStoreApi };

packages/react/src/index.ts

@@ -53,7 +53,6 @@ export {
   type OnConnectStart,
   type OnConnect,
   type OnConnectEnd,
-  type IsValidConnection,
   type Viewport,
   type SnapGrid,
   PanOnScrollMode,

packages/react/src/types/changes.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { XYPosition, Dimensions } from '@xyflow/system';
 
 import type { Node, Edge } from '.';

packages/react/src/types/component-props.ts

@@ -18,7 +18,6 @@ import type {
   HandleType,
   SelectionMode,
   OnError,
-  IsValidConnection,
   ColorMode,
   SnapGrid,
 } from '@xyflow/system';
@@ -44,13 +43,15 @@ import type {
   EdgeMouseHandler,
   OnNodeDrag,
   OnBeforeDelete,
+  IsValidConnection,
 } from '.';
 
 /**
  * ReactFlow component props.
  * @public
  */
-export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
+export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
   /** An array of nodes to render in a controlled flow.
    * @example
    * const nodes = [
@@ -62,7 +63,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
    *  }
    * ];
    */
-  nodes?: Node[];
+  nodes?: NodeType[];
   /** An array of edges to render in a controlled flow.
    * @example
    * const edges = [
@@ -73,11 +74,11 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
    *  }
    * ];
    */
-  edges?: Edge[];
+  edges?: EdgeType[];
   /** The initial nodes to render in an uncontrolled flow. */
-  defaultNodes?: Node[];
+  defaultNodes?: NodeType[];
   /** The initial edges to render in an uncontrolled flow. */
-  defaultEdges?: Edge[];
+  defaultEdges?: EdgeType[];
   /** 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.
@@ -99,38 +100,38 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
    */
   defaultEdgeOptions?: DefaultEdgeOptions;
   /** This event handler is called when a user clicks on a node */
-  onNodeClick?: NodeMouseHandler;
+  onNodeClick?: NodeMouseHandler<NodeType>;
   /** This event handler is called when a user double clicks on a node */
-  onNodeDoubleClick?: NodeMouseHandler;
+  onNodeDoubleClick?: NodeMouseHandler<NodeType>;
   /** This event handler is called when mouse of a user enters a node */
-  onNodeMouseEnter?: NodeMouseHandler;
+  onNodeMouseEnter?: NodeMouseHandler<NodeType>;
   /** This event handler is called when mouse of a user moves over a node */
-  onNodeMouseMove?: NodeMouseHandler;
+  onNodeMouseMove?: NodeMouseHandler<NodeType>;
   /** This event handler is called when mouse of a user leaves a node */
-  onNodeMouseLeave?: NodeMouseHandler;
+  onNodeMouseLeave?: NodeMouseHandler<NodeType>;
   /** This event handler is called when a user right clicks on a node */
-  onNodeContextMenu?: NodeMouseHandler;
+  onNodeContextMenu?: NodeMouseHandler<NodeType>;
   /** This event handler is called when a user starts to drag a node */
-  onNodeDragStart?: OnNodeDrag;
+  onNodeDragStart?: OnNodeDrag<NodeType>;
   /** This event handler is called when a user drags a node */
-  onNodeDrag?: OnNodeDrag;
+  onNodeDrag?: OnNodeDrag<NodeType>;
   /** This event handler is called when a user stops dragging a node */
-  onNodeDragStop?: OnNodeDrag;
+  onNodeDragStop?: OnNodeDrag<NodeType>;
   /** This event handler is called when a user clicks on an edge */
-  onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
+  onEdgeClick?: (event: ReactMouseEvent, edge: EdgeType) => void;
   /** This event handler is called when a user right clicks on an edge */
-  onEdgeContextMenu?: EdgeMouseHandler;
+  onEdgeContextMenu?: EdgeMouseHandler<EdgeType>;
   /** This event handler is called when mouse of a user enters an edge */
-  onEdgeMouseEnter?: EdgeMouseHandler;
+  onEdgeMouseEnter?: EdgeMouseHandler<EdgeType>;
   /** This event handler is called when mouse of a user moves over an edge */
-  onEdgeMouseMove?: EdgeMouseHandler;
+  onEdgeMouseMove?: EdgeMouseHandler<EdgeType>;
   /** This event handler is called when mouse of a user leaves an edge */
-  onEdgeMouseLeave?: EdgeMouseHandler;
+  onEdgeMouseLeave?: EdgeMouseHandler<EdgeType>;
   /** This event handler is called when a user double clicks on an edge */
-  onEdgeDoubleClick?: EdgeMouseHandler;
+  onEdgeDoubleClick?: EdgeMouseHandler<EdgeType>;
-  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
-  onEdgeUpdate?: OnEdgeUpdateFunc;
+  onEdgeUpdate?: OnEdgeUpdateFunc<EdgeType>;
   /** This event handler is called when a Node is updated
    * @example // Use NodesState hook to create edges and get onNodesChange handler
    * import ReactFlow, { useNodesState } from '@xyflow/react';
@@ -147,7 +148,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
    *
    * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
    */
-  onNodesChange?: OnNodesChange;
+  onNodesChange?: OnNodesChange<NodeType>;
   /** This event handler is called when a Edge is updated
    * @example // Use EdgesState hook to create edges and get onEdgesChange handler
    * import ReactFlow, { useEdgesState } from '@xyflow/react';
@@ -164,22 +165,22 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
    *
    * return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
    */
-  onEdgesChange?: OnEdgesChange;
+  onEdgesChange?: OnEdgesChange<EdgeType>;
   /** This event handler gets called when a Node is deleted */
-  onNodesDelete?: OnNodesDelete;
+  onNodesDelete?: OnNodesDelete<NodeType>;
   /** This event handler gets called when a Edge is deleted */
-  onEdgesDelete?: OnEdgesDelete;
+  onEdgesDelete?: OnEdgesDelete<EdgeType>;
   /** This event handler gets called when a Node or Edge is deleted */
-  onDelete?: OnDelete;
+  onDelete?: OnDelete<NodeType, EdgeType>;
   /** This event handler gets called when a user starts to drag a selection box */
-  onSelectionDragStart?: SelectionDragHandler;
+  onSelectionDragStart?: SelectionDragHandler<NodeType>;
   /** This event handler gets called when a user drags a selection box */
-  onSelectionDrag?: SelectionDragHandler;
+  onSelectionDrag?: SelectionDragHandler<NodeType>;
   /** This event handler gets called when a user stops dragging a selection box */
-  onSelectionDragStop?: SelectionDragHandler;
+  onSelectionDragStop?: SelectionDragHandler<NodeType>;
   onSelectionStart?: (event: ReactMouseEvent) => void;
   onSelectionEnd?: (event: ReactMouseEvent) => void;
-  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: NodeType[]) => void;
   /** When a connection line is completed and two nodes are connected by the user, this event fires with the new connection.
    *
    * You can use the addEdge utility to convert the connection to a complete edge.
@@ -201,7 +202,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onClickConnectStart?: OnConnectStart;
   onClickConnectEnd?: OnConnectEnd;
   /** This event handler gets called when a flow has finished initializing */
-  onInit?: OnInit;
+  onInit?: OnInit<NodeType, EdgeType>;
   /** This event handler is called while the user is either panning or zooming the viewport. */
   onMove?: OnMove;
   /** This event handler gets called when a user starts to pan or zoom the viewport */
@@ -223,7 +224,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   /** This event handler gets called when mouse leaves the pane */
   onPaneMouseLeave?: (event: ReactMouseEvent) => void;
   /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
-  onBeforeDelete?: OnBeforeDelete;
+  onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
   /** Custom node types to be available in a flow.
    *
    * React Flow matches a node's type to a component in the nodeTypes object.

packages/react/src/types/edges.ts

@@ -30,7 +30,14 @@ export type EdgeLabelOptions = {
 
 export type EdgeUpdatable = boolean | HandleType;
 
-export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> &
+/**
+ * The Edge type is mainly used for the `edges` that get passed to the ReactFlow component
+ * @public
+ */
+export type Edge<
+  EdgeData extends Record<string, unknown> = Record<string, unknown>,
+  EdgeType extends string | undefined = string | undefined
+> = EdgeBase<EdgeData, EdgeType> &
   EdgeLabelOptions & {
     style?: CSSProperties;
     className?: string;
@@ -38,45 +45,41 @@ export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> &
     focusable?: boolean;
   };
 
-type SmoothStepEdgeType<T> = DefaultEdge<T> & {
+type SmoothStepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
-  type: 'smoothstep';
+  EdgeData,
+  'smoothstep'
+> & {
   pathOptions?: SmoothStepPathOptions;
 };
 
-type BezierEdgeType<T> = DefaultEdge<T> & {
+type BezierEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData, 'default'> & {
-  type: 'default';
   pathOptions?: BezierPathOptions;
 };
 
-type StepEdgeType<T> = DefaultEdge<T> & {
+type StepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData, 'step'> & {
-  type: 'step';
   pathOptions?: StepPathOptions;
 };
 
-/**
+export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge;
- * The Edge type is mainly used for the `edges` that get passed to the ReactFlow component
- * @public
- */
-export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T> | StepEdgeType<T>;
 
-export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
+export type EdgeMouseHandler<EdgeType extends Edge = Edge> = (event: ReactMouseEvent, edge: EdgeType) => void;
 
-export type EdgeWrapperProps = {
+export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
   id: string;
   edgesFocusable: boolean;
   edgesUpdatable: boolean;
   elementsSelectable: boolean;
   noPanClassName: string;
-  onClick?: EdgeMouseHandler;
+  onClick?: EdgeMouseHandler<EdgeType>;
-  onDoubleClick?: EdgeMouseHandler;
+  onDoubleClick?: EdgeMouseHandler<EdgeType>;
-  onEdgeUpdate?: OnEdgeUpdateFunc;
+  onEdgeUpdate?: OnEdgeUpdateFunc<EdgeType>;
-  onContextMenu?: EdgeMouseHandler;
+  onContextMenu?: EdgeMouseHandler<EdgeType>;
-  onMouseEnter?: EdgeMouseHandler;
+  onMouseEnter?: EdgeMouseHandler<EdgeType>;
-  onMouseMove?: EdgeMouseHandler;
+  onMouseMove?: EdgeMouseHandler<EdgeType>;
-  onMouseLeave?: EdgeMouseHandler;
+  onMouseLeave?: EdgeMouseHandler<EdgeType>;
   edgeUpdaterRadius?: number;
-  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
   rfId?: string;
   edgeTypes?: EdgeTypes;
   onError?: OnError;
@@ -94,10 +97,10 @@ export type EdgeTextProps = HTMLAttributes<SVGElement> &
  * Custom edge component props
  * @public
  */
-export type EdgeProps<T = any> = Pick<
+export type EdgeProps<
-  Edge<T>,
+  EdgeData extends Record<string, unknown> = Record<string, unknown>,
-  'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
+  EdgeType extends string | undefined = string | undefined
-> &
+> = Pick<Edge<EdgeData, EdgeType>, 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'> &
   EdgePosition &
   EdgeLabelOptions & {
     sourceHandleId?: string | null;
@@ -185,7 +188,7 @@ export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'tar
  */
 export type SimpleBezierEdgeProps = EdgeComponentProps;
 
-export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
+export type OnEdgeUpdateFunc<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newConnection: Connection) => void;
 
 export type ConnectionLineComponentProps = {
   connectionLineStyle?: CSSProperties;

packages/react/src/types/general.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   FitViewParamsBase,
   FitViewOptionsBase,
@@ -12,6 +11,7 @@ import {
   XYPosition,
   NodeProps,
   OnBeforeDeleteBase,
+  Connection,
 } from '@xyflow/system';
 
 import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps } from '.';
@@ -21,8 +21,11 @@ export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<N
 export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
 
 export type OnNodesDelete<NodeType extends Node = Node> = (nodes: NodeType[]) => void;
-export type OnEdgesDelete = (edges: Edge[]) => void;
+export type OnEdgesDelete<EdgeType extends Edge = Edge> = (edges: EdgeType[]) => void;
-export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
+export type OnDelete<NodeType extends Node = Node, EdgeType extends Edge = Edge> = (params: {
+  nodes: NodeType[];
+  edges: EdgeType[];
+}) => void;
 
 export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
 export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
@@ -139,3 +142,5 @@ export type OnBeforeDelete<NodeType extends Node = Node, EdgeType extends Edge =
   NodeType,
   EdgeType
 >;
+
+export type IsValidConnection<EdgeType extends Edge = Edge> = (edge: EdgeType | Connection) => boolean;

packages/react/src/types/instance.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-namespace */
 import type { Rect, Viewport } from '@xyflow/system';
 import type { Node, Edge, ViewportHelperFunctions } from '.';

packages/react/src/types/nodes.ts

@@ -7,11 +7,10 @@ import { NodeTypes } from './general';
  * The node data structure that gets used for the nodes prop.
  * @public
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Node<
-export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
+  NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeData,
+  NodeType extends string | undefined = string | undefined
-  NodeType
+> = NodeBase<NodeData, NodeType> & {
-> & {
   style?: CSSProperties;
   className?: string;
   resizing?: boolean;
@@ -26,18 +25,18 @@ export type OnNodeDrag<NodeType extends Node = Node> = (
   nodes: NodeType[]
 ) => void;
 
-export type NodeWrapperProps = {
+export type NodeWrapperProps<NodeType extends Node> = {
   id: string;
   nodesConnectable: boolean;
   elementsSelectable: boolean;
   nodesDraggable: boolean;
   nodesFocusable: boolean;
-  onClick?: NodeMouseHandler;
+  onClick?: NodeMouseHandler<NodeType>;
-  onDoubleClick?: NodeMouseHandler;
+  onDoubleClick?: NodeMouseHandler<NodeType>;
-  onMouseEnter?: NodeMouseHandler;
+  onMouseEnter?: NodeMouseHandler<NodeType>;
-  onMouseMove?: NodeMouseHandler;
+  onMouseMove?: NodeMouseHandler<NodeType>;
-  onMouseLeave?: NodeMouseHandler;
+  onMouseLeave?: NodeMouseHandler<NodeType>;
-  onContextMenu?: NodeMouseHandler;
+  onContextMenu?: NodeMouseHandler<NodeType>;
   resizeObserver: ResizeObserver | null;
   noDragClassName: string;
   noPanClassName: string;
@@ -48,3 +47,5 @@ export type NodeWrapperProps = {
   nodeOrigin: NodeOrigin;
   onError?: OnError;
 };
+
+export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;

packages/react/src/types/store.ts

@@ -21,7 +21,6 @@ import {
   type OnMoveStart,
   type OnMove,
   type OnMoveEnd,
-  type IsValidConnection,
   type UpdateConnection,
   type EdgeLookup,
   type ConnectionLookup,
@@ -43,21 +42,22 @@ import type {
   OnDelete,
   OnNodeDrag,
   OnBeforeDelete,
+  IsValidConnection,
   EdgeChange,
 } from '.';
 
-export type ReactFlowStore = {
+export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
   rfId: string;
   width: number;
   height: number;
   transform: Transform;
-  nodes: Node[];
+  nodes: NodeType[];
-  nodeLookup: NodeLookup<Node>;
+  nodeLookup: NodeLookup<NodeType>;
   edges: Edge[];
-  edgeLookup: EdgeLookup<Edge>;
+  edgeLookup: EdgeLookup<EdgeType>;
   connectionLookup: ConnectionLookup;
-  onNodesChange: OnNodesChange | null;
+  onNodesChange: OnNodesChange<NodeType> | null;
-  onEdgesChange: OnEdgesChange | null;
+  onEdgesChange: OnEdgesChange<EdgeType> | null;
   hasDefaultNodes: boolean;
   hasDefaultEdges: boolean;
   domNode: HTMLDivElement | null;
@@ -99,9 +99,9 @@ export type ReactFlowStore = {
   connectionEndHandle: ConnectingHandle | null;
   connectionClickStartHandle: ConnectingHandle | null;
 
-  onNodeDragStart?: OnNodeDrag;
+  onNodeDragStart?: OnNodeDrag<NodeType>;
-  onNodeDrag?: OnNodeDrag;
+  onNodeDrag?: OnNodeDrag<NodeType>;
-  onNodeDragStop?: OnNodeDrag;
+  onNodeDragStop?: OnNodeDrag<NodeType>;
 
   onSelectionDragStart?: OnSelectionDrag;
   onSelectionDrag?: OnSelectionDrag;
@@ -125,8 +125,8 @@ export type ReactFlowStore = {
   fitViewDone: boolean;
   fitViewOnInitOptions: FitViewOptions | undefined;
 
-  onNodesDelete?: OnNodesDelete;
+  onNodesDelete?: OnNodesDelete<NodeType>;
-  onEdgesDelete?: OnEdgesDelete;
+  onEdgesDelete?: OnEdgesDelete<EdgeType>;
   onDelete?: OnDelete;
   onError?: OnError;
 
@@ -134,7 +134,7 @@ export type ReactFlowStore = {
   onViewportChangeStart?: OnViewportChange;
   onViewportChange?: OnViewportChange;
   onViewportChangeEnd?: OnViewportChange;
-  onBeforeDelete?: OnBeforeDelete;
+  onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
 
   onSelectionChangeHandlers: OnSelectionChangeFunc[];
 
@@ -143,14 +143,15 @@ export type ReactFlowStore = {
   autoPanOnNodeDrag: boolean;
   connectionRadius: number;
 
-  isValidConnection?: IsValidConnection;
+  isValidConnection?: IsValidConnection<EdgeType>;
 
   lib: string;
 };
 
-export type ReactFlowActions = {
+export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
-  setNodes: (nodes: Node[]) => void;
+  setNodes: (nodes: NodeType[]) => void;
-  setEdges: (edges: Edge[]) => void;
+  setEdges: (edges: EdgeType[]) => void;
+  setDefaultNodesAndEdges: (nodes?: NodeType[], edges?: EdgeType[]) => void;
   updateNodeDimensions: (updates: Map<string, NodeDimensionUpdate>) => void;
   updateNodePositions: UpdateNodePositions;
   resetSelectedElements: () => void;
@@ -164,11 +165,14 @@ export type ReactFlowActions = {
   cancelConnection: () => void;
   updateConnection: UpdateConnection;
   reset: () => void;
-  triggerNodeChanges: (changes: NodeChange[] | null) => void;
+  triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
-  triggerEdgeChanges: (changes: EdgeChange[] | null) => void;
+  triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
   panBy: PanBy;
-  fitView: (nodes: Node[], options?: FitViewOptions) => boolean;
+  fitView: (nodes: NodeType[], options?: FitViewOptions) => boolean;
-  setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
 };
 
-export type ReactFlowState = ReactFlowStore & ReactFlowActions;
+export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<
+  NodeType,
+  EdgeType
+> &
+  ReactFlowActions<NodeType, EdgeType>;

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

@@ -10,7 +10,6 @@ import type {
   OnMoveEnd,
   CoordinateExtent,
   PanOnScrollMode,
-  IsValidConnection,
   OnError,
   ConnectionMode,
   PanelPosition,
@@ -31,7 +30,8 @@ import type {
   FitViewOptions,
   OnDelete,
   OnEdgeCreate,
-  OnBeforeDelete
+  OnBeforeDelete,
+  IsValidConnection
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
 

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

@@ -3,7 +3,7 @@ import { derived, type Readable } from 'svelte/store';
 import type { Node } from '$lib/types';
 import { useStore } from '$lib/store';
 
-function areNodesDataEqual(a: Node['data'][] | null, b: Node['data'][] | null) {
+function areNodesDataEqual(a: (Node['data'] | null)[] | null, b: (Node['data'] | null)[] | null) {
   if ((!a && !b) || (!a?.length && !b?.length)) {
     true;
   }

packages/svelte/src/lib/index.ts

@@ -45,7 +45,7 @@ export type {
   DefaultEdgeOptions
 } from '$lib/types/edges';
 export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
-export type { Node, NodeTypes, DefaultNodeOptions } from '$lib/types/nodes';
+export type { Node, NodeTypes, DefaultNodeOptions, BuiltInNode } from '$lib/types/nodes';
 export type { SvelteFlowStore } from '$lib/store/types';
 
 // system types
@@ -66,7 +66,6 @@ export {
   type OnConnectStart,
   type OnConnect,
   type OnConnectEnd,
-  type IsValidConnection,
   type Viewport,
   type SnapGrid,
   PanOnScrollMode,

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

@@ -14,7 +14,6 @@ import {
   type MarkerProps,
   type PanZoomInstance,
   type CoordinateExtent,
-  type IsValidConnection,
   type NodeOrigin,
   type OnError,
   type Viewport,
@@ -47,7 +46,8 @@ import type {
   FitViewOptions,
   OnDelete,
   OnEdgeCreate,
-  OnBeforeDelete
+  OnBeforeDelete,
+  IsValidConnection
 } from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
 import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -79,7 +79,7 @@ export const getInitialStore = ({
   height?: number;
   fitView?: boolean;
 }) => {
-  const nodeLookup = new Map();
+  const nodeLookup: NodeLookup = new Map();
   const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { SvelteComponent, ComponentType } from 'svelte';
 import type {
   EdgeBase,
@@ -11,41 +10,49 @@ import type {
 
 import type { Node } from '$lib/types';
 
-export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
+/**
+ * The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component.
+ */
+export type Edge<
+  EdgeData extends Record<string, unknown> = Record<string, unknown>,
+  EdgeType extends string | undefined = string | undefined
+> = EdgeBase<EdgeData, EdgeType> & {
   label?: string;
   labelStyle?: string;
   style?: string;
   class?: string;
 };
 
-type SmoothStepEdgeType<T> = DefaultEdge<T> & {
+type SmoothStepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
-  type: 'smoothstep';
+  EdgeData,
+  'smoothstep'
+> & {
   pathOptions?: SmoothStepPathOptions;
 };
 
-type BezierEdgeType<T> = DefaultEdge<T> & {
+type BezierEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
-  type: 'default';
+  EdgeData,
+  'default'
+> & {
   pathOptions?: BezierPathOptions;
 };
 
-type StepEdgeType<T> = DefaultEdge<T> & {
+type StepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
-  type: 'step';
+  EdgeData,
+  'step'
+> & {
   pathOptions?: StepPathOptions;
 };
 
-/**
+export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge;
- * The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component.
- */
-export type Edge<T = any> =
-  | DefaultEdge<T>
-  | SmoothStepEdgeType<T>
-  | BezierEdgeType<T>
-  | StepEdgeType<T>;
 
 /**
  * Custom edge component props.
  */
-export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
+export type EdgeProps<
+  EdgeData extends Record<string, unknown> = Record<string, unknown>,
+  EdgeType extends string | undefined = string | undefined
+> = Omit<Edge<EdgeData, EdgeType>, 'sourceHandle' | 'targetHandle' | 'type'> &
   EdgePosition & {
     markerStart?: string;
     markerEnd?: string;

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

@@ -57,3 +57,7 @@ export type OnBeforeDelete<
   NodeType extends Node = Node,
   EdgeType extends Edge = Edge
 > = OnBeforeDeleteBase<NodeType, EdgeType>;
+
+export type IsValidConnection<EdgeType extends Edge = Edge> = (
+  edge: EdgeType | Connection
+) => boolean;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ComponentType, SvelteComponent } from 'svelte';
 import type { NodeBase, NodeProps } from '@xyflow/system';
 
@@ -7,7 +6,7 @@ import type { NodeBase, NodeProps } from '@xyflow/system';
  * @public
  */
 export type Node<
-  NodeData = any,
+  NodeData extends Record<string, unknown> = Record<string, unknown>,
   NodeType extends string | undefined = string | undefined
 > = NodeBase<NodeData, NodeType> & {
   class?: string;
@@ -17,3 +16,5 @@ export type Node<
 export type NodeTypes = Record<string, ComponentType<SvelteComponent<NodeProps>>>;
 
 export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;
+
+export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;

packages/system/src/types/edges.ts

@@ -1,11 +1,13 @@
 import { Position } from './utils';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type EdgeBase<
-export type EdgeBase<EdgeData = any> = {
+  EdgeData extends Record<string, unknown> = Record<string, unknown>,
+  EdgeType extends string | undefined = string | undefined
+> = {
   /** Unique id of an edge */
   id: string;
   /** Type of an edge defined in edgeTypes */
-  type?: string;
+  type?: EdgeType;
   /** Id of source node */
   source: string;
   /** Id of target node */

packages/system/src/types/nodes.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { internalsSymbol } from '../constants';
 import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 import { Optional } from '../utils/types';
@@ -6,10 +5,13 @@ import { Optional } from '../utils/types';
 /**
  * Framework independent node data structure.
  *
- * @typeParam T - type of the node data
+ * @typeParam NodeData - type of the node data
- * @typeParam U - type of the node
+ * @typeParam NodeType - type of the node
  */
-export type NodeBase<T = any, U extends string | undefined = string | undefined> = {
+export type NodeBase<
+  NodeData extends Record<string, unknown> = Record<string, unknown>,
+  NodeType extends string | undefined = string | undefined
+> = {
   /** Unique id of a node */
   id: string;
   /** Position of a node on the pane
@@ -17,9 +19,9 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
    */
   position: XYPosition;
   /** Arbitrary data passed to a node */
-  data: T;
+  data: NodeData;
   /** Type of node defined in nodeTypes */
-  type?: U;
+  type?: NodeType;
   /** Only relevant for default, source, target nodeType. controls source position
    * @example 'right', 'left', 'top', 'bottom'
    */
@@ -70,21 +72,20 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
     /** Holds a reference to the original node object provided by the user
      * (which may lack some fields, like `computed` or `[internalSymbol]`. Used
      * as an optimization to avoid certain operations. */
-    userProvidedNode: NodeBase<T, U>;
+    userProvidedNode: NodeBase<NodeData, NodeType>;
   };
 };
 
-// props that get passed to a custom node
 /**
  * The node data structure that gets used for the nodes prop.
  *
  * @public
  * @param id - The id of the node.
  */
-export type NodeProps<T = any> = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
-  /** Id of the node */
+export type NodeProps<NodeData = any> = {
   id: NodeBase['id'];
-  data: T;
+  data: NodeData;
   dragHandle: NodeBase['dragHandle'];
   type: NodeBase['type'];
   selected: NodeBase['selected'];