Storybook 8 CSF3 Format Required — storiesOf API Removed in v8.0 — when and how should I migrate?
As of 2026-03-18, Storybook 8.0 (released March 2024) permanently removed the storiesOf API, the *.stories.mdx hybrid format, and Storyshots. Teams that used storiesOf (which required storyStoreV7: false in Storybook 7) must migrate: static component stories move to CSF with a named-export meta object, while teams that used storiesOf for programmatic story generation must adopt the Indexer API. CSF2 function exports still work in v8, but CSF3 object exports are the recommended target. Automated codemods are available for both the storiesOf-to-CSF and CSF2-to-CSF3 migrations.
Blockers
- removed
- removed
- removed
- Lock-in via framework/storybook-7
- requires_version: capability/indexer-api → runtime/nodejs
- requires_version: capability/indexer-api → format/csf
Who this is for
- small-team
- monorepo
- enterprise
Candidates
CSF3 Named Object Exports
CSF3 is Storybook's current recommended story format as of v8.0, using a default export meta object (component field required, title optional via auto-inference from file path) and named exports that are plain ES6 objects with args, render, parameters, and play fields. CSF3 is 100% backward-compatible with CSF2 and is fully supported by Storybook's automated codemod (npx storybook@latest migrate csf-2-to-3). The decisive differentiator over CSF2 is object-based stories that support spread-based composition and play function integration without explicit render boilerplate.
When to choose
Best for small-team + monorepo setups starting a fresh Storybook 8 adoption or performing a full migration pass from storiesOf or CSF2. The single most decisive factor is whether your team can run and review the codemod output — CSF3's args-first composition and play function support pay off most when teams are writing new stories or have capacity for a thorough review pass.
Tradeoffs
Pros: official recommended format for Storybook 8+, supported by all addons and tooling, auto-title from file path eliminates manual title strings, object spread for story composition, play function for interaction testing, cleanest TypeScript typing with Meta<typeof Component> and StoryObj. Cons: migration from CSF2 via codemod is not fully automated and requires per-file manual review; complex decorator chains and dynamically-typed story builders often need manual fixup after codemod.
Cautions
The migrate csf-2-to-3 codemod does not correctly handle every pattern — stories with complex storyName overrides, manually-typed CSF2 stories, or args built from external functions often require manual correction. Treating codemod output as complete without review is a common source of subtle story regressions in large codebases.
CSF2 Named Function Exports
CSF2 is the function-based story format (stories as named function exports, default export as the meta object) that remains fully supported in Storybook 8 without requiring migration. As of 2026-03-18, the official Storybook 8 migration guide explicitly classifies the CSF2-to-CSF3 upgrade as optional, not a breaking-change requirement. CSF2 requires .bind({}) for story composition and does not support the play function natively, but continues to work with all Storybook 8 addons and tooling.
When to choose
Best for enterprise + monorepo teams with large existing CSF2 codebases where running and auditing the codemod across hundreds of story files is higher risk than deferring the upgrade. Choose this path when the primary goal is unblocking a Storybook 8 upgrade without a parallel story rewrite — treat it as a bridge state to CSF3.
Tradeoffs
Pros: no story file changes required if upgrading from Storybook 7 with CSF2 files; eliminates migration risk during the major version upgrade; all Storybook 8 addons and the args system work identically. Cons: requires .bind({}) boilerplate for story composition; no auto-title inference; TypeScript typing is more verbose; future Storybook major versions may strengthen the deprecation or remove CSF2 support entirely.
Cautions
CSF2 is not explicitly deprecated in Storybook 8 documentation, but Storybook 9 deprecation signals are expected as the ecosystem fully consolidates on CSF3. Teams using CSF2 in Storybook 8 should log a follow-up migration ticket — deferring indefinitely increases the cost of a future forced migration.
Indexer API (Dynamic Story Generation)
The Indexer API (configured via experimental_indexers in .storybook/main.js) is Storybook 8's only officially-supported path for programmatic story generation, replacing the dynamic registration capability of storiesOf. Indexers run in Node.js, process files matching a configured pattern, and return story index entries — enabling stories generated from JSON fixtures, custom DSLs, or alternative template formats. As of 2026-03-18, the key remains experimental_indexers, signaling API instability. The critical architectural difference from storiesOf is that indexing is a build-time step: the actual module loaded in the browser must still be valid CSF.
When to choose
Best for enterprise + monorepo teams where stories must be generated from data sources (JSON fixtures, design tokens, API schemas) or a custom non-CSF story authoring format must be preserved. Use only when converting to static CSF is genuinely impractical — the Indexer API is substantially more complex to implement and maintain than writing CSF directly.
Tradeoffs
Pros: enables programmatic story generation in Storybook 8 without storiesOf; supports custom file formats and non-JS story definitions; integrates with the full Storybook addon ecosystem once indexed; decouples story discovery from story format. Cons: experimental API surface; requires transpiling custom formats to CSF for browser rendering (indexing and rendering are separate concerns); no automated migration tooling from storiesOf; demands Node.js implementation skill beyond typical story authoring.
Cautions
The experimental_ prefix means Storybook reserves the right to make breaking changes to the indexers API in minor or patch releases without the standard deprecation cycle. Indexers only handle discovery — the browser-loaded story module must still export valid CSF, so teams with fully dynamic storiesOf patterns need to solve both the indexing and the CSF rendering layers independently.
Try with your AI agent
$ npm install -g pocketlantern $ pocketlantern init # Restart Claude Code, Cursor, or your MCP client, then ask: # "Storybook 8 CSF3 Format Required — storiesOf API Removed in v8.0 — when and how should I migrate?"