diff --git a/src/content/editor/getting-started/install/svelte.mdx b/src/content/editor/getting-started/install/svelte.mdx
index d2e7f8f0..87be6c8b 100644
--- a/src/content/editor/getting-started/install/svelte.mdx
+++ b/src/content/editor/getting-started/install/svelte.mdx
@@ -35,7 +35,7 @@ npm run dev
 Now that we're done with boilerplate, let's install Tiptap! For the following example you'll need the `@tiptap/core` package, with a few components, `@tiptap/pm`, and `@tiptap/starter-kit`, which includes the most common extensions to get started quickly.
 
 ```bash
-npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
+npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/extension-bubble-menu
 ```
 
 If you followed steps 1 and 2, you can now start your project with `npm run dev` and open [http://localhost:3000/](http://localhost:3000/) in your favorite browser. This might be different if you're working with an existing project.
@@ -47,68 +47,71 @@ To start using Tiptap, you'll need to add a new component to your app. Let's cal
 This is the fastest way to get Tiptap up and running with SvelteKit. It will give you a very basic version of Tiptap, without any buttons. No worries, you will be able to add more functionality soon.
 
 ```svelte
-import { Editor } from '@tiptap/core'
-  import { StarterKit } from '@tiptap/starter-kit'
-  import BubbleMenu from '@tiptap/extension-bubble-menu'
-
-  let bubbleMenu = $state()
-  let element = $state()
-  let editorState = $state({editor: null})
-
-  onMount(() => {
-    editor = new Editor({
-      element: element,
-      extensions: [
-        StarterKit,
-        BubbleMenu.configure({
-          element: bubbleMenu,
-        }),
-      ],
-      content: `
-        <h1>Hello Svelte! 🌍️ </h1>
-        <p>This editor is running in Svelte.</p>
-        <p>Select some text to see the bubble menu popping up.</p>
-      `,
-      onTransaction: ({editor}) => {
-        // force re-render so `editor.isActive` works as expected
-		editorState = { editor }
-      },
+<script>
+    import { Editor } from '@tiptap/core'
+    import { StarterKit } from '@tiptap/starter-kit'
+    import BubbleMenu from '@tiptap/extension-bubble-menu'
+    import {onMount} from "svelte";
+
+    let bubbleMenu = $state()
+    let element = $state()
+    let editorState = $state()
+
+    onMount(() => {
+        let editor = new Editor({
+            element: element,
+            extensions: [
+                StarterKit,
+                BubbleMenu.configure({
+                    element: bubbleMenu,
+                }),
+            ],
+            content: `
+            <h1>Hello Svelte! 🌍️ </h1>
+            <p>This editor is running in Svelte.</p>
+            <p>Select some text to see the bubble menu popping up.</p>
+          `,
+            onTransaction: ({editor}) => {
+                // force re-render so `editor.isActive` works as expected
+                editorState = { editor }
+            },
+        })
+
+        return () => {
+            editor.destroy()
+        }
     })
-  })
-  onDestroy(() => {
-    editor.destroy()
-  })
 </script>
 
 <div style="position: relative" class="app">
-  {#if editorState.editor}
-    <div class="fixed-menu">
-      <button
-        onclick={() => editorState.editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        class:active={editorState.editor.isActive('heading', { level: 1 })}
-      >
-        H1
-      </button>
-      <button
-        onclick={() => editorState.editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        class:active={editorState.editor.isActive('heading', { level: 2 })}
-      >
-        H2
-      </button>
-      <button onclick={() => editorState.editor.chain().focus().setParagraph().run()} class:active={editorState.editor.isActive('paragraph')}>
-        P
-      </button>
-    </div>
-  {/if}
-
-  <div bind:this={element}></div>
+    {#if editorState.editor}
+        <div class="fixed-menu">
+            <button
+                    onclick={() => editorState.editor.chain().focus().toggleHeading({ level: 1 }).run()}
+                    class:active={editorState.editor.isActive('heading', { level: 1 })}
+            >
+                H1
+            </button>
+            <button
+                    onclick={() => editorState.editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                    class:active={editorState.editor.isActive('heading', { level: 2 })}
+            >
+                H2
+            </button>
+            <button onclick={() => editorState.editor.chain().focus().setParagraph().run()} class:active={editorState.editor.isActive('paragraph')}>
+                P
+            </button>
+        </div>
+    {/if}
+
+    <div bind:this={element}></div>
 </div>
 
 <style>
-  button.active {
-    background: black;
-    color: white;
-  }
+    button.active {
+        background: black;
+        color: white;
+    }
 </style>
 
 ```
@@ -145,7 +148,7 @@ The example above uses the [Svelte runes syntax](https://svelte.dev/docs/svelte/
 
 ```svelte
 <script>
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount } from 'svelte';
 	import { Editor } from '@tiptap/core';
 	import StarterKit from '@tiptap/starter-kit';
 
@@ -162,11 +165,11 @@ The example above uses the [Svelte runes syntax](https://svelte.dev/docs/svelte/
 				editor = editor;
 			},
 		});
-	});
 
-	onDestroy(() => {
-		if (editor) {
-			editor.destroy();
+        return () => {
+			if (editor) {
+				editor.destroy();
+			}
 		}
 	});
 </script>
@@ -200,4 +203,4 @@ The example above uses the [Svelte runes syntax](https://svelte.dev/docs/svelte/
 		color: white;
 	}
 </style>
-```
\ No newline at end of file
+```