diff --git a/src/lib/Edges/BaseEdge.svelte b/src/lib/Edges/BaseEdge.svelte
index 6ab3c56f3..7cda93696 100644
--- a/src/lib/Edges/BaseEdge.svelte
+++ b/src/lib/Edges/BaseEdge.svelte
@@ -33,5 +33,11 @@
 	) : null;
 </script>
 
-<path {style} d={path} class="react-flow__edge-path" {markerEnd} {markerStart} />
+<path
+	{style}
+	d={path}
+	class="react-flow__edge-path"
+	marker-end={markerEnd}
+	marker-start={markerStart}
+/>
 {text}
diff --git a/src/lib/Edges/EdgeText.svelte b/src/lib/Edges/EdgeText.svelte
index 6098df69b..8affd553c 100644
--- a/src/lib/Edges/EdgeText.svelte
+++ b/src/lib/Edges/EdgeText.svelte
@@ -1,5 +1,89 @@
 <script lang="typescript">
-	import type { EdgeTextProps, Rect } from '../types'; //EdgeTextProps is currently commented out in types/edges.ts
+	// import React, { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
+	import { onMount } from 'svelte';
+	import cc from 'classcat';
 
-	const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+	import { EdgeTextProps, Rect } from '../../types';
+
+	export let {
+		//FC<PropsWithChildren<EdgeTextProps>>
+		x,
+		y,
+		label,
+		labelStyle = {},
+		labelShowBg = true,
+		labelBgStyle = {},
+		labelBgPadding = [2, 4],
+		labelBgBorderRadius = 2,
+		children,
+		className,
+		...rest
+	};
+
+	// const EdgeText: any = ({
+	// 	//FC<PropsWithChildren<EdgeTextProps>>
+	// 	x,
+	// 	y,
+	// 	label,
+	// 	labelStyle = {},
+	// 	labelShowBg = true,
+	// 	labelBgStyle = {},
+	// 	labelBgPadding = [2, 4],
+	// 	labelBgBorderRadius = 2,
+	// 	children,
+	// 	className,
+	// 	...rest
+	// }) => {
+	const edgeRef: SVGTextElement;
+	const [edgeTextBbox, setEdgeTextBbox]: Rect = { x: 0, y: 0, width: 0, height: 0 };
+	const edgeTextClasses = cc(['svelvet__edge-textwrapper', className]);
+
+	onMount(() => {
+		if (edgeRef.current) {
+			const textBbox = edgeRef.current.getBBox();
+
+			setEdgeTextBbox({
+				x: textBbox.x,
+				y: textBbox.y,
+				width: textBbox.width,
+				height: textBbox.height
+			});
+		}
+	}, [label]); //the typescript error on this line will be fixed once EdgeTextProps is uncommented
+
+	if (typeof label === 'undefined' || !label) {
+		return null;
+	}
+	// };
 </script>
+
+<g
+	transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`}
+	class={edgeTextClasses}
+	{...rest}
+>
+	<!-- {labelShowBg && ( -->
+	{#if labelShowBg}
+		<rect
+			width={edgeTextBbox.width + 2 * labelBgPadding[0]}
+			x={-labelBgPadding[0]}
+			y={-labelBgPadding[1]}
+			height={edgeTextBbox.height + 2 * labelBgPadding[1]}
+			className="react-flow__edge-textbg"
+			style={labelBgStyle}
+			rx={labelBgBorderRadius}
+			ry={labelBgBorderRadius}
+		/>
+	{/if}
+	<!-- )} -->
+	<text
+		class="react-flow__edge-text"
+		y={edgeTextBbox.height / 2}
+		dy="0.3em"
+		ref={edgeRef}
+		style={labelStyle}
+	>
+		{label}
+	</text>
+	{children}
+</g>
diff --git a/src/lib/Edges/SimpleBezierEdge.svelte b/src/lib/Edges/SimpleBezierEdge.svelte
index 0e91e9bbd..093f33b19 100644
--- a/src/lib/Edges/SimpleBezierEdge.svelte
+++ b/src/lib/Edges/SimpleBezierEdge.svelte
@@ -1,10 +1,10 @@
-<script lang="typescript">
-	// import React, { memo } from 'react';
+<script lang="typescript" context="module">
 	import type { EdgeProps } from '../types';
 	import { Position } from '../types';
 	import BaseEdge from './BaseEdge.svelte';
 
-	export let {
+	export let propsObj: any;
+	const {
 		sourceX,
 		sourceY,
 		targetX,
@@ -20,7 +20,7 @@
 		style,
 		markerEnd,
 		markerStart
-	}: EdgeProps;
+	}: EdgeProps = propsObj;
 
 	export interface GetSimpleBezierPathParams {
 		sourceX: number;