diff --git a/.changeset/eighty-crabs-shake.md b/.changeset/eighty-crabs-shake.md
new file mode 100644
index 0000000000..7e7a86c13c
--- /dev/null
+++ b/.changeset/eighty-crabs-shake.md
@@ -0,0 +1,7 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+'@xyflow/system': patch
+---
+
+Add `autoPanOnSelection` to auto-pan when user drags a selection close to the edge of the viewport.
diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx
index a24c908c89..ac86be9735 100644
--- a/examples/react/src/examples/Basic/index.tsx
+++ b/examples/react/src/examples/Basic/index.tsx
@@ -162,6 +162,7 @@ const BasicFlow = () => {
         selectNodesOnDrag={false}
         elevateEdgesOnSelect
         elevateNodesOnSelect={false}
+        autoPanOnSelection={true}
         nodeDragThreshold={0}
       >
         <Background variant={BackgroundVariant.Dots} />
diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte
index e83548fdd3..129cb90481 100644
--- a/examples/svelte/src/routes/examples/overview/Flow.svelte
+++ b/examples/svelte/src/routes/examples/overview/Flow.svelte
@@ -216,6 +216,7 @@
 	snapGrid={[25, 25]}
 	autoPanOnConnect
 	autoPanOnNodeDrag
+	autoPanOnSelection={true}
 	connectionMode={ConnectionMode.Strict}
 	attributionPosition={'top-center'}
 	deleteKey={['Backspace', 'd']}
diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx
index 2198ce5eb2..93e764a923 100644
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -61,6 +61,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag: _panOnDrag,
+  autoPanOnSelection,
   defaultViewport,
   translateExtent,
   minZoom,
@@ -118,6 +119,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
         onPaneContextMenu={onPaneContextMenu}
         onPaneScroll={onPaneScroll}
         panOnDrag={panOnDrag}
+        autoPanOnSelection={autoPanOnSelection}
         isSelecting={!!isSelecting}
         selectionMode={selectionMode}
         selectionKeyPressed={selectionKeyPressed}
diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index fd0296f170..3a43661f15 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -80,6 +80,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag,
+  autoPanOnSelection,
   onPaneClick,
   onPaneMouseEnter,
   onPaneMouseMove,
@@ -138,6 +139,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
       panOnScrollSpeed={panOnScrollSpeed}
       panOnScrollMode={panOnScrollMode}
       panOnDrag={panOnDrag}
+      autoPanOnSelection={autoPanOnSelection}
       defaultViewport={defaultViewport}
       translateExtent={translateExtent}
       minZoom={minZoom}
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 32a0e6df37..8552cbf4d7 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -1,4 +1,5 @@
 import {
+  useEffect,
   useRef,
   type MouseEventHandler,
   type MutableRefObject,
@@ -9,7 +10,16 @@ import {
 } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { getNodesInside, getEventPosition, SelectionMode, areSetsEqual } from '@xyflow/system';
+import {
+  getNodesInside,
+  getEventPosition,
+  SelectionMode,
+  areSetsEqual,
+  calcAutoPan,
+  pointToRendererPoint,
+  rendererPointToPoint,
+  XYPosition,
+} from '@xyflow/system';
 
 import { UserSelection } from '../../components/UserSelection';
 import { containerStyle } from '../../styles/utils';
@@ -27,6 +37,7 @@ type PaneProps = {
     ReactFlowProps,
     | 'selectionMode'
     | 'panOnDrag'
+    | 'autoPanOnSelection'
     | 'onSelectionStart'
     | 'onSelectionEnd'
     | 'onPaneClick'
@@ -56,6 +67,8 @@ const selector = (s: ReactFlowState) => ({
   elementsSelectable: s.elementsSelectable,
   connectionInProgress: s.connection.inProgress,
   dragging: s.paneDragging,
+  panBy: s.panBy,
+  autoPanSpeed: s.autoPanSpeed,
 });
 
 export function Pane({
@@ -63,6 +76,7 @@ export function Pane({
   selectionKeyPressed,
   selectionMode = SelectionMode.Full,
   panOnDrag,
+  autoPanOnSelection,
   paneClickDistance,
   selectionOnDrag,
   onSelectionStart,
@@ -75,8 +89,12 @@ export function Pane({
   onPaneMouseLeave,
   children,
 }: PaneProps) {
+  const autoPanId = useRef<number>(0);
   const store = useStoreApi();
-  const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector, shallow);
+  const { userSelectionActive, elementsSelectable, dragging, connectionInProgress, panBy, autoPanSpeed } = useStore(
+    selector,
+    shallow
+  );
   const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
 
   const container = useRef<HTMLDivElement | null>(null);
@@ -87,6 +105,10 @@ export function Pane({
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
 
+  // Used for auto pan when approaching the edges of the container during selection
+  const position = useRef<XYPosition>({ x: 0, y: 0 });
+  const autoPanStarted = useRef<boolean>(false);
+
   const onClick = (event: ReactMouseEvent) => {
     // We prevent click events when the user let go of the selectionKey during a selection
     // We also prevent click events when a connection is in progress
@@ -121,7 +143,7 @@ export function Pane({
   // We are using capture here in order to prevent other pointer events
   // to be able to create a selection above a node or an edge
   const onPointerDownCapture = (event: ReactPointerEvent): void => {
-    const { domNode } = store.getState();
+    const { domNode, transform } = store.getState();
     containerBounds.current = domNode?.getBoundingClientRect();
     if (!containerBounds.current) return;
 
@@ -139,13 +161,14 @@ export function Pane({
     selectionInProgress.current = false;
 
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
+    const userSelectionStartPosition = pointToRendererPoint({ x, y }, transform);
 
     store.setState({
       userSelectionRect: {
         width: 0,
         height: 0,
-        startX: x,
-        startY: y,
+        startX: userSelectionStartPosition.x,
+        startY: userSelectionStartPosition.y,
         x,
         y,
       },
@@ -157,9 +180,14 @@ export function Pane({
     }
   };
 
-  const onPointerMove = (event: ReactPointerEvent): void => {
+  // We commit the user selection rectangle to the store on auto-panning or pointer move during selection.
+  function commitUserSelectionRect(mouseX: number, mouseY: number): void {
+    const { userSelectionRect } = store.getState();
+    if (!userSelectionRect) {
+      return;
+    }
+
     const {
-      userSelectionRect,
       transform,
       nodeLookup,
       edgeLookup,
@@ -167,35 +195,20 @@ export function Pane({
       triggerNodeChanges,
       triggerEdgeChanges,
       defaultEdgeOptions,
-      resetSelectedElements,
     } = store.getState();
 
-    if (!containerBounds.current || !userSelectionRect) {
-      return;
-    }
-
-    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
-    const { startX, startY } = userSelectionRect;
-
-    if (!selectionInProgress.current) {
-      const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
-      const distance = Math.hypot(mouseX - startX, mouseY - startY);
-      if (distance <= requiredDistance) {
-        return;
-      }
-      resetSelectedElements();
-      onSelectionStart?.(event);
-    }
-
-    selectionInProgress.current = true;
-
+    const userStartPosition = { x: userSelectionRect.startX, y: userSelectionRect.startY };
+    const { x: screenStartX, y: screenStartY } = rendererPointToPoint(userStartPosition, transform);
+    // This has to be in screen coordinates, not in flow coordinates.
+    // We store the selection rectangle in userSelectionStartPosition coordinates to be able to
+    // fix the start position of the selection rectangle when we are auto-panning.
     const nextUserSelectRect = {
-      startX,
-      startY,
-      x: mouseX < startX ? mouseX : startX,
-      y: mouseY < startY ? mouseY : startY,
-      width: Math.abs(mouseX - startX),
-      height: Math.abs(mouseY - startY),
+      startX: userStartPosition.x,
+      startY: userStartPosition.y,
+      x: mouseX < screenStartX ? mouseX : screenStartX,
+      y: mouseY < screenStartY ? mouseY : screenStartY,
+      width: Math.abs(mouseX - screenStartX),
+      height: Math.abs(mouseY - screenStartY),
     };
 
     const prevSelectedNodeIds = selectedNodeIds.current;
@@ -237,6 +250,65 @@ export function Pane({
       userSelectionActive: true,
       nodesSelectionActive: false,
     });
+  }
+
+  function autoPan(): void {
+    if (!autoPanOnSelection || !containerBounds.current) {
+      return;
+    }
+    const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
+
+    panBy({ x, y }).then((panned) => {
+      if (!selectionInProgress.current || !panned) {
+        autoPanId.current = requestAnimationFrame(autoPan);
+        return;
+      }
+      const { x: mx, y: my } = position.current;
+      commitUserSelectionRect(mx, my);
+      autoPanId.current = requestAnimationFrame(autoPan);
+    });
+  }
+
+  const cleanupAutoPan = (): void => {
+    cancelAnimationFrame(autoPanId.current);
+    autoPanId.current = 0;
+    autoPanStarted.current = false;
+  };
+
+  useEffect(() => {
+    return () => cleanupAutoPan();
+  }, []);
+
+  const onPointerMove = (event: ReactPointerEvent): void => {
+    const { userSelectionRect, transform, resetSelectedElements } = store.getState();
+
+    if (!containerBounds.current || !userSelectionRect) {
+      return;
+    }
+
+    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
+    position.current = { x: mouseX, y: mouseY };
+
+    const screenStart = rendererPointToPoint({ x: userSelectionRect.startX, y: userSelectionRect.startY }, transform);
+
+    if (!selectionInProgress.current) {
+      const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
+      const distance = Math.hypot(mouseX - screenStart.x, mouseY - screenStart.y);
+      if (distance <= requiredDistance) {
+        return;
+      }
+      resetSelectedElements();
+      onSelectionStart?.(event);
+    }
+
+    selectionInProgress.current = true;
+
+    if (!autoPanStarted.current) {
+      autoPan();
+      autoPanStarted.current = true;
+    }
+
+    commitUserSelectionRect(mouseX, mouseY);
   };
 
   const onPointerUp = (event: ReactPointerEvent) => {
@@ -266,6 +338,13 @@ export function Pane({
         nodesSelectionActive: selectedNodeIds.current.size > 0,
       });
     }
+
+    cleanupAutoPan();
+  };
+
+  const onPointerCancel = (event: ReactPointerEvent) => {
+    (event.target as Partial<Element>)?.releasePointerCapture?.(event.pointerId);
+    cleanupAutoPan();
   };
 
   const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
@@ -279,6 +358,7 @@ export function Pane({
       onPointerEnter={isSelectionEnabled ? undefined : onPaneMouseEnter}
       onPointerMove={isSelectionEnabled ? onPointerMove : onPaneMouseMove}
       onPointerUp={isSelectionEnabled ? onPointerUp : undefined}
+      onPointerCancel={isSelectionEnabled ? onPointerCancel : undefined}
       onPointerDownCapture={isSelectionEnabled ? onPointerDownCapture : undefined}
       onClickCapture={isSelectionEnabled ? onClickCapture : undefined}
       onPointerLeave={onPaneMouseLeave}
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 1bbe506c2b..32ff50e8ca 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -132,6 +132,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     disableKeyboardA11y = false,
     autoPanOnConnect,
     autoPanOnNodeDrag,
+    autoPanOnSelection = true,
     autoPanSpeed,
     connectionRadius,
     isValidConnection,
@@ -285,6 +286,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           panOnScrollSpeed={panOnScrollSpeed}
           panOnScrollMode={panOnScrollMode}
           panOnDrag={panOnDrag}
+          autoPanOnSelection={autoPanOnSelection}
           onPaneClick={onPaneClick}
           onPaneMouseEnter={onPaneMouseEnter}
           onPaneMouseMove={onPaneMouseMove}
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index effc7ca66c..4ff095b24f 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -634,6 +634,12 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * @default true
    */
   autoPanOnConnect?: boolean;
+  /**
+   * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
+   * viewport while creating a selection box.
+   * @default true
+   */
+  autoPanOnSelection?: boolean;
   /**
    * The speed at which the viewport pans while dragging a node or a selection box.
    * @default 15
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index b7de8cfac6..2728dff560 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -39,7 +39,16 @@
 </script>
 
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
-  import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
+  import { onDestroy } from 'svelte';
+  import {
+    SelectionMode,
+    getEventPosition,
+    getNodesInside,
+    calcAutoPan,
+    pointToRendererPoint,
+    rendererPointToPoint,
+    type XYPosition
+  } from '@xyflow/system';
 
   import type { Node, Edge } from '$lib/types';
   import type { PaneProps } from './types';
@@ -49,6 +58,7 @@
     panOnDrag = true,
     paneClickDistance = 1,
     selectionOnDrag,
+    autoPanOnSelection = true,
     onpaneclick,
     onpanecontextmenu,
     onselectionstart,
@@ -78,6 +88,11 @@
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   let selectionInProgress = false;
 
+  // Used for auto pan when approaching the edges of the container during selection
+  let autoPanId: number = 0;
+  let position: XYPosition = { x: 0, y: 0 };
+  let autoPanStarted = false;
+
   // We start the selection process when the user clicks down on the pane
   function onPointerDownCapture(event: PointerEvent) {
     containerBounds = container?.getBoundingClientRect();
@@ -104,14 +119,22 @@
     (event.target as Partial<Element>)?.setPointerCapture?.(event.pointerId);
 
     selectionInProgress = false;
+    autoPanStarted = false;
 
     const { x, y } = getEventPosition(event, containerBounds);
 
+    // We convert the position to the flow space so that it stays fixed on the canvas while auto-panning
+    const userSelectionFlowOrigin = pointToRendererPoint({ x, y }, [
+      store.viewport.x,
+      store.viewport.y,
+      store.viewport.zoom
+    ]);
+
     store.selectionRect = {
       width: 0,
       height: 0,
-      startX: x,
-      startY: y,
+      startX: userSelectionFlowOrigin.x,
+      startY: userSelectionFlowOrigin.y,
       x,
       y
     };
@@ -122,32 +145,25 @@
     }
   }
 
-  function onPointerMove(event: PointerEvent) {
-    if (!isSelecting || !containerBounds || !store.selectionRect) {
+  // We commit the user selection rectangle to the store on auto-panning or pointer move
+  function commitUserSelectionRect(mouseX: number, mouseY: number): void {
+    if (store.selectionRect?.startX === undefined || store.selectionRect.startY === undefined) {
       return;
     }
 
-    const mousePos = getEventPosition(event, containerBounds);
-    const { startX = 0, startY = 0 } = store.selectionRect;
-
-    if (!selectionInProgress) {
-      const requiredDistance = store.selectionKeyPressed ? 0 : paneClickDistance;
-      const distance = Math.hypot(mousePos.x - startX, mousePos.y - startY);
-      if (distance <= requiredDistance) {
-        return;
-      }
-      store.unselectNodesAndEdges();
-      onselectionstart?.(event);
-    }
-
-    selectionInProgress = true;
-
+    const userStartPosition = { x: store.selectionRect?.startX, y: store.selectionRect?.startY };
+    const screenStart = rendererPointToPoint(userStartPosition, [
+      store.viewport.x,
+      store.viewport.y,
+      store.viewport.zoom
+    ]);
     const nextUserSelectRect = {
-      ...store.selectionRect,
-      x: mousePos.x < startX ? mousePos.x : startX,
-      y: mousePos.y < startY ? mousePos.y : startY,
-      width: Math.abs(mousePos.x - startX),
-      height: Math.abs(mousePos.y - startY)
+      startX: userStartPosition.x,
+      startY: userStartPosition.y,
+      x: mouseX < screenStart.x ? mouseX : screenStart.x,
+      y: mouseY < screenStart.y ? mouseY : screenStart.y,
+      width: Math.abs(mouseX - screenStart.x),
+      height: Math.abs(mouseY - screenStart.y)
     };
 
     const prevSelectedNodeIds = selectedNodeIds;
@@ -191,6 +207,67 @@
     store.selectionRect = nextUserSelectRect;
   }
 
+  function autoPan(): void {
+    if (!autoPanOnSelection || !containerBounds) {
+      return;
+    }
+    const [x, y] = calcAutoPan(position, containerBounds, store.autoPanSpeed);
+
+    store.panBy({ x, y }).then((panned) => {
+      if (!selectionInProgress || !panned) {
+        autoPanId = requestAnimationFrame(autoPan);
+        return;
+      }
+      commitUserSelectionRect(position.x, position.y);
+      autoPanId = requestAnimationFrame(autoPan);
+    });
+  }
+
+  function cleanupAutoPan(): void {
+    cancelAnimationFrame(autoPanId);
+    autoPanId = 0;
+    autoPanStarted = false;
+  }
+
+  onDestroy(() => {
+    cleanupAutoPan();
+  });
+
+  function onPointerMove(event: PointerEvent) {
+    if (!isSelecting || !containerBounds || !store.selectionRect) {
+      return;
+    }
+
+    const mousePos = getEventPosition(event, containerBounds);
+    position = { x: mousePos.x, y: mousePos.y };
+
+    const userStartPosition = { x: store.selectionRect.startX, y: store.selectionRect.startY };
+    const screenStart = rendererPointToPoint(userStartPosition, [
+      store.viewport.x,
+      store.viewport.y,
+      store.viewport.zoom
+    ]);
+
+    if (!selectionInProgress) {
+      const requiredDistance = store.selectionKeyPressed ? 0 : paneClickDistance;
+      const distance = Math.hypot(mousePos.x - screenStart.x, mousePos.y - screenStart.y);
+      if (distance <= requiredDistance) {
+        return;
+      }
+      store.unselectNodesAndEdges();
+      onselectionstart?.(event);
+    }
+
+    selectionInProgress = true;
+
+    if (!autoPanStarted) {
+      autoPan();
+      autoPanStarted = true;
+    }
+
+    commitUserSelectionRect(mousePos.x, mousePos.y);
+  }
+
   function onPointerUp(event: PointerEvent) {
     if (event.button !== 0) {
       return;
@@ -214,6 +291,13 @@
     if (selectionInProgress) {
       onselectionend?.(event);
     }
+
+    cleanupAutoPan();
+  }
+
+  function onPointerCancel(event: PointerEvent) {
+    (event.target as Partial<Element>)?.releasePointerCapture?.(event.pointerId);
+    cleanupAutoPan();
   }
 
   const onContextMenu = (event: MouseEvent) => {
@@ -259,6 +343,7 @@
   onpointerdowncapture={isSelectionEnabled ? onPointerDownCapture : undefined}
   onpointermove={isSelectionEnabled ? onPointerMove : undefined}
   onpointerup={isSelectionEnabled ? onPointerUp : undefined}
+  onpointercancel={isSelectionEnabled ? onPointerCancel : undefined}
   oncontextmenu={wrapHandler(onContextMenu, container)}
   onclickcapture={isSelectionEnabled ? onClickCapture : undefined}
 >
diff --git a/packages/svelte/src/lib/container/Pane/types.ts b/packages/svelte/src/lib/container/Pane/types.ts
index f0cef4df0d..6207eedb68 100644
--- a/packages/svelte/src/lib/container/Pane/types.ts
+++ b/packages/svelte/src/lib/container/Pane/types.ts
@@ -7,6 +7,7 @@ export type PaneProps<NodeType extends Node = Node, EdgeType extends Edge = Edge
   panOnDrag?: boolean | number[];
   paneClickDistance: number;
   selectionOnDrag?: boolean;
+  autoPanOnSelection?: boolean;
   onselectionstart?: (event: PointerEvent) => void;
   onselectionend?: (event: PointerEvent) => void;
   children: Snippet;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index a2283be7ef..60f6c7ef22 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -62,6 +62,7 @@
     panOnScrollSpeed = 0.5,
     panOnDrag = true,
     selectionOnDrag = false,
+    autoPanOnSelection = true,
     connectionLineComponent,
     connectionLineStyle,
     connectionLineContainerStyle,
@@ -171,6 +172,7 @@
       {panOnDrag}
       {paneClickDistance}
       {selectionOnDrag}
+      {autoPanOnSelection}
     >
       <ViewportComponent bind:store>
         <div class="svelte-flow__viewport-back svelte-flow__container"></div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index b931477440..5630753e20 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -97,6 +97,7 @@
     autoPanSpeed,
     panOnScrollSpeed,
     zIndexMode,
+    autoPanOnSelection,
     ...divAttributes
   } = $derived(rest);
   /* eslint-enable @typescript-eslint/no-unused-vars */
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 1e54e2f26a..6b12cc1762 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -353,6 +353,12 @@ export type SvelteFlowProps<
      * @default true
      */
     autoPanOnNodeDrag?: boolean;
+    /**
+     * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
+     * viewport while creating a selection box.
+     * @default true
+     */
+    autoPanOnSelection?: boolean;
     /**
      * 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.
diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts
index ee1a763e5a..368f2918d7 100644
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -139,36 +139,34 @@ export function XYPanZoom({
 
     d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
 
-    if (!userSelectionActive) {
-      // pan zoom start
-      const startHandler = createPanZoomStartHandler({
-        zoomPanValues,
-        onDraggingChange,
-        onPanZoomStart,
-      });
-      d3ZoomInstance.on('start', startHandler);
-
-      // pan zoom
-      const panZoomHandler = createPanZoomHandler({
-        zoomPanValues,
-        panOnDrag,
-        onPaneContextMenu: !!onPaneContextMenu,
-        onPanZoom,
-        onTransformChange,
-      });
-      d3ZoomInstance.on('zoom', panZoomHandler);
-
-      // pan zoom end
-      const panZoomEndHandler = createPanZoomEndHandler({
-        zoomPanValues,
-        panOnDrag,
-        panOnScroll,
-        onPaneContextMenu,
-        onPanZoomEnd,
-        onDraggingChange,
-      });
-      d3ZoomInstance.on('end', panZoomEndHandler);
-    }
+    // pan zoom start
+    const startHandler = createPanZoomStartHandler({
+      zoomPanValues,
+      onDraggingChange,
+      onPanZoomStart,
+    });
+    d3ZoomInstance.on('start', startHandler);
+
+    // pan zoom
+    const panZoomHandler = createPanZoomHandler({
+      zoomPanValues,
+      panOnDrag,
+      onPaneContextMenu: !!onPaneContextMenu,
+      onPanZoom,
+      onTransformChange,
+    });
+    d3ZoomInstance.on('zoom', panZoomHandler);
+
+    // pan zoom end
+    const panZoomEndHandler = createPanZoomEndHandler({
+      zoomPanValues,
+      panOnDrag,
+      panOnScroll,
+      onPaneContextMenu,
+      onPanZoomEnd,
+      onDraggingChange,
+    });
+    d3ZoomInstance.on('end', panZoomEndHandler);
 
     const filter = createFilter({
       zoomActivationKeyPressed,