diff --git a/lit-minimal/package.json b/lit-minimal/package.json
index 13ec05d2e9..48e01262c3 100644
--- a/lit-minimal/package.json
+++ b/lit-minimal/package.json
@@ -13,7 +13,7 @@
     "prosekit": "^0.18.4"
   },
   "devDependencies": {
-    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@egoist/tailwindcss-icons": "^1.9.2",
     "@iconify-json/lucide": "^1.2.98",
     "@tailwindcss/vite": "^4.2.2",
     "postcss": "^8.5.0",
diff --git a/react-code/package.json b/react-code/package.json
index 7b52397c75..eacd0c060f 100644
--- a/react-code/package.json
+++ b/react-code/package.json
@@ -14,7 +14,7 @@
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@egoist/tailwindcss-icons": "^1.9.2",
     "@iconify-json/lucide": "^1.2.98",
     "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^24.12.0",
diff --git a/svelte-block-handle/src/components/editor/examples/block-handle/editor.svelte b/svelte-block-handle/src/components/editor/examples/block-handle/editor.svelte
index c43998f1cc..7d15686ba4 100644
--- a/svelte-block-handle/src/components/editor/examples/block-handle/editor.svelte
+++ b/svelte-block-handle/src/components/editor/examples/block-handle/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-block-handle'
 import { BlockHandle } from '../../ui/block-handle'
@@ -16,7 +17,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-block-handle/src/components/editor/ui/code-block-view/code-block-view.svelte b/svelte-block-handle/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e38..aaa4617fc1 100644
--- a/svelte-block-handle/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/svelte-block-handle/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/svelte-bold/src/components/editor/examples/bold/editor.svelte b/svelte-bold/src/components/editor/examples/bold/editor.svelte
index 84aa96fd81..25b9fad969 100644
--- a/svelte-bold/src/components/editor/examples/bold/editor.svelte
+++ b/svelte-bold/src/components/editor/examples/bold/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-bold'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-diff.svelte b/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-diff.svelte
index 724a1eec8a..6a13f0c50d 100644
--- a/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-diff.svelte
+++ b/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-diff.svelte
@@ -11,12 +11,12 @@ interface Props {
 
 const props: Props = $props()
 
-let extension = $derived(union(
+const extension = $derived(union(
   defineBasicExtension(),
   defineReadonly(),
   defineCommitViewer(props.commit),
 ))
-let editor = $derived(createEditor({ extension }))
+const editor = $derived(createEditor({ extension }))
 </script>
 
 <ProseKit {editor}>
diff --git a/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-main.svelte b/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-main.svelte
index ad9406b3df..2b1f4dcea7 100644
--- a/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-main.svelte
+++ b/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-main.svelte
@@ -15,11 +15,12 @@ interface Props {
 
 const props: Props = $props()
 
-let extension = $derived(union(
+const extension = $derived(union(
   defineBasicExtension(),
   defineCommitRecorder(props.commitRecorder),
 ))
-let editor = $derived(createEditor({ extension, defaultContent: props.initialContent }))
+const defaultContent = $derived(props.initialContent)
+const editor = $derived(createEditor({ extension, defaultContent }))
 </script>
 
 {#key props.key}
diff --git a/svelte-code-block-themes/src/components/editor/examples/code-block-themes/editor.svelte b/svelte-code-block-themes/src/components/editor/examples/code-block-themes/editor.svelte
index 5d8ab74b7e..6ff29b51eb 100644
--- a/svelte-code-block-themes/src/components/editor/examples/code-block-themes/editor.svelte
+++ b/svelte-code-block-themes/src/components/editor/examples/code-block-themes/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-code-block'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-code-block-themes/src/components/editor/examples/code-block-themes/theme-selector.svelte b/svelte-code-block-themes/src/components/editor/examples/code-block-themes/theme-selector.svelte
index b3611ee0ab..c62d761fc2 100644
--- a/svelte-code-block-themes/src/components/editor/examples/code-block-themes/theme-selector.svelte
+++ b/svelte-code-block-themes/src/components/editor/examples/code-block-themes/theme-selector.svelte
@@ -1,25 +1,23 @@
 <script lang="ts">
 import { defineCodeBlockShiki, shikiBundledThemesInfo, type ShikiBundledTheme } from 'prosekit/extensions/code-block'
 import { useExtension } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
-const theme = writable<ShikiBundledTheme>('github-dark')
-const extension = derived(theme, ($theme) => {
-  return defineCodeBlockShiki({ themes: [$theme] })
-})
+let theme: ShikiBundledTheme = $state('github-dark')
+let extension = $derived(defineCodeBlockShiki({ themes: [theme] }))
 
-useExtension(extension)
+useExtension(toStore(() => extension))
 
 function handleChange(event: Event) {
   const target = event.target as HTMLSelectElement
-  theme.set(target.value as ShikiBundledTheme)
+  theme = target.value as ShikiBundledTheme
 }
 </script>
 
 <label for="code-block-theme-selector">Theme</label>
 <select
   id="code-block-theme-selector"
-  value={$theme}
+  value={theme}
   onchange={handleChange}
   class="outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700"
 >
diff --git a/svelte-code-block-themes/src/components/editor/ui/code-block-view/code-block-view.svelte b/svelte-code-block-themes/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e38..aaa4617fc1 100644
--- a/svelte-code-block-themes/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/svelte-code-block-themes/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/svelte-code-block/src/components/editor/examples/code-block/editor.svelte b/svelte-code-block/src/components/editor/examples/code-block/editor.svelte
index 356df1d182..e0ea1e9256 100644
--- a/svelte-code-block/src/components/editor/examples/code-block/editor.svelte
+++ b/svelte-code-block/src/components/editor/examples/code-block/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-code-block'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-code-block/src/components/editor/ui/code-block-view/code-block-view.svelte b/svelte-code-block/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e38..aaa4617fc1 100644
--- a/svelte-code-block/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/svelte-code-block/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/svelte-code/src/components/editor/examples/code/editor.svelte b/svelte-code/src/components/editor/examples/code/editor.svelte
index 40d14c6f78..674f852384 100644
--- a/svelte-code/src/components/editor/examples/code/editor.svelte
+++ b/svelte-code/src/components/editor/examples/code/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-code'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-drop-cursor/src/components/editor/examples/drop-cursor/editor.svelte b/svelte-drop-cursor/src/components/editor/examples/drop-cursor/editor.svelte
index a3c2d5530e..ddfe7716ee 100644
--- a/svelte-drop-cursor/src/components/editor/examples/drop-cursor/editor.svelte
+++ b/svelte-drop-cursor/src/components/editor/examples/drop-cursor/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-drop-cursor'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-full/src/components/editor/examples/full/editor.svelte b/svelte-full/src/components/editor/examples/full/editor.svelte
index 8871ac02f3..8d13cda61a 100644
--- a/svelte-full/src/components/editor/examples/full/editor.svelte
+++ b/svelte-full/src/components/editor/examples/full/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-full'
 import { sampleUploader } from '../../sample/sample-uploader'
@@ -25,7 +26,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-full/src/components/editor/ui/code-block-view/code-block-view.svelte b/svelte-full/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e38..aaa4617fc1 100644
--- a/svelte-full/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/svelte-full/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/svelte-full/src/components/editor/ui/image-view/image-view.svelte b/svelte-full/src/components/editor/ui/image-view/image-view.svelte
index 3ce290febd..c4aab73801 100644
--- a/svelte-full/src/components/editor/ui/image-view/image-view.svelte
+++ b/svelte-full/src/components/editor/ui/image-view/image-view.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import { UploadTask } from 'prosekit/extensions/file'
 import type { ImageAttrs } from 'prosekit/extensions/image'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
 import { ResizableHandle, ResizableRoot } from 'prosekit/svelte/resizable'
-import { onDestroy } from 'svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
-const selected = props.selected
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
+const selected: boolean = $derived(fromStore(props.selected).current)
 
-const attrs = $derived($node.attrs as ImageAttrs)
+const attrs = $derived(node.attrs as ImageAttrs)
 const url = $derived(attrs.src || '')
 const uploading = $derived(url.startsWith('blob:'))
 
@@ -19,11 +20,8 @@ let aspectRatio = $state<number | undefined>(undefined)
 let error = $state<string | undefined>(undefined)
 let progress = $state(0)
 
-let unsubscribeProgress: (() => void) | undefined
-
 $effect(() => {
   if (!uploading) {
-    unsubscribeProgress?.()
     return
   }
 
@@ -36,15 +34,15 @@ $effect(() => {
     if (canceled) return
     error = String(err)
   })
-  unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
+  const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
     if (canceled) return
     progress = total ? loaded / total : 0
   })
 
-  onDestroy(() => {
+  return () => {
     canceled = true
-    unsubscribeProgress?.()
-  })
+    unsubscribeProgress()
+  }
 })
 
 function handleImageLoad(event: Event) {
@@ -64,7 +62,7 @@ function handleImageLoad(event: Event) {
   width={attrs.width ?? undefined}
   height={attrs.height ?? undefined}
   {aspectRatio}
-  data-selected={$selected ? '' : undefined}
+  data-selected={selected ? '' : undefined}
   class="relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-[600px] max-w-full min-h-[64px] min-w-[64px] outline-2 outline-transparent data-selected:outline-blue-500 outline-solid"
   onResizeEnd={(event) => props.setAttrs(event.detail)}
 >
diff --git a/svelte-gap-cursor/src/components/editor/examples/gap-cursor/editor.svelte b/svelte-gap-cursor/src/components/editor/examples/gap-cursor/editor.svelte
index f65e4ba1f1..5bc7d921ed 100644
--- a/svelte-gap-cursor/src/components/editor/examples/gap-cursor/editor.svelte
+++ b/svelte-gap-cursor/src/components/editor/examples/gap-cursor/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-gap-cursor'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-hard-break/src/components/editor/examples/hard-break/editor.svelte b/svelte-hard-break/src/components/editor/examples/hard-break/editor.svelte
index 09328d29ab..8ca1b7bb9e 100644
--- a/svelte-hard-break/src/components/editor/examples/hard-break/editor.svelte
+++ b/svelte-hard-break/src/components/editor/examples/hard-break/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-hard-break'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-heading/src/components/editor/examples/heading/editor.svelte b/svelte-heading/src/components/editor/examples/heading/editor.svelte
index 599dd7e37f..cbff43cc84 100644
--- a/svelte-heading/src/components/editor/examples/heading/editor.svelte
+++ b/svelte-heading/src/components/editor/examples/heading/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-heading'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-image-view/src/components/editor/examples/image-view/editor.svelte b/svelte-image-view/src/components/editor/examples/image-view/editor.svelte
index e16bc7993e..4562fbff24 100644
--- a/svelte-image-view/src/components/editor/examples/image-view/editor.svelte
+++ b/svelte-image-view/src/components/editor/examples/image-view/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-image'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-image-view/src/components/editor/ui/image-view/image-view.svelte b/svelte-image-view/src/components/editor/ui/image-view/image-view.svelte
index 3ce290febd..c4aab73801 100644
--- a/svelte-image-view/src/components/editor/ui/image-view/image-view.svelte
+++ b/svelte-image-view/src/components/editor/ui/image-view/image-view.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import { UploadTask } from 'prosekit/extensions/file'
 import type { ImageAttrs } from 'prosekit/extensions/image'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
 import { ResizableHandle, ResizableRoot } from 'prosekit/svelte/resizable'
-import { onDestroy } from 'svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
-const selected = props.selected
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
+const selected: boolean = $derived(fromStore(props.selected).current)
 
-const attrs = $derived($node.attrs as ImageAttrs)
+const attrs = $derived(node.attrs as ImageAttrs)
 const url = $derived(attrs.src || '')
 const uploading = $derived(url.startsWith('blob:'))
 
@@ -19,11 +20,8 @@ let aspectRatio = $state<number | undefined>(undefined)
 let error = $state<string | undefined>(undefined)
 let progress = $state(0)
 
-let unsubscribeProgress: (() => void) | undefined
-
 $effect(() => {
   if (!uploading) {
-    unsubscribeProgress?.()
     return
   }
 
@@ -36,15 +34,15 @@ $effect(() => {
     if (canceled) return
     error = String(err)
   })
-  unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
+  const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
     if (canceled) return
     progress = total ? loaded / total : 0
   })
 
-  onDestroy(() => {
+  return () => {
     canceled = true
-    unsubscribeProgress?.()
-  })
+    unsubscribeProgress()
+  }
 })
 
 function handleImageLoad(event: Event) {
@@ -64,7 +62,7 @@ function handleImageLoad(event: Event) {
   width={attrs.width ?? undefined}
   height={attrs.height ?? undefined}
   {aspectRatio}
-  data-selected={$selected ? '' : undefined}
+  data-selected={selected ? '' : undefined}
   class="relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-[600px] max-w-full min-h-[64px] min-w-[64px] outline-2 outline-transparent data-selected:outline-blue-500 outline-solid"
   onResizeEnd={(event) => props.setAttrs(event.detail)}
 >
diff --git a/svelte-inline-menu/src/components/editor/examples/inline-menu/editor.svelte b/svelte-inline-menu/src/components/editor/examples/inline-menu/editor.svelte
index 079ef954b7..83475cfd6f 100644
--- a/svelte-inline-menu/src/components/editor/examples/inline-menu/editor.svelte
+++ b/svelte-inline-menu/src/components/editor/examples/inline-menu/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-inline-menu'
 import { InlineMenu } from '../../ui/inline-menu'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-italic/src/components/editor/examples/italic/editor.svelte b/svelte-italic/src/components/editor/examples/italic/editor.svelte
index 4e902dddf2..fbaf0cc69b 100644
--- a/svelte-italic/src/components/editor/examples/italic/editor.svelte
+++ b/svelte-italic/src/components/editor/examples/italic/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-italic'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-katex/src/components/editor/examples/katex/editor.svelte b/svelte-katex/src/components/editor/examples/katex/editor.svelte
index dcdd7313ca..a5902d9663 100644
--- a/svelte-katex/src/components/editor/examples/katex/editor.svelte
+++ b/svelte-katex/src/components/editor/examples/katex/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-tex'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-keymap/src/components/editor/examples/keymap/toolbar.svelte b/svelte-keymap/src/components/editor/examples/keymap/toolbar.svelte
index 6f16720376..248e0deb50 100644
--- a/svelte-keymap/src/components/editor/examples/keymap/toolbar.svelte
+++ b/svelte-keymap/src/components/editor/examples/keymap/toolbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { useKeymap } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
 import { Button } from '../../ui/button'
 
@@ -12,23 +12,14 @@ const props: Props = $props()
 
 let hotkey = $state<'Shift-Enter' | 'Enter'>('Shift-Enter')
 
-// Create a store from the reactive hotkey value
-const hotkeyStore = writable<'Shift-Enter' | 'Enter'>('Shift-Enter')
-
-// Update store when hotkey changes
-$effect(() => {
-  hotkeyStore.set(hotkey)
-})
-
-// Create keymap derived from the hotkey store
-const keymap = derived(hotkeyStore, ($hotkey) => ({
-  [$hotkey]: () => {
-    props.onSubmit($hotkey)
+const keymap = $derived({
+  [hotkey]: () => {
+    props.onSubmit(hotkey)
     return true
   },
-}))
+})
 
-useKeymap(keymap)
+useKeymap(toStore(() => keymap))
 
 function setHotkey(value: 'Shift-Enter' | 'Enter') {
   hotkey = value
diff --git a/svelte-link-mark-view/src/components/editor/examples/link-mark-view/editor.svelte b/svelte-link-mark-view/src/components/editor/examples/link-mark-view/editor.svelte
index cdd4bc296b..e8f5f4d41c 100644
--- a/svelte-link-mark-view/src/components/editor/examples/link-mark-view/editor.svelte
+++ b/svelte-link-mark-view/src/components/editor/examples/link-mark-view/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-link-mark-view'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-link-mark-view/src/components/editor/examples/link-mark-view/link-view.svelte b/svelte-link-mark-view/src/components/editor/examples/link-mark-view/link-view.svelte
index ba894dbd04..9aea6240ff 100644
--- a/svelte-link-mark-view/src/components/editor/examples/link-mark-view/link-view.svelte
+++ b/svelte-link-mark-view/src/components/editor/examples/link-mark-view/link-view.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { SvelteMarkViewProps } from 'prosekit/svelte'
-import { onDestroy } from 'svelte'
+import { fromStore } from 'svelte/store'
 
 const props: SvelteMarkViewProps = $props()
 
@@ -28,15 +28,17 @@ function pickRandomColor() {
 }
 
 let color = $state(colors[0])
-const mark = props.mark
-const href = $derived($mark.attrs.href as string)
+let mark = $derived(fromStore(props.mark).current)
+let href = $derived(mark.attrs.href as string)
 
-const interval = setInterval(() => {
-  color = pickRandomColor()
-}, 1000)
+$effect(() => {
+  const interval = setInterval(() => {
+    color = pickRandomColor()
+  }, 1000)
 
-onDestroy(() => {
-  clearInterval(interval)
+  return () => {
+    clearInterval(interval)
+  }
 })
 
 function bindContentRef(element: HTMLAnchorElement) {
diff --git a/svelte-link/src/components/editor/examples/link/editor.svelte b/svelte-link/src/components/editor/examples/link/editor.svelte
index 02917217b1..e4709a6f34 100644
--- a/svelte-link/src/components/editor/examples/link/editor.svelte
+++ b/svelte-link/src/components/editor/examples/link/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-link'
 import { InlineMenu } from '../../ui/inline-menu'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-list-custom-checkbox/src/components/editor/examples/list-custom-checkbox/editor.svelte b/svelte-list-custom-checkbox/src/components/editor/examples/list-custom-checkbox/editor.svelte
index ccad3d5d74..81092979ca 100644
--- a/svelte-list-custom-checkbox/src/components/editor/examples/list-custom-checkbox/editor.svelte
+++ b/svelte-list-custom-checkbox/src/components/editor/examples/list-custom-checkbox/editor.svelte
@@ -5,6 +5,7 @@ import './custom-list.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-list-custom-checkbox'
 import { Toolbar } from '../../ui/toolbar'
@@ -16,7 +17,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-list/src/components/editor/examples/list/editor.svelte b/svelte-list/src/components/editor/examples/list/editor.svelte
index 1a1f208bbf..a30e872564 100644
--- a/svelte-list/src/components/editor/examples/list/editor.svelte
+++ b/svelte-list/src/components/editor/examples/list/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-list'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-loro/src/components/editor/examples/loro/editor-component.svelte b/svelte-loro/src/components/editor/examples/loro/editor-component.svelte
index 12b9709b90..8cf39ef147 100644
--- a/svelte-loro/src/components/editor/examples/loro/editor-component.svelte
+++ b/svelte-loro/src/components/editor/examples/loro/editor-component.svelte
@@ -18,8 +18,8 @@ interface Props {
 
 const props: Props = $props()
 
-const extension = defineExtension(props.loro, props.awareness)
-const editor = createEditor({ extension })
+const extension = $derived(defineExtension(props.loro, props.awareness))
+const editor = $derived(createEditor({ extension }))
 </script>
 
 <ProseKit {editor}>
diff --git a/svelte-loro/src/components/editor/examples/loro/editor.svelte b/svelte-loro/src/components/editor/examples/loro/editor.svelte
index 6ece371ddb..0086564202 100644
--- a/svelte-loro/src/components/editor/examples/loro/editor.svelte
+++ b/svelte-loro/src/components/editor/examples/loro/editor.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { LoroDoc, type AwarenessListener } from 'loro-crdt'
 import { CursorAwareness, type LoroDocType } from 'loro-prosemirror'
-import { onDestroy } from 'svelte'
 
 import EditorComponent from './editor-component.svelte'
 
@@ -17,34 +16,36 @@ const awarenessB = new CursorAwareness(idB)
 loroA.import(loroB.export({ mode: 'update' }))
 loroB.import(loroA.export({ mode: 'update' }))
 
-const unsubscribeA = loroA.subscribeLocalUpdates((updates) => {
-  loroB.import(updates)
-})
+$effect(() => {
+  const unsubscribeA = loroA.subscribeLocalUpdates((updates) => {
+    loroB.import(updates)
+  })
 
-const unsubscribeB = loroB.subscribeLocalUpdates((updates) => {
-  loroA.import(updates)
-})
+  const unsubscribeB = loroB.subscribeLocalUpdates((updates) => {
+    loroA.import(updates)
+  })
 
-const awarenessAListener: AwarenessListener = (_, origin) => {
-  if (origin === 'local') {
-    awarenessB.apply(awarenessA.encode([idA]))
+  const awarenessAListener: AwarenessListener = (_, origin) => {
+    if (origin === 'local') {
+      awarenessB.apply(awarenessA.encode([idA]))
+    }
   }
-}
 
-const awarenessBListener: AwarenessListener = (_, origin) => {
-  if (origin === 'local') {
-    awarenessA.apply(awarenessB.encode([idB]))
+  const awarenessBListener: AwarenessListener = (_, origin) => {
+    if (origin === 'local') {
+      awarenessA.apply(awarenessB.encode([idB]))
+    }
   }
-}
 
-awarenessA.addListener(awarenessAListener)
-awarenessB.addListener(awarenessBListener)
+  awarenessA.addListener(awarenessAListener)
+  awarenessB.addListener(awarenessBListener)
 
-onDestroy(() => {
-  awarenessA.removeListener(awarenessAListener)
-  awarenessB.removeListener(awarenessBListener)
-  unsubscribeA()
-  unsubscribeB()
+  return () => {
+    awarenessA.removeListener(awarenessAListener)
+    awarenessB.removeListener(awarenessBListener)
+    unsubscribeA()
+    unsubscribeB()
+  }
 })
 </script>
 
diff --git a/svelte-placeholder/src/components/editor/examples/placeholder/editor.svelte b/svelte-placeholder/src/components/editor/examples/placeholder/editor.svelte
index 8eab08b23a..9d03595fa8 100644
--- a/svelte-placeholder/src/components/editor/examples/placeholder/editor.svelte
+++ b/svelte-placeholder/src/components/editor/examples/placeholder/editor.svelte
@@ -5,16 +5,18 @@ import 'prosekit/basic/typography.css'
 import { createEditor, jsonFromNode, type NodeJSON } from 'prosekit/core'
 import type { ProseMirrorNode } from 'prosekit/pm/model'
 import { ProseKit, useDocChange } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { defineExtension } from './extension'
 
-const props = $props<{
+const props: {
   initialContent?: NodeJSON
   onDocUpdate?: (doc: NodeJSON) => void
-}>()
+} = $props()
 
 const extension = defineExtension()
-const editor = createEditor({ extension, defaultContent: props.initialContent })
+const defaultContent = untrack(() => props.initialContent)
+const editor = createEditor({ extension, defaultContent })
 
 const handleDocChange = (doc: ProseMirrorNode) => props.onDocUpdate?.(jsonFromNode(doc))
 useDocChange(handleDocChange, { editor })
diff --git a/svelte-readonly/src/components/editor/examples/readonly/editor.svelte b/svelte-readonly/src/components/editor/examples/readonly/editor.svelte
index 67b30837a9..0df7b2c68c 100644
--- a/svelte-readonly/src/components/editor/examples/readonly/editor.svelte
+++ b/svelte-readonly/src/components/editor/examples/readonly/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-readonly'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-readonly/src/components/editor/examples/readonly/toolbar.svelte b/svelte-readonly/src/components/editor/examples/readonly/toolbar.svelte
index 86cfd20758..bbec4e4f76 100644
--- a/svelte-readonly/src/components/editor/examples/readonly/toolbar.svelte
+++ b/svelte-readonly/src/components/editor/examples/readonly/toolbar.svelte
@@ -1,26 +1,15 @@
 <script lang="ts">
 import { defineReadonly } from 'prosekit/extensions/readonly'
 import { useExtension } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
 import { Button } from '../../ui/button'
 
 let readonly = $state(true)
 
-// Create a store from the reactive readonly value
-const readonlyStore = writable<boolean>(true)
+const extension = $derived(readonly ? defineReadonly() : null)
 
-// Update store when readonly changes
-$effect(() => {
-  readonlyStore.set(readonly)
-})
-
-// Create extension derived from the readonly store
-const extension = derived(readonlyStore, ($readonly) => {
-  return $readonly ? defineReadonly() : null
-})
-
-useExtension(extension)
+useExtension(toStore(() => extension))
 
 function setReadonly(value: boolean) {
   readonly = value
diff --git a/svelte-rtl/src/components/editor/examples/rtl/editor.svelte b/svelte-rtl/src/components/editor/examples/rtl/editor.svelte
index 4c005893d0..854ffcd3f6 100644
--- a/svelte-rtl/src/components/editor/examples/rtl/editor.svelte
+++ b/svelte-rtl/src/components/editor/examples/rtl/editor.svelte
@@ -5,6 +5,7 @@ import 'prosekit/basic/typography.css'
 import { defineBasicExtension } from 'prosekit/basic'
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-rtl'
 import { sampleUploader } from '../../sample/sample-uploader'
@@ -20,7 +21,7 @@ const props: {
 } = $props()
 
 const extension = defineBasicExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-search/src/components/editor/examples/search/editor.svelte b/svelte-search/src/components/editor/examples/search/editor.svelte
index ef4e29a2a8..b814c10665 100644
--- a/svelte-search/src/components/editor/examples/search/editor.svelte
+++ b/svelte-search/src/components/editor/examples/search/editor.svelte
@@ -5,6 +5,7 @@ import 'prosekit/extensions/search/style.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-search'
 import { Search } from '../../ui/search'
@@ -16,11 +17,8 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
-const editor = createEditor({
-  extension,
-  defaultContent,
-})
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
+const editor = createEditor({ extension, defaultContent })
 </script>
 
 <ProseKit {editor}>
diff --git a/svelte-search/src/components/editor/ui/search/search.svelte b/svelte-search/src/components/editor/ui/search/search.svelte
index ff5acd1148..17909b4245 100644
--- a/svelte-search/src/components/editor/ui/search/search.svelte
+++ b/svelte-search/src/components/editor/ui/search/search.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineSearchQuery, type SearchCommandsExtension } from 'prosekit/extensions/search'
 import { useEditor, useExtension } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
 import { Button } from '../button'
 
@@ -17,34 +17,13 @@ let replaceText = $state('')
 
 const editor = useEditor<SearchCommandsExtension>()
 
-// Create stores from the reactive values
-const searchTextStore = writable('')
-const replaceTextStore = writable('')
-
-// Update stores when reactive values change
-$effect(() => {
-  searchTextStore.set(searchText)
-})
-
-$effect(() => {
-  replaceTextStore.set(replaceText)
-})
-
-// Create extension derived from the stores
-const extension = derived(
-  [searchTextStore, replaceTextStore],
-  ([$searchText, $replaceText]) => {
-    if (!$searchText) {
-      return null
-    }
-    return defineSearchQuery({
-      search: $searchText,
-      replace: $replaceText,
-    })
-  },
+const extension = $derived(
+  searchText
+    ? defineSearchQuery({ search: searchText, replace: replaceText })
+    : null,
 )
 
-useExtension(extension)
+useExtension(toStore(() => extension))
 
 function toggleReplace() {
   showReplace = !showReplace
diff --git a/svelte-strike/src/components/editor/examples/strike/editor.svelte b/svelte-strike/src/components/editor/examples/strike/editor.svelte
index 7e4529cfc4..0f49d1705d 100644
--- a/svelte-strike/src/components/editor/examples/strike/editor.svelte
+++ b/svelte-strike/src/components/editor/examples/strike/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-strike'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-table/src/components/editor/examples/table/editor.svelte b/svelte-table/src/components/editor/examples/table/editor.svelte
index 39b765f71f..3aa0bb7e87 100644
--- a/svelte-table/src/components/editor/examples/table/editor.svelte
+++ b/svelte-table/src/components/editor/examples/table/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-table'
 import { TableHandle } from '../../ui/table-handle'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-text-align/src/components/editor/examples/text-align/editor.svelte b/svelte-text-align/src/components/editor/examples/text-align/editor.svelte
index 490f20b245..427de5747a 100644
--- a/svelte-text-align/src/components/editor/examples/text-align/editor.svelte
+++ b/svelte-text-align/src/components/editor/examples/text-align/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-text-align'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-text-color/src/components/editor/examples/text-color/editor.svelte b/svelte-text-color/src/components/editor/examples/text-color/editor.svelte
index 8f316651b2..703c405bb8 100644
--- a/svelte-text-color/src/components/editor/examples/text-color/editor.svelte
+++ b/svelte-text-color/src/components/editor/examples/text-color/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-text-color'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-text-color/src/components/editor/examples/text-color/inline-menu.svelte b/svelte-text-color/src/components/editor/examples/text-color/inline-menu.svelte
index f84393780c..03ae878cd3 100644
--- a/svelte-text-color/src/components/editor/examples/text-color/inline-menu.svelte
+++ b/svelte-text-color/src/components/editor/examples/text-color/inline-menu.svelte
@@ -2,7 +2,7 @@
 import type { Editor } from 'prosekit/core'
 import { useEditorDerivedValue, useKeymap } from 'prosekit/svelte'
 import { InlinePopover } from 'prosekit/svelte/inline-popover'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
 import { Button } from '../../ui/button'
 
@@ -67,26 +67,17 @@ const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)
 
 let open = $state(false)
 
-// Create a store from the reactive open value
-const openStore = writable(false)
-
-// Update store when open changes
-$effect(() => {
-  openStore.set(open)
-})
-
-// Create keymap derived from the open store
-const keymap = derived(openStore, ($open) => ({
+const keymap = $derived({
   Escape: () => {
-    if ($open) {
+    if (open) {
       open = false
       return true
     }
     return false
   },
-}))
+})
 
-useKeymap(keymap)
+useKeymap(toStore(() => keymap))
 </script>
 
 <InlinePopover
diff --git a/svelte-typography/src/components/editor/examples/typography/editor.svelte b/svelte-typography/src/components/editor/examples/typography/editor.svelte
index 394f580086..87d7276581 100644
--- a/svelte-typography/src/components/editor/examples/typography/editor.svelte
+++ b/svelte-typography/src/components/editor/examples/typography/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-typography'
 import { BlockHandle } from '../../ui/block-handle'
@@ -16,7 +17,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-underline/src/components/editor/examples/underline/editor.svelte b/svelte-underline/src/components/editor/examples/underline/editor.svelte
index 502d519104..db2bc0d8fc 100644
--- a/svelte-underline/src/components/editor/examples/underline/editor.svelte
+++ b/svelte-underline/src/components/editor/examples/underline/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-underline'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-unmount/src/components/editor/examples/unmount/editor-component.svelte b/svelte-unmount/src/components/editor/examples/unmount/editor-component.svelte
index 33328a81a0..68c910438b 100644
--- a/svelte-unmount/src/components/editor/examples/unmount/editor-component.svelte
+++ b/svelte-unmount/src/components/editor/examples/unmount/editor-component.svelte
@@ -9,9 +9,9 @@ import { ProseKit } from 'prosekit/svelte'
 import { InlineMenu } from '../../ui/inline-menu'
 import ExtensionComponent from './extension-component.svelte'
 
-const props = $props<{
+const props: {
   placeholder: string
-}>()
+} = $props()
 
 const extension = defineBasicExtension()
 const editor = createEditor({ extension })
diff --git a/svelte-unmount/src/components/editor/examples/unmount/extension-component.svelte b/svelte-unmount/src/components/editor/examples/unmount/extension-component.svelte
index 6a6d56217d..eaf6f0d953 100644
--- a/svelte-unmount/src/components/editor/examples/unmount/extension-component.svelte
+++ b/svelte-unmount/src/components/editor/examples/unmount/extension-component.svelte
@@ -1,24 +1,13 @@
 <script lang="ts">
 import { definePlaceholder } from 'prosekit/extensions/placeholder'
 import { useExtension } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
-const props = $props<{
+const props: {
   placeholder: string
-}>()
+} = $props()
 
-// Create a store from the reactive placeholder value
-const placeholderStore = writable<string>(props.placeholder)
+const extension = $derived(definePlaceholder({ placeholder: props.placeholder }))
 
-// Update store when placeholder changes
-$effect(() => {
-  placeholderStore.set(props.placeholder)
-})
-
-// Create extension derived from the placeholder store
-const extension = derived(placeholderStore, ($placeholder) => {
-  return definePlaceholder({ placeholder: $placeholder })
-})
-
-useExtension(extension)
+useExtension(toStore(() => extension))
 </script>
diff --git a/svelte-word-counter/src/components/editor/examples/word-counter/editor.svelte b/svelte-word-counter/src/components/editor/examples/word-counter/editor.svelte
index b0bf8d83c5..ee49438c90 100644
--- a/svelte-word-counter/src/components/editor/examples/word-counter/editor.svelte
+++ b/svelte-word-counter/src/components/editor/examples/word-counter/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-word-counter'
 import { WordCounter } from '../../ui/word-counter'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte b/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte
index ad7f3f1e79..57563bbe9d 100644
--- a/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte
+++ b/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte
@@ -19,8 +19,8 @@ interface Props {
 
 const props: Props = $props()
 
-const extension = defineExtension(props.doc, props.awareness)
-const editor = createEditor({ extension })
+const extension = $derived(defineExtension(props.doc, props.awareness))
+const editor = $derived(createEditor({ extension }))
 </script>
 
 <ProseKit {editor}>
diff --git a/svelte-yjs/src/components/editor/examples/yjs/editor.svelte b/svelte-yjs/src/components/editor/examples/yjs/editor.svelte
index 1670b660ae..7faf8286e1 100644
--- a/svelte-yjs/src/components/editor/examples/yjs/editor.svelte
+++ b/svelte-yjs/src/components/editor/examples/yjs/editor.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { onDestroy } from 'svelte'
 import { WebsocketProvider } from 'y-websocket'
 import * as Y from 'yjs'
 
@@ -14,9 +13,11 @@ const provider = new WebsocketProvider(
   doc,
 )
 
-onDestroy(() => {
-  provider.destroy()
-  doc.destroy()
+$effect(() => {
+  return () => {
+    provider.destroy()
+    doc.destroy()
+  }
 })
 </script>
 
diff --git a/sveltekit-full/src/components/editor/examples/full/editor.svelte b/sveltekit-full/src/components/editor/examples/full/editor.svelte
index 8871ac02f3..8d13cda61a 100644
--- a/sveltekit-full/src/components/editor/examples/full/editor.svelte
+++ b/sveltekit-full/src/components/editor/examples/full/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-full'
 import { sampleUploader } from '../../sample/sample-uploader'
@@ -25,7 +26,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/sveltekit-full/src/components/editor/ui/code-block-view/code-block-view.svelte b/sveltekit-full/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e38..aaa4617fc1 100644
--- a/sveltekit-full/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/sveltekit-full/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/sveltekit-full/src/components/editor/ui/image-view/image-view.svelte b/sveltekit-full/src/components/editor/ui/image-view/image-view.svelte
index 3ce290febd..c4aab73801 100644
--- a/sveltekit-full/src/components/editor/ui/image-view/image-view.svelte
+++ b/sveltekit-full/src/components/editor/ui/image-view/image-view.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import { UploadTask } from 'prosekit/extensions/file'
 import type { ImageAttrs } from 'prosekit/extensions/image'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
 import { ResizableHandle, ResizableRoot } from 'prosekit/svelte/resizable'
-import { onDestroy } from 'svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
-const selected = props.selected
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
+const selected: boolean = $derived(fromStore(props.selected).current)
 
-const attrs = $derived($node.attrs as ImageAttrs)
+const attrs = $derived(node.attrs as ImageAttrs)
 const url = $derived(attrs.src || '')
 const uploading = $derived(url.startsWith('blob:'))
 
@@ -19,11 +20,8 @@ let aspectRatio = $state<number | undefined>(undefined)
 let error = $state<string | undefined>(undefined)
 let progress = $state(0)
 
-let unsubscribeProgress: (() => void) | undefined
-
 $effect(() => {
   if (!uploading) {
-    unsubscribeProgress?.()
     return
   }
 
@@ -36,15 +34,15 @@ $effect(() => {
     if (canceled) return
     error = String(err)
   })
-  unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
+  const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
     if (canceled) return
     progress = total ? loaded / total : 0
   })
 
-  onDestroy(() => {
+  return () => {
     canceled = true
-    unsubscribeProgress?.()
-  })
+    unsubscribeProgress()
+  }
 })
 
 function handleImageLoad(event: Event) {
@@ -64,7 +62,7 @@ function handleImageLoad(event: Event) {
   width={attrs.width ?? undefined}
   height={attrs.height ?? undefined}
   {aspectRatio}
-  data-selected={$selected ? '' : undefined}
+  data-selected={selected ? '' : undefined}
   class="relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-[600px] max-w-full min-h-[64px] min-w-[64px] outline-2 outline-transparent data-selected:outline-blue-500 outline-solid"
   onResizeEnd={(event) => props.setAttrs(event.detail)}
 >