Docs: Fix Svelte references

[jonniebigodes]

Closes #

What I did

With this pull request, the Svelte & SvelteKit framework pages were adjusted to include actual snippets and other minor adjustments to reflect the current state of the documentation.

What was done:

• Created snippets
• Fixed links
• Adjusted the documentation

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Documentation
  • Added Svelte CSF custom render function examples and documentation
  • Added SvelteKit configuration, mocking, and routing examples for Storybook
  • Updated SvelteKit documentation references to align with current docs
  • Expanded CSF API documentation with Svelte framework-specific guidance

[coderabbitai]

📝 Walkthrough

Walkthrough

Documentation updates adding Svelte CSF code examples, Storybook configuration snippets, and SvelteKit mocking patterns. Replaces inline code examples with external snippet references and updates SvelteKit documentation links to point to current documentation structure.

Changes

Cohort / File(s)	Summary
New documentation snippet files docs/_snippets/component-story-with-custom-render-function.md, docs/_snippets/svelte-framework-options-docgen.md, docs/_snippets/sveltekit-mock-features.md, docs/_snippets/sveltekit-mock-links.md	Adds four new code snippet files demonstrating Svelte CSF stories with custom render functions, Storybook configuration examples for disabling docgen in Svelte, and SvelteKit mock examples for state and link configuration.
Framework documentation updates docs/api/csf/index.mdx, docs/get-started/frameworks/svelte-vite.mdx, docs/get-started/frameworks/sveltekit.mdx	Adds Svelte custom render function documentation blocks, replaces inline code examples with external snippet references via CodeSnippets components, updates SvelteKit documentation links from kit.svelte.dev to svelte.dev, and adjusts section header levels.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify snippet content: Ensure new code examples in docs/_snippets/* are syntactically correct and follow established patterns for Svelte CSF and SvelteKit mocking.
• Cross-reference integration: Confirm that CodeSnippets component references in .mdx files correctly point to their corresponding snippet files and render as expected.
• Documentation link validity: Check that updated SvelteKit documentation links resolve correctly to the new svelte.dev domain structure.

Possibly related PRs

• SvelteKit: Add support for mocking $app/state #31369: Adds $app/state mocking support in SvelteKit that these documentation updates directly document with new sveltekit_experimental.state examples and snippets.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a1df575 and b4f2b67.

📒 Files selected for processing (7)

• docs/_snippets/component-story-with-custom-render-function.md (1 hunks)
• docs/_snippets/svelte-framework-options-docgen.md (1 hunks)
• docs/_snippets/sveltekit-mock-features.md (1 hunks)
• docs/_snippets/sveltekit-mock-links.md (1 hunks)
• docs/api/csf/index.mdx (1 hunks)
• docs/get-started/frameworks/svelte-vite.mdx (1 hunks)
• docs/get-started/frameworks/sveltekit.mdx (5 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

docs/**

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Update documentation under docs/ for significant changes, including migration guides for breaking changes

Files:

• docs/_snippets/sveltekit-mock-links.md
• docs/_snippets/svelte-framework-options-docgen.md
• docs/get-started/frameworks/svelte-vite.mdx
• docs/get-started/frameworks/sveltekit.mdx
• docs/api/csf/index.mdx
• docs/_snippets/sveltekit-mock-features.md
• docs/_snippets/component-story-with-custom-render-function.md

🧠 Learnings (21)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.694Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios

Applied to files:

• docs/_snippets/sveltekit-mock-links.md
• docs/_snippets/svelte-framework-options-docgen.md
• docs/_snippets/sveltekit-mock-features.md
• docs/_snippets/component-story-with-custom-render-function.md

📚 Learning: 2025-09-17T08:11:47.197Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors

Applied to files:

• docs/_snippets/sveltekit-mock-links.md
• docs/get-started/frameworks/sveltekit.mdx
• docs/_snippets/sveltekit-mock-features.md

📚 Learning: 2025-11-05T09:38:47.694Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.694Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

• docs/_snippets/sveltekit-mock-links.md
• docs/_snippets/svelte-framework-options-docgen.md
• docs/get-started/frameworks/svelte-vite.mdx
• docs/get-started/frameworks/sveltekit.mdx
• docs/api/csf/index.mdx
• docs/_snippets/sveltekit-mock-features.md
• docs/_snippets/component-story-with-custom-render-function.md

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there

Applied to files:

• docs/_snippets/sveltekit-mock-links.md
• docs/_snippets/svelte-framework-options-docgen.md
• docs/get-started/frameworks/svelte-vite.mdx
• docs/_snippets/sveltekit-mock-features.md
• docs/_snippets/component-story-with-custom-render-function.md

📚 Learning: 2025-11-05T09:37:25.903Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.903Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

• docs/get-started/frameworks/svelte-vite.mdx
• docs/_snippets/component-story-with-custom-render-function.md

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to docs/** : Update documentation under `docs/` for significant changes, including migration guides for breaking changes

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocks

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.197Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx
• docs/_snippets/sveltekit-mock-features.md

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.197Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

📚 Learning: 2025-09-17T08:11:47.197Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()

Applied to files:

• docs/get-started/frameworks/sveltekit.mdx

🪛 LanguageTool

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

[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: 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;

(QB_NEW_DE)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Danger JS
• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (10)

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

329-355: Svelte CSF example is well-structured.

The new Svelte CSF snippet correctly demonstrates custom render functions using the defineMeta API and the Story component with Svelte 5's snippet syntax. The example is consistent with the other framework examples in the file and follows proper import patterns.

docs/_snippets/sveltekit-mock-links.md (1)

1-118: Comprehensive SvelteKit hrefs mocking examples.

The snippet provides consistent examples across all four format variants (Svelte CSF JS/TS, CSF JS/TS), demonstrating both simple callback patterns and regex-based hrefs configuration with the asRegex flag. The structure is clear and the code is syntactically correct.

docs/_snippets/sveltekit-mock-features.md (1)

1-142: Well-structured SvelteKit state mocking examples.

The snippet demonstrates consistent state payload structure across all four format variants, providing a clear example for mocking page data, navigation state, and update tracking. The use of new URL() for URL initialization is appropriate and all code syntax is correct.

docs/api/csf/index.mdx (1)

142-153: Svelte CSF custom render functions documentation is well-placed.

The new documentation block follows the established pattern for renderer-specific sections and provides a clear explanation with an appropriate CodeSnippets reference. The structure is consistent with the custom render functions section for other renderers.

Please verify that the CodeSnippets reference at Line 149 correctly references component-story-with-custom-render-function.md, which should include the Svelte CSF example added in the first file under review.

docs/_snippets/svelte-framework-options-docgen.md (1)

1-27: Docgen configuration examples are clear and correct.

Both the JavaScript and TypeScript examples properly demonstrate how to disable docgen for Svelte frameworks with helpful comments. The placeholder instruction to replace your-framework is clear, and the configuration syntax is correct.

docs/get-started/frameworks/svelte-vite.mdx (1)

206-214: Docgen section properly externalized and enhanced.

The move from inline code to an external CodeSnippets reference improves maintainability. The addition of "When to disable docgen" subsection with explanatory text about performance impact and feature implications is valuable and well-written.

Verify that Line 208 correctly references svelte-framework-options-docgen.md and that the file path matches the actual snippet file location in the repository.

docs/get-started/frameworks/sveltekit.mdx (4)

97-101: Mocking examples properly externalized to snippet files.

Both "How to mock" sections now reference external CodeSnippets rather than inline code, improving documentation maintainability and consistency.

Verify that the CodeSnippets paths at Lines 99 and 113 are correct:

• sveltekit-mock-features.md should contain the state mocking examples
• sveltekit-mock-links.md should contain the href mocking examples

These should match the snippet files reviewed in this PR.

Also applies to: 111-115

---

375-384: Docgen configuration externalized with context subsection.

The change mirrors the docgen configuration update in svelte-vite.mdx, moving the inline code example to an external snippet and adding a "When to disable docgen" subsection that explains the performance/feature tradeoffs.

Verify that Line 377 correctly references svelte-framework-options-docgen.md which should be the shared snippet file used by both svelte-vite.mdx and sveltekit.mdx.

---

245-245: Inconsistent with actual file content — Line 251 still references kit.svelte.dev

The review comment states that links have been updated from kit.svelte.dev to svelte.dev/docs/kit/$app-*, but line 251 still contains a link to kit.svelte.dev: https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance. Most other specified lines (261, 267, 285, etc.) do correctly use the svelte.dev domain, but this exception contradicts the stated update scope.

Likely an incorrect or invalid review comment.

---

79-91: Documentation links updated to current svelte.dev/docs/kit/ structure confirmed valid.

The SvelteKit module links on svelte.dev/docs/kit/ are available and current as of November 7, 2025. The migration from kit.svelte.dev to svelte.dev/docs/kit/ is complete and the table entries follow a consistent URL pattern throughout.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 2a6e675

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	45s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-07 16:28:01 UTC