Skip to content

Docs: Fix broken CSF doc links #33793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jonniebigodes merged 3 commits into from
Feb 15, 2026
Merged

Docs: Fix broken CSF doc links #33793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05327b2
Docs: fix broken CSF doc links
pavan-sh Feb 6, 2026
cf8ffe3
Merge branch 'next' into docs/fix-csf-links-only
pavan-sh Feb 7, 2026
ec1169c
Merge branch 'next' into docs/fix-csf-links-only
jonniebigodes Feb 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/api/main-config/main-config-indexers.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ Type: `string`

Default: The original [`fileName`](#filename) passed to the `createIndex` function

The file to import from, e.g. the [CSF](../csf.mdx) file.
The file to import from, e.g. the [CSF](../csf/index.mdx) file.

It is likely that the [`fileName`](#filename) being indexed is not CSF, in which you will need to [transpile it to CSF](#transpiling-to-csf) so that Storybook can read it in the browser.

Expand Down Expand Up @@ -203,7 +203,7 @@ Only use this if you need to override the auto-generated id.

## Transpiling to CSF

The value of [`importPath`](#importpath) in an [`IndexInput`](#indexinput) must resolve to a [CSF](../csf.mdx) file. Most custom indexers, however, are only necessary because the input is *not* CSF. Therefore, you will likely need to transpile the input to CSF, so that Storybook can read it in the browser and render your stories.
The value of [`importPath`](#importpath) in an [`IndexInput`](#indexinput) must resolve to a [CSF](../csf/index.mdx) file. Most custom indexers, however, are only necessary because the input is *not* CSF. Therefore, you will likely need to transpile the input to CSF, so that Storybook can read it in the browser and render your stories.

Transpiling the custom source format to CSF is beyond the scope of this documentation. This transpilation is often done at the builder level ([Vite](../../builders/vite.mdx) and/or [Webpack](../../builders/webpack.mdx)), and we recommend using [unplugin](https://github.com/unjs/unplugin) to create plugins for multiple builders.

Expand Down
2 changes: 1 addition & 1 deletion docs/configure/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ You can also adjust your Storybook configuration and implement custom logic to l

Because of the way stories are currently indexed in Storybook, loading stories on demand has a couple of minor limitations at the moment:

* [CSF formats](../api/csf.mdx) from version 1 to version 3 are supported.
* [CSF formats](../api/csf/index.mdx) from version 1 to version 3 are supported.
* Custom `storySort` functions are allowed based on a restricted API.

## Configure story rendering
Expand Down
6 changes: 3 additions & 3 deletions docs/configure/integration/frameworks-feature-support.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Core frameworks have dedicated maintainers or contributors who are responsible f
| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ |
| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ |
| **Docs** | | | | |
| [CSF Stories](../../api/csf.mdx) | ✅ | ✅ | ✅ | ✅ |
| [CSF Stories](../../api/csf/index.mdx) | ✅ | ✅ | ✅ | ✅ |
| [Autodocs](../../writing-docs/autodocs.mdx) | ✅ | ✅ | ✅ | ✅ |
| [Doc Blocks - ArgTypes](../../api/doc-blocks/doc-block-argtypes.mdx) | ✅ | ✅ | ✅ | ✅ |
| [Doc Blocks - Canvas](../../api/doc-blocks/doc-block-canvas.mdx) | ✅ | ✅ | ✅ | ✅ |
Expand Down Expand Up @@ -87,7 +87,7 @@ Community frameworks have fewer contributors which means they may not be as up t
| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Docs** | | | | | | |
| [CSF Stories](../../api/csf.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| [CSF Stories](../../api/csf/index.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| [Autodocs](../../writing-docs/autodocs.mdx) | | ✅ | ✅ | ✅ | ✅ | ✅ |
| [Doc Blocks - ArgTypes](../../api/doc-blocks/doc-block-argtypes.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| [Doc Blocks - Canvas](../../api/doc-blocks/doc-block-canvas.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Expand Down Expand Up @@ -116,5 +116,5 @@ To align the Storybook ecosystem with the current state of frontend development,
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../../essentials/controls.mdx) instead. |
| Storyshots | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../../../release-8-6/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx) for the available alternatives. |
| StoriesOf | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf.mdx) instead for writing stories.<br />See the [migration guide](../../releases/migration-guide-from-older-version.mdx#major-breaking-changes) for more information. |
| StoriesOf | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf/index.mdx) instead for writing stories.<br />See the [migration guide](../../releases/migration-guide-from-older-version.mdx#major-breaking-changes) for more information. |
| Storysource | The Storysource addon was officially removed with the release of Storybook 9 and is no longer maintained. To display your stories' source code, we recommend using the [`codePanel`](../../writing-docs/code-panel.mdx) parameter instead. |
2 changes: 1 addition & 1 deletion docs/essentials/controls.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ Note that both `mapping` and `control.labels` don't have to be exhaustive. If th

<Callout variant="info">

This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf/index.mdx).

</Callout>

Expand Down
2 changes: 1 addition & 1 deletion docs/faq.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | @storybook/addon-docs/blocks/Typeset | [See current documentation](./api/doc-blocks/doc-block-typeset.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | @storybook/addon-docs/blocks/Unstyled | [See current documentation](./api/doc-blocks/doc-block-unstyled.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | @storybook/addon-docs/blocks/useOf | [See current documentation](./api/doc-blocks/doc-block-useof.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Stories/Component Story Format (see note below) | [See current documentation](./api/csf.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | Stories/Component Story Format (see note below) | [See current documentation](./api/csf/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | ArgTypes | [See current documentation](./api/arg-types.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | `main.js` configuration/Overview | [See current documentation](./api/main-config/main-config.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | `main.js` configuration/framework | [See current documentation](./api/main-config/main-config-framework.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
Expand Down
6 changes: 3 additions & 3 deletions docs/get-started/whats-a-story.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ When you installed Storybook, the CLI created example components that demonstrat

<If renderer="svelte">

Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.svelte`. Stories can be written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples or using Svelte native template syntax, via a community-led project called [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf).
Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.svelte`. Stories can be written in [Component Story Format](../api/csf/index.mdx) (CSF), an ES6 modules-based standard for writing component examples or using Svelte native template syntax, via a community-led project called [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf).

Let’s start with the `Button` component. With Svelte, a story can be defined as an object using standard CSF or with a `Story` component using Svelte CSF. Here’s how to render `Button` in the “primary” state and export a story called `Primary` using both approaches.

</If>

<If notRenderer="svelte">

Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples.
Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf/index.mdx) (CSF), an ES6 modules-based standard for writing component examples.

Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.

Expand Down Expand Up @@ -56,7 +56,7 @@ Storybook makes it easy to work on one component in one state (aka a story) at a

<Callout variant="info">

This feature is not supported with the Svelte template syntax story format. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
This feature is not supported with the Svelte template syntax story format. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf/index.mdx).

</Callout>

Expand Down
2 changes: 1 addition & 1 deletion docs/writing-docs/autodocs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.m

## Set up automated documentation

Autodocs is configured through [tags](../writing-stories/tags.mdx). If a [CSF](../api/csf.mdx) file contains at least one story tagged with `autodocs`, then a documentation page will be generated for that component.
Autodocs is configured through [tags](../writing-stories/tags.mdx). If a [CSF](../api/csf/index.mdx) file contains at least one story tagged with `autodocs`, then a documentation page will be generated for that component.

To enable automatic documentation for all stories in a project, add it to `tags` in your `.storybook/preview.js|ts` file:

Expand Down
4 changes: 2 additions & 2 deletions docs/writing-docs/mdx.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar:
title: MDX
---

[MDX](https://mdxjs.com/) files mix Markdown and Javascript/JSX to create rich interactive documentation. You can use Markdown’s readable syntax (such as `# heading`) for your documentation, include stories defined in [Component Story Format (CSF)](../api/csf.mdx), and freely embed JSX component blocks at any point in the file. All at once.
[MDX](https://mdxjs.com/) files mix Markdown and Javascript/JSX to create rich interactive documentation. You can use Markdown’s readable syntax (such as `# heading`) for your documentation, include stories defined in [Component Story Format (CSF)](../api/csf/index.mdx), and freely embed JSX component blocks at any point in the file. All at once.

In addition, you can write pure documentation pages in MDX and add them to Storybook alongside your stories.

Expand All @@ -21,7 +21,7 @@ Let's start with an example, `Checkbox.mdx`, combining Markdown with a single st

{/* prettier-ignore-end */}

This MDX file references a story file, `Checkbox.stories.js|ts`, that is written in [Component Story Format (CSF)](../api/csf.mdx):
This MDX file references a story file, `Checkbox.stories.js|ts`, that is written in [Component Story Format (CSF)](../api/csf/index.mdx):

{/* prettier-ignore-start */}

Expand Down
6 changes: 3 additions & 3 deletions docs/writing-stories/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ components/

<If renderer="svelte">

We can define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools, or rely on the community-led project [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf) which provides a similar experience.
We can define stories according to the [Component Story Format](../api/csf/index.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools, or rely on the community-led project [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf) which provides a similar experience.

With Svelte CSF, the essential elements are the `defineMeta` function, which describes the component, and the `Story` component, which describes the stories. This pattern is different from the standard CSF, which uses a [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) to apply the same concepts.

</If>

<If notRenderer="svelte">

We define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.
We define stories according to the [Component Story Format](../api/csf/index.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.

The key ingredients are the meta (or [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export)) that describes the component, and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) that describe the stories.

Expand Down Expand Up @@ -323,7 +323,7 @@ You can also use the Controls panel to edit or save a new story after adjusting

<Callout variant="info">

This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf/index.mdx).

</Callout>

Expand Down
Loading