diff --git a/examples/svelte/dynamic/package.json b/examples/svelte/dynamic/package.json
index a6219d16..2fd43619 100644
--- a/examples/svelte/dynamic/package.json
+++ b/examples/svelte/dynamic/package.json
@@ -13,12 +13,12 @@
     "@tanstack/svelte-virtual": "^3.13.12"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.20",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
   }
 }
diff --git a/examples/svelte/dynamic/src/ColumnVirtualizerDynamic.svelte b/examples/svelte/dynamic/src/ColumnVirtualizerDynamic.svelte
index 5213c0f0..10b09664 100644
--- a/examples/svelte/dynamic/src/ColumnVirtualizerDynamic.svelte
+++ b/examples/svelte/dynamic/src/ColumnVirtualizerDynamic.svelte
@@ -2,8 +2,8 @@
   import { faker } from '@faker-js/faker'
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
-  let virtualItemEls: HTMLDivElement[] = []
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let virtualItemEls = $state<HTMLDivElement[]>([])
 
   function randomNumber(min: number, max: number) {
     return faker.number.int({ min, max })
@@ -13,17 +13,21 @@
     .fill(true)
     .map(() => faker.lorem.sentence(randomNumber(20, 70)))
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    horizontal: true,
-    count: sentences.length,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 45,
-  })
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      horizontal: true,
+      count: sentences.length,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 45,
+    }),
+  )
 
-  $: {
+  $effect(() => {
     if (virtualItemEls.length)
       virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
-  }
+  })
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>
diff --git a/examples/svelte/dynamic/src/GridVirtualizerDynamic.svelte b/examples/svelte/dynamic/src/GridVirtualizerDynamic.svelte
index a11a4c48..e888df06 100644
--- a/examples/svelte/dynamic/src/GridVirtualizerDynamic.svelte
+++ b/examples/svelte/dynamic/src/GridVirtualizerDynamic.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
 
-  $: rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 35,
-    overscan: 5,
-  })
+  let rowVirtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 35,
+      overscan: 5,
+    }),
+  )
 
-  $: columnVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    horizontal: true,
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 100,
-    overscan: 5,
-  })
+  let columnVirtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      horizontal: true,
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 100,
+      overscan: 5,
+    }),
+  )
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>
diff --git a/examples/svelte/dynamic/src/RowVirtualizerDynamic.svelte b/examples/svelte/dynamic/src/RowVirtualizerDynamic.svelte
index 5450612e..7235fcd6 100644
--- a/examples/svelte/dynamic/src/RowVirtualizerDynamic.svelte
+++ b/examples/svelte/dynamic/src/RowVirtualizerDynamic.svelte
@@ -2,8 +2,8 @@
   import { faker } from '@faker-js/faker'
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
-  let virtualItemEls: HTMLDivElement[] = []
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let virtualItemEls = $state<HTMLDivElement[]>([])
 
   function randomNumber(min: number, max: number) {
     return faker.number.int({ min, max })
@@ -15,39 +15,43 @@
 
   const count = sentences.length
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 45,
-  })
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 45,
+    }),
+  )
 
-  $: items = $virtualizer.getVirtualItems()
+  let items = $derived($virtualizer.getVirtualItems())
 
-  $: {
+  $effect(() => {
     if (virtualItemEls.length)
       virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
-  }
+  })
 </script>
 
 <div>
   <button
