diff --git a/docs/examples/edges/App.vue b/docs/examples/edges/App.vue
index 4beafb21..85bbe39b 100644
--- a/docs/examples/edges/App.vue
+++ b/docs/examples/edges/App.vue
@@ -3,7 +3,7 @@ import { h, ref } from 'vue'
 import { Background } from '@vue-flow/background'
 import { MarkerType, VueFlow } from '@vue-flow/core'
 import EdgeWithButton from './EdgeWithButton.vue'
-import CustomEdge2 from './CustomEdge2.vue'
+import CustomEdge from './CustomEdge.vue'
 import CustomEdgeLabel from './CustomEdgeLabel.vue'
 
 const nodes = ref([
@@ -49,7 +49,7 @@ const edges = ref([
     id: 'e5-8',
     source: '5',
     target: '8',
-    type: 'custom',
+    type: 'button',
     data: { text: 'custom edge' },
     markerEnd: MarkerType.ArrowClosed,
   },
@@ -57,7 +57,7 @@ const edges = ref([
     id: 'e4-9',
     source: '4',
     target: '9',
-    type: 'custom2',
+    type: 'custom',
     data: { text: 'styled custom edge label' },
   },
 ])
@@ -65,12 +65,33 @@ const edges = ref([
 
 <template>
   <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
-    <template #edge-custom="props">
-      <EdgeWithButton v-bind="props" />
+    <template #edge-button="buttonEdgeProps">
+      <EdgeWithButton
+        :id="buttonEdgeProps.id"
+        :source-x="buttonEdgeProps.sourceX"
+        :source-y="buttonEdgeProps.sourceY"
+        :target-x="buttonEdgeProps.targetX"
+        :target-y="buttonEdgeProps.targetY"
+        :source-position="buttonEdgeProps.sourcePosition"
+        :target-position="buttonEdgeProps.targetPosition"
+        :marker-end="buttonEdgeProps.markerEnd"
+        :style="buttonEdgeProps.style"
+      />
     </template>
 
-    <template #edge-custom2="props">
-      <CustomEdge2 v-bind="props" />
+    <template #edge-custom="customEdgeProps">
+      <CustomEdge
+        :id="customEdgeProps.id"
+        :source-x="customEdgeProps.sourceX"
+        :source-y="customEdgeProps.sourceY"
+        :target-x="customEdgeProps.targetX"
+        :target-y="customEdgeProps.targetY"
+        :source-position="customEdgeProps.sourcePosition"
+        :target-position="customEdgeProps.targetPosition"
+        :data="customEdgeProps.data"
+        :marker-end="customEdgeProps.markerEnd"
+        :style="customEdgeProps.style"
+      />
     </template>
 
     <Background />
diff --git a/docs/examples/edges/CustomEdge2.vue b/docs/examples/edges/CustomEdge.vue
similarity index 90%
rename from docs/examples/edges/CustomEdge2.vue
rename to docs/examples/edges/CustomEdge.vue
index 07bfc7c6..00fa25ac 100644
--- a/docs/examples/edges/CustomEdge2.vue
+++ b/docs/examples/edges/CustomEdge.vue
@@ -43,14 +43,6 @@ const props = defineProps({
     type: Object,
     required: false,
   },
-  sourceHandleId: {
-    type: String,
-    required: false,
-  },
-  targetHandleId: {
-    type: String,
-    required: false,
-  },
 })
 
 const path = computed(() => getBezierPath(props))
diff --git a/docs/examples/edges/EdgeWithButton.vue b/docs/examples/edges/EdgeWithButton.vue
index 87b4c336..51ae6afb 100644
--- a/docs/examples/edges/EdgeWithButton.vue
+++ b/docs/examples/edges/EdgeWithButton.vue
@@ -31,10 +31,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  data: {
-    type: Object,
-    required: false,
-  },
   markerEnd: {
     type: String,
     required: false,
diff --git a/docs/examples/edges/index.ts b/docs/examples/edges/index.ts
index 561ffbf6..1597624b 100644
--- a/docs/examples/edges/index.ts
+++ b/docs/examples/edges/index.ts
@@ -1,5 +1,5 @@
 export { default as EdgesApp } from './App.vue?raw'
 export { default as EdgeWithButton } from './EdgeWithButton.vue?raw'
-export { default as CustomEdge2 } from './CustomEdge2.vue?raw'
+export { default as CustomEdge } from './CustomEdge.vue?raw'
 export { default as CustomEdgeLabel } from './CustomEdgeLabel.vue?raw'
 export { default as EdgeCSS } from './style.css?inline'
diff --git a/docs/examples/index.ts b/docs/examples/index.ts
index 87781c5e..525a4eff 100644
--- a/docs/examples/index.ts
+++ b/docs/examples/index.ts
@@ -1,7 +1,7 @@
 import { BasicApp, BasicCSS, BasicElements, BasicIcon } from './basic'
 import { ColorPresets, ColorSelectorNode, CustomNodeApp, CustomNodeCSS, OutputNode } from './custom-node'
 import { CustomConnectionLine, CustomConnectionLineApp } from './connectionline'
-import { CustomEdge2, CustomEdgeLabel, EdgeCSS, EdgeWithButton, EdgesApp } from './edges'
+import { CustomEdge, CustomEdgeLabel, EdgeCSS, EdgeWithButton, EdgesApp } from './edges'
 import { NestedApp } from './nested'
 import { StressApp, StressCSS, StressUtils } from './stress'
 import { UpdateEdgeApp } from './update-edge'
@@ -40,8 +40,8 @@ export const exampleImports = {
   },
   edges: {
     'App.vue': EdgesApp,
-    'CustomEdge.vue': EdgeWithButton,
-    'CustomEdge2.vue': CustomEdge2,
+    'EdgeWithButton.vue': EdgeWithButton,
+    'CustomEdge.vue': CustomEdge,
     'CustomEdgeLabel.vue': CustomEdgeLabel,
     'style.css': EdgeCSS,
   },
diff --git a/docs/examples/layout/AnimationEdge.vue b/docs/examples/layout/AnimationEdge.vue
index 715ff9fb..c8948134 100644
--- a/docs/examples/layout/AnimationEdge.vue
+++ b/docs/examples/layout/AnimationEdge.vue
@@ -177,7 +177,7 @@ export default {
 </script>
 
 <template>
-  <BaseEdge v-bind="$attrs" :id="id" ref="edgeRef" :path="path[0]" :style="{ stroke: edgeColor }" />
+  <BaseEdge :id="id" ref="edgeRef" :path="path[0]" :style="{ stroke: edgeColor }" />
 
   <EdgeLabelRenderer v-if="isAnimating">
     <div