Exploring the New Features of Storybook 10

Storybook 10, released in November 2025, represents a major evolution in component development tooling. With module automocking, typesafe story creation, and enhanced mobile testing capabilities, this release focuses on developer experience without breaking your existing workflows.

ESM-Only Architecture: Faster and Leaner

Storybook 10's most significant change is its ESM-only architecture. This is the only breaking change in the release, but it brings substantial benefits:

• 29% reduction in install size (on top of the 50% savings in v9)
• Faster startup times across all frameworks
• Modern build pipeline with better tree-shaking

Requirements: Node.js 20.16+, 22.19+, or 24+ with ESM support.

Module Automocking: Simplify Component Testing

Developed in collaboration with Vitest, module automocking automatically mocks dependencies, making it easier to isolate and test components.

Enable automocking in your .storybook/preview.ts:

Use mocks in your stories:

Typesafe CSF Factories for React

Storybook 10 introduces typesafe Component Story Format (CSF) factories, currently in preview for React. This feature ensures type safety when creating reusable story templates.

Svelte Async Components Support

Storybook 10 adds first-class support for Svelte 5's async components, along with app state mocking capabilities.

Story with mocked async data:

Enhanced UI: QR Codes and Editor Integration

Storybook 10 improves the developer experience with two notable UI enhancements:

• QR Code Sharing: The sharing menu now generates QR codes for instant mobile device testing. Scan the code to view components on your phone with one tap.
• Editor Shortcuts: Click a story's 'Edit' button to jump directly to the source code in your configured editor (VS Code, WebStorm, etc.).

Advanced Tag Filtering

Tag filtering has been enhanced with exclusion and configuration capabilities. You can now hide stories based on tags to declutter the sidebar.

Tag stories for organization:

Next.js 16 and Vitest 4 Support

Storybook 10 adds day-one support for Next.js 16 and Vitest 4, while maintaining backward compatibility with older versions. This ensures you can upgrade your framework without waiting for Storybook compatibility.

Migration Guide from v9 to v10

The migration is straightforward since ESM-only is the only breaking change:

1. Ensure Node.js version meets requirements (20.16+, 22.19+, or 24+)
2. Run the automated upgrade command

1. Update your package.json to use ESM syntax if still using CommonJS

1. Convert config files to ESM if needed

Performance Improvements

Beyond the install size reduction, Storybook 10 delivers performance gains across the board:

• 29% smaller install size
• Faster dev server startup
• Improved Hot Module Replacement (HMR)
• Optimized build output

Storybook 10 is a focused, performance-driven release that enhances developer experience without disrupting existing workflows. Whether you're building React, Svelte, or Next.js applications, the new module automocking, typesafe factories, and improved testing capabilities make component development faster and more reliable.