main & preview configuration

33 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

angularFilterNonInputControls feature

angularFilterNonInputControls is an Angular-specific feature. It filters non-input controls in Angular. On @storybook/angular-vite this feature is deprecated in favor of the propsTable framework option where true maps to propsTable: 'inputs', false maps to propsTable: 'all', and 'api' requires experimentalDocgenServer. Setting both leaves propsTable in charge. @storybook/angular still reads this feature and is unaffected.

features configuration object structure

The features configuration in main.js/ts is a boolean object controlling Storybook's additional features. All fields are optional. Fields available across renderers: actions, argTypeTargetsV7, babelRemoveBugfixes, backgrounds, changeDetection, controls, developmentModeForBuild, highlight, interactions, legacyDecoratorFileOrder, measure, outline, sidebarOnboardingChecklist, menuOnboardingChecklist, toolbars, viewport. React adds: experimentalCodeExamples, experimentalDocgenServer, experimentalReview, experimentalTestSyntax. Angular and Vue add: componentsManifest, experimentalDocgenServer. Angular-specific: angularFilterNonInputControls.

actions feature default

The actions feature is enabled by default (true). It enables Storybook's Actions feature.

argTypeTargetsV7 feature

argTypeTargetsV7 is an experimental feature, default true. It filters args with a 'target' on the type from the render function.

babelRemoveBugfixes feature for Webpack

babelRemoveBugfixes is a Webpack builder-only feature. It disables the bugfixes option in @babel/preset-env for the Webpack builder. This option was removed in Babel 8 and causes Babel to throw an error. Set this to true if you use Babel 8 and Storybook fails to detect your Babel version.

backgrounds feature default

The backgrounds feature is enabled by default (true). It enables Storybook's Backgrounds feature.

changeDetection feature default

The changeDetection feature is enabled by default (true). When enabled, Storybook monitors your git working tree and the builder's module graph to show which stories are new, modified, or related to code changes. Changed stories are displayed with status icons in the sidebar.

componentsManifest feature default

The componentsManifest feature is disabled by default (false). Available in React, Angular, and Vue. It generates manifests used by the MCP server.

controls feature default

The controls feature is enabled by default (true). It enables Storybook's Controls feature.

developmentModeForBuild feature

developmentModeForBuild sets NODE_ENV to 'development' in built Storybooks for better testing and debugging capabilities.

experimentalCodeExamples feature for React

experimentalCodeExamples is an experimental React-only feature. It enables a new code example generation method for React components in autodocs pages by reading the actual stories source file instead of injecting docgen into the preview bundle. This is faster, more readable, and more accurate, but snippets are not dynamic and won't update if you change values in the Controls table. The documentation recommends using experimentalDocgenServer instead, which supersedes this flag.

experimentalDocgenServer feature

experimentalDocgenServer is an experimental feature with default false, except on @storybook/angular-vite which enables it by default. Available in React, Angular, and Vue. It enables server-side docgen, extracting component metadata on the dev server using TypeScript Language Service instead of injecting docgen into the preview bundle. This provides faster startup, more accurate Controls and ArgTypes tables in autodocs, improved static code snippets in docs and the Code panel, and optimized ref-based manifest format for MCP server that loads faster for AI agents. Snippets are static and won't update if you change values in the Controls table. Support is rolling out per framework.

experimentalReview feature for React

experimentalReview is an experimental React-only feature with default false. It enables the experimental agentic review feature, which allows you to review the work an AI agent has done in your Storybook. It builds on changeDetection, which must also be enabled (it is by default).

experimentalTestSyntax feature for React

experimentalTestSyntax is an experimental React-only feature. It enables the experimental .test method with the CSF Next format.

highlight feature default

The highlight feature is enabled by default (true). It enables Storybook's Highlight feature.

interactions feature default

The interactions feature is enabled by default (true). It enables Storybook's Interactions feature for debugging interaction tests.

legacyDecoratorFileOrder feature

legacyDecoratorFileOrder applies decorators from preview.js before decorators from addons or frameworks. This is relevant for migration when decorator order has changed between preview.js and addons/frameworks.

measure feature default

The measure feature is enabled by default (true). It enables Storybook's Measure feature.

menuOnboardingChecklist feature default

The menuOnboardingChecklist feature is enabled by default (true). It enables a link to the onboarding guide in the menu.

outline feature default

The outline feature is enabled by default (true). It enables Storybook's Outline feature.

sidebarOnboardingChecklist feature default

The sidebarOnboardingChecklist feature is enabled by default (true). It enables the onboarding checklist sidebar widget.

viewport feature default

The viewport feature is enabled by default (true). It enables Storybook's Viewport feature.

SET_CURRENT_STORY event handling

The SET_CURRENT_STORY event may change the current story. The preview checks if the storyId changed, if the viewMode changed, or if the story implementation changed (via HMR). If the previous story is still preparing, abort it immediately and let the new story take over. Otherwise, if all parameters are the same, do nothing. If they differ and the old story is not completed, try to abort it. If abort fails, reload the window.

Preview Web main responsibilities

The preview's job is to read and update the URL via the URL Store, listen to instructions on the channel and emit events as things occur, and render the current selection to the web view in either story or docs mode.

getProjectAnnotations function in Preview initialization

getProjectAnnotations is a simple function that evaluates preview.js and addon config files and combines them. If it errors, the Preview will show the error.

StoryIndexClient in Preview initialization

No getStoryIndex function is passed to the Preview. Instead, the preview creates a StoryIndexClient that pulls stories.json from node and watches the event stream for invalidation events.

Preview Web state management components

The Preview is split into three parts responsible for state management: PreviewWeb which determines which story is rendered and receives events; StoryRender which imports and prepares the story and renders it through various phases; and DocsRender which handles rendering a story in docs mode.

Story rendering phases

A rendering story goes through these phases in order: preparing (async import of story file and story function preparation), loading (async loaders running), rendering (renderToCanvas function for the framework running), playing (play function running), and completed (story is done).

Story render error states

Stories can enter two error states: aborted (the story was stopped midway) and errored (an error was thrown somewhere along the way).

UPDATE_STORY_ARGS and UPDATE_GLOBALS events

UPDATE_STORY_ARGS and UPDATE_GLOBALS events represent changes to inputs that may cause a story to re-render. If these events occur during a render in the preparing or loading phases, leave things unchanged and let the new args/globals be picked up by the render phase. Otherwise, use the result of the previous loaders run and simply re-render over the top.

FORCE_RE_RENDER event handling

FORCE_RE_RENDER event triggers re-rendering of an unchanged story. If this event occurs during a render in the preparing or loading phases, leave things unchanged. Otherwise, use the result of the previous loaders run and simply re-render over the top.

FORCE_REMOUNT event handling

FORCE_REMOUNT event remounts or equivalent the component and re-renders. If this happens during a render and the story is in rendering phase, start a new render and abort the previous render immediately afterwards. If the story is in playing phase, attempt to abort the previous play function and start a new render. For loading phase, treat similarly to UPDATE_STORY_ARGS.

importFn parameter in Preview initialization

importFn is an async import() function used during Preview initialization.

Give your agent this brain