-    on:click={() => {
+    onclick={() => {
       $virtualizer.scrollToIndex(0)
     }}
   >
     scroll to the top
   </button>
-  <span style="padding: 0 4px;" />
+  <span style="padding: 0 4px;"></span>
   <button
-    on:click={() => {
+    onclick={() => {
       $virtualizer.scrollToIndex(count / 2)
     }}
   >
     scroll to the middle
   </button>
-  <span style="padding: 0 4px;" />
+  <span style="padding: 0 4px;"></span>
   <button
-    on:click={() => {
+    onclick={() => {
       $virtualizer.scrollToIndex(count - 1)
     }}
   >
diff --git a/examples/svelte/dynamic/src/RowVirtualizerDynamicWindow.svelte b/examples/svelte/dynamic/src/RowVirtualizerDynamicWindow.svelte
index ed669969..ebd6ca46 100644
--- a/examples/svelte/dynamic/src/RowVirtualizerDynamicWindow.svelte
+++ b/examples/svelte/dynamic/src/RowVirtualizerDynamicWindow.svelte
@@ -2,8 +2,8 @@
   import { faker } from '@faker-js/faker'
   import { createWindowVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
-  let virtualItemEls: HTMLDivElement[] = []
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let virtualItemEls = $state<HTMLDivElement[]>([])
 
   function randomNumber(min: number, max: number) {
     return faker.number.int({ min, max })
@@ -15,18 +15,20 @@
 
   const count = sentences.length
 
-  $: virtualizer = createWindowVirtualizer<HTMLDivElement>({
-    count,
-    scrollMargin: virtualListEl?.offsetTop ?? 0,
-    estimateSize: () => 45,
-  })
+  let virtualizer = $derived(
+    createWindowVirtualizer<HTMLDivElement>({
+      count,
+      scrollMargin: virtualListEl?.offsetTop ?? 0,
+      estimateSize: () => 45,
+    }),
+  )
 
-  $: items = $virtualizer.getVirtualItems()
+  let items = $derived($virtualizer.getVirtualItems())
 
-  $: {
+  $effect(() => {
     if (virtualItemEls.length)
       virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
-  }
+  })
 </script>
 
 <div>
diff --git a/examples/svelte/dynamic/src/main.ts b/examples/svelte/dynamic/src/main.ts
index 4d67e2ac..111474de 100644
--- a/examples/svelte/dynamic/src/main.ts
+++ b/examples/svelte/dynamic/src/main.ts
@@ -1,7 +1,8 @@
 import './app.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })
 
diff --git a/examples/svelte/fixed/package.json b/examples/svelte/fixed/package.json
index a81e66f2..98caee67 100644
--- a/examples/svelte/fixed/package.json
+++ b/examples/svelte/fixed/package.json
@@ -12,12 +12,12 @@
     "@tanstack/svelte-virtual": "^3.13.12"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.20",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
   }
 }
diff --git a/examples/svelte/fixed/src/ColumnVirtualizerFixed.svelte b/examples/svelte/fixed/src/ColumnVirtualizerFixed.svelte
index 128556c4..37a0da5e 100644
--- a/examples/svelte/fixed/src/ColumnVirtualizerFixed.svelte
+++ b/examples/svelte/fixed/src/ColumnVirtualizerFixed.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    horizontal: true,
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 100,
-    overscan: 5,
-  })
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      horizontal: true,
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 100,
+      overscan: 5,
+    }),
+  )
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>
diff --git a/examples/svelte/fixed/src/GridVirtualizerFixed.svelte b/examples/svelte/fixed/src/GridVirtualizerFixed.svelte
index a11a4c48..e888df06 100644
--- a/examples/svelte/fixed/src/GridVirtualizerFixed.svelte
+++ b/examples/svelte/fixed/src/GridVirtualizerFixed.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
 
-  $: rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 35,
-    overscan: 5,
-  })
+  let rowVirtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 35,
+      overscan: 5,
+    }),
+  )
 
-  $: columnVirtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    horizontal: true,
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 100,
-    overscan: 5,
-  })
+  let columnVirtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      horizontal: true,
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 100,
+      overscan: 5,
+    }),
+  )
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>
diff --git a/examples/svelte/fixed/src/RowVirtualizerFixed.svelte b/examples/svelte/fixed/src/RowVirtualizerFixed.svelte
index 643a0722..dac39a6e 100644
--- a/examples/svelte/fixed/src/RowVirtualizerFixed.svelte
+++ b/examples/svelte/fixed/src/RowVirtualizerFixed.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 35,
-    overscan: 5,
-  })
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 35,
+      overscan: 5,
+    }),
+  )
 </script>
 
 <div class="list scroll-container" bind:this={virtualListEl}>
diff --git a/examples/svelte/fixed/src/main.ts b/examples/svelte/fixed/src/main.ts
index 4d67e2ac..111474de 100644
--- a/examples/svelte/fixed/src/main.ts
+++ b/examples/svelte/fixed/src/main.ts
@@ -1,7 +1,8 @@
 import './app.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })
 
diff --git a/examples/svelte/infinite-scroll/package.json b/examples/svelte/infinite-scroll/package.json
index 5a5c5753..42e26ce7 100644
--- a/examples/svelte/infinite-scroll/package.json
+++ b/examples/svelte/infinite-scroll/package.json
@@ -13,12 +13,12 @@
     "@tanstack/svelte-virtual": "^3.13.12"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.20",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
   }
 }
diff --git a/examples/svelte/infinite-scroll/src/InfiniteRows.svelte b/examples/svelte/infinite-scroll/src/InfiniteRows.svelte
index ba639cff..a72075e3 100644
--- a/examples/svelte/infinite-scroll/src/InfiniteRows.svelte
+++ b/examples/svelte/infinite-scroll/src/InfiniteRows.svelte
@@ -2,7 +2,9 @@
   import { createInfiniteQuery } from '@tanstack/svelte-query'
   import { createVirtualizer } from '@tanstack/svelte-virtual'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
 
   const query = createInfiniteQuery({
     queryKey: ['projects'],
@@ -11,17 +13,20 @@
     getNextPageParam: (_lastGroup, groups) => groups.length,
   })
 
-  $: allRows =
-    ($query.data && $query.data.pages.flatMap((page) => page.rows)) || []
+  let allRows = $derived(
+    ($query.data && $query.data.pages.flatMap((page) => page.rows)) || [],
+  )
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 0,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 100,
-    overscan: 5,
-  })
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: 0,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 100,
+      overscan: 5,
+    }),
+  )
 
