Docs: Fix Svelte references

docs/_snippets/component-story-with-custom-render-function.md

@@ -325,3 +325,31 @@ export const Example = meta.story({
   ),
 });
 ```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Layout from './Layout.svelte';
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="Example"
+>
+  {#snippet template(args)}
+   <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  {/snippet}
+</Story>
+```

docs/_snippets/svelte-framework-options-docgen.md

@@ -0,0 +1,27 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+// Replace your-framework with svelte-vite or sveltekit
+export default {
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      docgen: false, // Disable docgen for better performance
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+// Replace your-framework with svelte-vite or sveltekit
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      docgen: false, // Disable docgen for better performance
+    },
+  },
+};
+
+export default config;
+```

docs/_snippets/sveltekit-mock-features.md

@@ -0,0 +1,142 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="MyStory"
+  parameters={{
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('http://localhost/storybook'),
+          },
+        },
+        updated: {
+          current: true,
+        },
+      },
+    },
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const MyStory = {
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('http://localhost/storybook'),
+          },
+        },
+        updated: {
+          current: true,
+        },
+      },
+    },
+  },
+};
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="MyStory"
+  parameters={{
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('http://localhost/storybook'),
+          },
+        },
+        updated: {
+          current: true,
+        },
+      },
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MyStory: Story = {
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('http://localhost/storybook'),
+          },
+        },
+        updated: {
+          current: true,
+        },
+      },
+    },
+  },
+};
+```

docs/_snippets/sveltekit-mock-links.md

@@ -0,0 +1,118 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="MyStory"
+  parameters={{
+    sveltekit_experimental: {
+      hrefs: {
+        '/basic-href': (to, event) => {
+          console.log(to, event);
+        },
+        '/root.*': {
+          callback: (to, event) => {
+            console.log(to, event);
+          },
+          asRegex: true,
+        },
+      },
+    },
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const MyStory = {
+  parameters: {
+    sveltekit_experimental: {
+      hrefs: {
+        '/basic-href': (to, event) => {
+          console.log(to, event);
+        },
+        '/root.*': {
+          callback: (to, event) => {
+            console.log(to, event);
+          },
+          asRegex: true,
+        },
+      },
+    },
+  },
+};
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="MyStory"
+  parameters={{
+    sveltekit_experimental: {
+      hrefs: {
+        '/basic-href': (to, event) => {
+          console.log(to, event);
+        },
+        '/root.*': {
+          callback: (to, event) => {
+            console.log(to, event);
+          },
+          asRegex: true,
+        },
+      },
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MyStory: Story = {
+  parameters: {
+    sveltekit_experimental: {
+      hrefs: {
+        '/basic-href': (to, event) => {
+          console.log(to, event);
+        },
+        '/root.*': {
+          callback: (to, event) => {
+            console.log(to, event);
+          },
+          asRegex: true,
+        },
+      },
+    },
+  },
+};
+```

docs/api/csf/index.mdx

@@ -139,6 +139,19 @@ When the story renders in the UI, Storybook executes each step defined in the `p
   When Storybook loads this story, it will detect the existence of a `render` function and adjust the component rendering accordingly based on what's defined.
 </IfRenderer>
 
+<IfRenderer renderer="svelte">
+   ## Custom render functions
+
+   If you're using Svelte CSF to write your stories, you can add a custom snippet to allow you additional control over how your story renders. For example, if you were writing a story and you wanted to specify how your component should render, you could write the following:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="component-story-with-custom-render-function.md" />
+
+  {/* prettier-ignore-end */}
+
+</IfRenderer>
+
 ## Storybook export vs. name handling
 
 Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?

docs/get-started/frameworks/svelte-vite.mdx

@@ -203,21 +203,12 @@ Default: `true`
 
 Enables or disables automatic documentation generation for component properties. When disabled, Storybook will skip the docgen processing step during build, which can improve build performance.
 
-```ts title=".storybook/main.ts"
-import type { StorybookConfig } from '@storybook/svelte-vite';
-
-const config: StorybookConfig = {
-  framework: {
-    name: '@storybook/svelte-vite',
-    options: {
-      docgen: false, // Disable docgen for better performance
-    },
-  },
-};
-
-export default config;
-```
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="svelte-framework-options-docgen.md" />
+
+{/* prettier-ignore-end */}
 
-##### When to disable docgen
+#### When to disable docgen
 
 Disabling docgen can improve build performance for large projects, but [argTypes won't be inferred automatically](../../api/arg-types.mdx#automatic-argtype-inference), which will prevent features like [Controls](../../essentials/controls.mdx) and [docs](../../writing-docs/autodocs.mdx) from working as expected. To use those features, you will need to [define `argTypes` manually](../../api/arg-types.mdx#manually-specifying-argtypes).