diff --git a/lib/client/vanilla/editor.tsx b/lib/client/vanilla/editor.tsx
index 603593e0..b6d9116e 100644
--- a/lib/client/vanilla/editor.tsx
+++ b/lib/client/vanilla/editor.tsx
@@ -414,7 +414,11 @@ function Editor({ standaloneServer = false }) {
           setOpen={setOpenLink}
           selectedElement={selectedElement as unknown as HTMLAnchorElement}
         />
-        <SvgDialog open={openSvg} setOpen={setOpenSvg} selectedElement={selectedElement as unknown as SVGElement} />
+        <SvgDialog
+          open={openSvg}
+          setOpen={setOpenSvg}
+          selectedElement={selectedElement as unknown as SVGTextPathElement}
+        />
         <div className="flex justify-center bg-gray-200" style={{ overflowY: 'scroll' }}>
           <div
             id="editor"
diff --git a/lib/client/vanilla/svg.tsx b/lib/client/vanilla/svg.tsx
index a2b44a16..ab529ac8 100644
--- a/lib/client/vanilla/svg.tsx
+++ b/lib/client/vanilla/svg.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'
@@ -9,16 +9,20 @@ import cx from 'classnames'
 type DialogProps = {
   open: boolean
   setOpen: any
-  selectedElement: SVGElement
+  selectedElement: SVGTextPathElement
 }
 
 const Dialog: React.FC<DialogProps> = ({ open, setOpen, selectedElement }) => {
   const [path, setPath] = useState('')
 
+  useEffect(() => {
+    setPath(selectedElement?.getAttribute('d') ?? '')
+  }, [open])
+
   const onSave = () => {
     setOpen(false)
 
-    // TODO update dom element
+    selectedElement.setAttribute('d', path)
   }
 
   return (