diff --git a/docs/components/examples/snap-to-handle/App.vue b/docs/components/examples/connection-radius/App.vue
similarity index 90%
rename from docs/components/examples/snap-to-handle/App.vue
rename to docs/components/examples/connection-radius/App.vue
index 2ea93848..faa7ad60 100644
--- a/docs/components/examples/snap-to-handle/App.vue
+++ b/docs/components/examples/connection-radius/App.vue
@@ -23,7 +23,7 @@ const elements = ref([
 </script>
 
 <template>
-  <VueFlow v-model="elements" auto-connect fit-view-on-init>
+  <VueFlow v-model="elements" :connection-radius="30" auto-connect fit-view-on-init>
     <template #connection-line="{ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }">
       <ConnectionLine
         :source-x="sourceX"
diff --git a/docs/components/examples/snap-to-handle/SnappableConnectionLine.vue b/docs/components/examples/connection-radius/SnappableConnectionLine.vue
similarity index 99%
rename from docs/components/examples/snap-to-handle/SnappableConnectionLine.vue
rename to docs/components/examples/connection-radius/SnappableConnectionLine.vue
index 4ed472f8..8f29ca45 100644
--- a/docs/components/examples/snap-to-handle/SnappableConnectionLine.vue
+++ b/docs/components/examples/connection-radius/SnappableConnectionLine.vue
@@ -45,7 +45,7 @@ const SNAP_HIGHLIGHT_COLOR = '#10b981'
 
 const MIN_DISTANCE = 75
 
-const SNAP_DISTANCE = 50
+const SNAP_DISTANCE = 30
 
 watch([() => props.targetY, () => props.targetX], (_, __, onCleanup) => {
   const closestNode = getNodes.value.reduce(
diff --git a/docs/components/examples/snap-to-handle/index.ts b/docs/components/examples/connection-radius/index.ts
similarity index 100%
rename from docs/components/examples/snap-to-handle/index.ts
rename to docs/components/examples/connection-radius/index.ts
diff --git a/docs/components/examples/index.ts b/docs/components/examples/index.ts
index 19c28541..fca8c60c 100644
--- a/docs/components/examples/index.ts
+++ b/docs/components/examples/index.ts
@@ -17,7 +17,7 @@ import { HorizontalApp, HorizontalElements } from './horizontal'
 import { TeleportApp, TeleportCSS, TeleportSidebar, TeleportableNode, TeleportableUseTransition } from './teleport'
 import { TransitionApp, TransitionCSS, TransitionEdge } from './transition'
 import { IntersectionApp, IntersectionCSS, IntersectionElements } from './intersection'
-import { SnapToHandleApp, SnappableConnectionLine } from './snap-to-handle'
+import { SnapToHandleApp, SnappableConnectionLine } from './connection-radius'
 import { NodeResizerApp, ResizableNode } from './node-resizer'
 import { ToolbarApp, ToolbarNode } from './node-toolbar'
 
diff --git a/docs/src/.vitepress/config.ts b/docs/src/.vitepress/config.ts
index e9ca57e9..0a1c8225 100644
--- a/docs/src/.vitepress/config.ts
+++ b/docs/src/.vitepress/config.ts
@@ -230,7 +230,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
             { text: 'Custom Connection Line', link: '/examples/edges/connection-line' },
             { text: 'Connection Validation', link: '/examples/edges/validation' },
-            { text: 'Snap To Handle', link: '/examples/edges/snap-to-handle' },
+            { text: 'Connection Radius', link: '/examples/edges/connection-radius' },
           ],
         },
       ],
diff --git a/docs/src/components.d.ts b/docs/src/components.d.ts
index 38e58499..8e9e3dbe 100644
--- a/docs/src/components.d.ts
+++ b/docs/src/components.d.ts
@@ -36,7 +36,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./../components/examples/dnd/Sidebar.vue')['default']
-    SnappableConnectionLine: typeof import('./../components/examples/snap-to-handle/SnappableConnectionLine.vue')['default']
+    SnappableConnectionLine: typeof import('../components/examples/connection-radius/SnappableConnectionLine.vue')['default']
     Team: typeof import('./../components/home/Team.vue')['default']
     TeleportableNode: typeof import('./../components/examples/teleport/TeleportableNode.vue')['default']
     ToolbarNode: typeof import('./../components/examples/node-toolbar/ToolbarNode.vue')['default']
diff --git a/docs/src/examples/edges/connection-radius.md b/docs/src/examples/edges/connection-radius.md
new file mode 100644
index 00000000..ff043cb9
--- /dev/null
+++ b/docs/src/examples/edges/connection-radius.md
@@ -0,0 +1,9 @@
+# Connection Radius
+
+This examples shows you how to use the `connectionRadius` prop.
+This prop allows you to pass a number which will be used to determine the radius at which a connection line will snap to the nearest handle.
+In addition, we create a custom connection line which will color the handles (you can omit this and just use `connectionRadius`).
+
+<div class="mt-6">
+  <Repl example="snappable"></Repl>
+</div>
diff --git a/docs/src/examples/edges/snap-to-handle.md b/docs/src/examples/edges/snap-to-handle.md
deleted file mode 100644
index 8e737137..00000000
--- a/docs/src/examples/edges/snap-to-handle.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Snap To Handle
-
-In this example we will create a custom connection line
-that snaps to the nearest handle when the connection is dropped within distance of a handle.
-
-<div class="mt-6">
-  <Repl example="snappable"></Repl>
-</div>