diff --git a/apps/svelte-example/src/App.svelte b/apps/svelte-example/src/App.svelte
index 5e48f8a..6c76cf7 100644
--- a/apps/svelte-example/src/App.svelte
+++ b/apps/svelte-example/src/App.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
-  import { createWebHaptics } from 'web-haptics/svelte';
+  import { createWebHaptics } from "web-haptics/svelte";
 
-  const { trigger, destroy } = createWebHaptics();
-  onDestroy(destroy);
+  const { trigger } = createWebHaptics();
 </script>
 
 <div class="container">
-  <button on:click={() => trigger()}>Tap me</button>
+  <button onclick={() => trigger()}>Tap me</button>
 </div>
 
 <style>
diff --git a/packages/web-haptics/src/svelte/createWebHaptics.ts b/packages/web-haptics/src/svelte/createWebHaptics.ts
index db51ac9..3fb04fe 100644
--- a/packages/web-haptics/src/svelte/createWebHaptics.ts
+++ b/packages/web-haptics/src/svelte/createWebHaptics.ts
@@ -1,3 +1,4 @@
+import { onDestroy } from "svelte";
 import { WebHaptics } from "../lib/web-haptics";
 import type {
   HapticInput,
@@ -15,5 +16,7 @@ export function createWebHaptics(options?: WebHapticsOptions) {
   const setDebug = (debug: boolean) => instance.setDebug(debug);
   const isSupported = WebHaptics.isSupported;
 
+  onDestroy(destroy);
+
   return { trigger, cancel, destroy, setDebug, isSupported };
 }
diff --git a/site/src/surfaces/usage/index.tsx b/site/src/surfaces/usage/index.tsx
index bc40168..eeb3b75 100644
--- a/site/src/surfaces/usage/index.tsx
+++ b/site/src/surfaces/usage/index.tsx
@@ -29,12 +29,10 @@ const { trigger } = useWebHaptics();
 </template>`,
   svelte: `<script>
   import { createWebHaptics } from "web-haptics/svelte";
-  import { onDestroy } from "svelte";
-  const { trigger, destroy } = createWebHaptics();
-  onDestroy(destroy);
+  const { trigger } = createWebHaptics();
 </script>
 
-<button on:click={() => trigger()}>Tap me</button>`,
+<button onclick={() => trigger()}>Tap me</button>`,
 };
 
 const frameworks = [