diff --git a/svelte-commonmark/src/App.svelte b/svelte-commonmark/src/App.svelte
index 449f938e..d5e3dc4a 100644
--- a/svelte-commonmark/src/App.svelte
+++ b/svelte-commonmark/src/App.svelte
@@ -2,6 +2,7 @@
 import { Editor, rootCtx, defaultValueCtx } from '@milkdown/kit/core'
 import { commonmark } from '@milkdown/kit/preset/commonmark'
 import { nord } from '@milkdown/theme-nord'
+import type { Attachment } from "svelte/attachments";
 
 const markdown =
 `# Milkdown Svelte Commonmark
@@ -10,18 +11,27 @@ const markdown =
 
 This is a demo for using Milkdown with **Svelte**.`
 
-function editor(dom) {
-  Editor.make()
-    .config((ctx) => {
-      ctx.set(rootCtx, dom)
-      ctx.set(defaultValueCtx, markdown)
-    })
-    .config(nord)
-    .use(commonmark)
-    .create();
-}
+  const editor = (content: string): Attachment => {
+    return (dom) => {
+      const makeEditor = Editor.make()
+        .config((ctx) => {
+          ctx.set(rootCtx, dom);
+          ctx.set(defaultValueCtx, content);
+        })
+        .config(nord)
+        .use(commonmark)
+        .create();
+
+      return () => {
+        makeEditor.then((editor) => {
+          editor.destroy();
+        });
+      };
+    };
+  };
+
 </script>
 
 <main>
-  <div use:editor />
+  <div {@attach editor(markdown)} />
 </main>