-  $: {
+  $effect(() => {
     $virtualizer.setOptions({
       count: $query.hasNextPage ? allRows.length + 1 : allRows.length,
     })
@@ -36,7 +41,7 @@
     ) {
       $query.fetchNextPage()
     }
-  }
+  })
 
   async function fetchServerPage(
     limit: number,
diff --git a/examples/svelte/infinite-scroll/src/main.ts b/examples/svelte/infinite-scroll/src/main.ts
index 4d67e2ac..111474de 100644
--- a/examples/svelte/infinite-scroll/src/main.ts
+++ b/examples/svelte/infinite-scroll/src/main.ts
@@ -1,7 +1,8 @@
 import './app.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })
 
diff --git a/examples/svelte/smooth-scroll/package.json b/examples/svelte/smooth-scroll/package.json
index ba29756e..31094b40 100644
--- a/examples/svelte/smooth-scroll/package.json
+++ b/examples/svelte/smooth-scroll/package.json
@@ -13,12 +13,12 @@
     "@tanstack/svelte-virtual": "^3.13.12"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.20",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
   }
 }
diff --git a/examples/svelte/smooth-scroll/src/App.svelte b/examples/svelte/smooth-scroll/src/App.svelte
index 39fe849e..95c8bffb 100644
--- a/examples/svelte/smooth-scroll/src/App.svelte
+++ b/examples/svelte/smooth-scroll/src/App.svelte
@@ -6,27 +6,31 @@
   } from '@tanstack/svelte-virtual'
   import { onMount } from 'svelte'
 
-  let virtualListEl: HTMLDivElement
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
   let time = Date.now()
-  let randomIndex = Math.floor(Math.random() * 10000)
-  let scrollToFn: VirtualizerOptions<any, any>['scrollToFn'] = () => {}
+  let randomIndex = $state(Math.floor(Math.random() * 10000))
+  let scrollToFn: VirtualizerOptions<any, any>['scrollToFn'] = $state(() => {})
 
   function easeInOutQuint(t: number) {
     return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
   }
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 10000,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 35,
-    overscan: 5,
-    scrollToFn,
-  })
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: 10000,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 35,
+      overscan: 5,
+      scrollToFn,
+    }),
+  )
 
   onMount(() => {
     scrollToFn = (offset, canSmooth, instance) => {
       const duration = 1000
-      const start = virtualListEl.scrollTop
+      const start = virtualListEl?.scrollTop ?? 0
       const startTime = (time = Date.now())
 
       function run() {
@@ -60,7 +64,7 @@
 
   <div>
     <button
-      on:click={() => {
+      onclick={() => {
         $virtualizer.scrollToIndex(randomIndex)
         randomIndex = Math.floor(Math.random() * 10000)
       }}
diff --git a/examples/svelte/smooth-scroll/src/main.ts b/examples/svelte/smooth-scroll/src/main.ts
index 4d67e2ac..111474de 100644
--- a/examples/svelte/smooth-scroll/src/main.ts
+++ b/examples/svelte/smooth-scroll/src/main.ts
@@ -1,7 +1,8 @@
 import './app.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })
 
diff --git a/examples/svelte/sticky/package.json b/examples/svelte/sticky/package.json
index 60086a2c..7e245536 100644
--- a/examples/svelte/sticky/package.json
+++ b/examples/svelte/sticky/package.json
@@ -14,12 +14,12 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.20",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.19"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
   }
 }
diff --git a/examples/svelte/sticky/src/App.svelte b/examples/svelte/sticky/src/App.svelte
index 3b3f84e4..fd2acc8c 100644
--- a/examples/svelte/sticky/src/App.svelte
+++ b/examples/svelte/sticky/src/App.svelte
@@ -19,17 +19,21 @@
     findIndex(rows, (n: any) => n === gn),
   )
 
-  let virtualListEl: HTMLDivElement
-  let activeStickyIndex: number = 0
+  let virtualListEl = $state<HTMLDivElement | null>(null)
+  let makeGetScrollElement = (scrollElement: HTMLDivElement | null) => () =>
+    scrollElement
+  let activeStickyIndex: number = $state(0)
 
-  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: rows.length,
-    getScrollElement: () => virtualListEl,
-    estimateSize: () => 50,
-    overscan: 5,
-  })
+  let virtualizer = $derived(
+    createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      count: rows.length,
+      getScrollElement: makeGetScrollElement(virtualListEl),
+      estimateSize: () => 50,
+      overscan: 5,
+    }),
+  )
 
-  $: {
+  $effect(() => {
     function rangeExtractor(range: Range): number[] {
       activeStickyIndex = [...stickyIndexes]
         .reverse()
@@ -40,12 +44,12 @@
       return [...next].sort((a, b) => a - b)
     }
     $virtualizer.setOptions({ rangeExtractor })
-  }
+  })
 
   function isSticky(index: number) {
     return stickyIndexes.includes(index)
   }
-  $: isActiveSticky = (index: number) => activeStickyIndex === index
+  let isActiveSticky = $derived((index: number) => activeStickyIndex === index)
 </script>
 
 <main>
diff --git a/examples/svelte/sticky/src/main.ts b/examples/svelte/sticky/src/main.ts
index 4d67e2ac..111474de 100644
--- a/examples/svelte/sticky/src/main.ts
+++ b/examples/svelte/sticky/src/main.ts
@@ -1,7 +1,8 @@
 import './app.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })