diff --git a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
index d1b76d20d8cd..f40277120a7e 100644
--- a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
+++ b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
@@ -6,6 +6,7 @@ exports[`Renders CSF2Secondary story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -20,6 +21,7 @@ exports[`Renders CSF2Secondary story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -32,6 +34,7 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
@@ -56,6 +59,7 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -66,6 +70,7 @@ exports[`Renders CSF3Button story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -80,6 +85,7 @@ exports[`Renders CSF3Button story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -90,6 +96,7 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <div>
       <p
         data-testid="custom-render"
@@ -113,6 +120,7 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -123,6 +131,7 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <input
       data-testid="input"
     />
@@ -132,6 +141,7 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -142,6 +152,7 @@ exports[`Renders CSF3Primary story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--large storybook-button--primary"
       style=""
@@ -156,6 +167,7 @@ exports[`Renders CSF3Primary story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -166,6 +178,7 @@ exports[`Renders LoaderStory story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <div>
       <div
         data-testid="loaded-data"
@@ -185,6 +198,7 @@ exports[`Renders LoaderStory story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -197,6 +211,7 @@ exports[`Renders NewStory story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
@@ -221,6 +236,7 @@ exports[`Renders NewStory story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
diff --git a/code/renderers/svelte/static/PreviewRender.svelte b/code/renderers/svelte/static/PreviewRender.svelte
index 2525312c2910..26136334e94c 100644
--- a/code/renderers/svelte/static/PreviewRender.svelte
+++ b/code/renderers/svelte/static/PreviewRender.svelte
@@ -1,3 +1,50 @@
+<script module>
+  import { writable } from 'svelte/store';
+
+  /**
+   * HMR cycle counter. Increments on every hot-update so any `$derived`
+   * that reads it is forced to re-evaluate, and any `{#key}` block keyed
+   * on it tears down and re-creates its children.
+   *
+   * Why this is necessary: Svelte 5's `$.hmr(Component)` returns an
+   * identity-stable proxy across updates. `$derived.by(() => storyFn())`
+   * compares the returned `{ Component, props }` by identity, sees the
+   * same proxy reference, and never re-fires — so the renderer freezes
+   * on the pre-HMR component code on any non-Vite builder.
+   *
+   * This is scoped to webpack/Rspack on purpose. Under Vite,
+   * `vite-plugin-svelte` papers over the proxy issue with its own
+   * private coordination channels and performs fine-grained HMR that
+   * preserves component state. Forcing a full `{#key}` remount there
+   * would defeat that state preservation, so we deliberately do NOT
+   * listen to `vite:afterUpdate` and let Vite's native HMR handle it.
+   *
+   * The webpack/Rspack status-handler API is feature-detected so a
+   * single PreviewRender module works on every builder without
+   * import-time errors.
+   */
+  const hmrTick = writable(0);
+
+  if (typeof import.meta !== 'undefined') {
+    const hot = import.meta.webpackHot ?? import.meta.hot;
+    // webpack / Rspack: status transitions to 'idle' once apply finishes.
+    // Vite is intentionally excluded (see comment above).
+    if (hot && typeof hot.addStatusHandler === 'function') {
+      let inCycle = false;
+      hot.addStatusHandler((status) => {
+        if (status === 'check' || status === 'prepare') {
+          inCycle = true;
+          return;
+        }
+        if (status === 'idle' && inCycle) {
+          inCycle = false;
+          hmrTick.update((n) => n + 1);
+        }
+      });
+    }
+  }
+</script>
+
 <script>
   /*
   ! DO NOT change this DecoratorHandler import to a relative path, it will break it.
@@ -8,11 +55,18 @@
 
   const { name, title, storyFn, showError } = $props();
 
+  // Touch `hmrTick` so the derivation re-runs on every HMR cycle. Without
+  // this, `$derived.by` short-circuits when `storyFn()` returns the same
+  // (identity-stable) Svelte HMR proxy reference, and new component code
+  // never reaches the DOM.
+  const tick = $derived($hmrTick);
+
   let {
     /** @type {import('svelte').SvelteComponent} */
     Component,
     props = {},
   } = $derived.by(() => {
+    void tick;
     return storyFn();
   });
 
@@ -34,5 +88,7 @@
   {#snippet pending()}
     <div id="sb-pending-async-component-notice">Pending async component...</div>
   {/snippet}
-  <DecoratorHandler {Component} {props} />
+  {#key tick}
+    <DecoratorHandler {Component} {props} />
+  {/key}
 </svelte:boundary>
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
index 4fb950f42dab..31165bbe1962 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
@@ -17,6 +17,8 @@ exports[`Renders CSF2Secondary story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -50,6 +52,8 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -72,6 +76,8 @@ exports[`Renders CSF3Button story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -103,6 +109,8 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -120,6 +128,8 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -142,6 +152,8 @@ exports[`Renders CSF3Primary story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -169,6 +181,8 @@ exports[`Renders LoaderStory story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -202,6 +216,8 @@ exports[`Renders NewStory story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>