diff --git a/docs/components/examples/transition/TransitionEdge.vue b/docs/components/examples/transition/TransitionEdge.vue
index 77bc8a27..f724f1f7 100644
--- a/docs/components/examples/transition/TransitionEdge.vue
+++ b/docs/components/examples/transition/TransitionEdge.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { TransitionPresets, useDebounceFn, useTransition, watchDebounced } from '@vueuse/core'
-import { BezierEdge, useVueFlow } from '@vue-flow/core'
-import { ref } from 'vue'
+import { getBezierPath, useVueFlow } from '@vue-flow/core'
+import { computed, ref } from 'vue'
 
 const props = defineProps({
   id: {
@@ -64,11 +64,21 @@ const showDot = ref(false)
 
 const { onNodeDoubleClick, fitBounds, fitView } = useVueFlow()
 
+const path = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+
 const debouncedFitBounds = useDebounceFn(fitBounds, 1, { maxWait: 1 })
 
 onNodeDoubleClick(({ node }) => {
   const isSource = props.source === node.id
-
   const isTarget = props.target === node.id
 
   if (!showDot.value && (isSource || isTarget)) {
@@ -140,7 +150,7 @@ export default {
 </script>
 
 <template>
-  <BezierEdge v-bind="props" />
+  <path :id="id" ref="curve" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
 
   <Transition name="fade">
     <circle