ContextQMD
Back to Storybook

features

docs/api/main-config/main-config-features.mdx

10.3.64.4 KB
Original Source

Parent: main.js|ts configuration

Type:

<If renderer="react">
ts
{
  actions?: boolean;
  argTypeTargetsV7?: boolean;
  backgrounds?: boolean;
  componentsManifest?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  experimentalCodeExamples?: boolean;
  experimentalTestSyntax?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  legacyDecoratorFileOrder?: boolean;
  measure?: boolean;
  outline?: boolean;
  sidebarOnboardingChecklist?: boolean;
  toolbars?: boolean;
  viewport?: boolean;
}
</If> <If renderer="angular">
ts
{
  actions?: boolean;
  angularFilterNonInputControls?: boolean;
  argTypeTargetsV7?: boolean;
  backgrounds?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  legacyDecoratorFileOrder?: boolean;
  measure?: boolean;
  outline?: boolean;
  sidebarOnboardingChecklist?: boolean;
  toolbars?: boolean;
  viewport?: boolean;
}
</If>

<If notRenderer={['react','angular']}>

ts
{
  actions?: boolean;
  argTypeTargetsV7?: boolean;
  backgrounds?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  legacyDecoratorFileOrder?: boolean;
  measure?: boolean;
  outline?: boolean;
  sidebarOnboardingChecklist?: boolean;
  toolbars?: boolean;
  viewport?: boolean;
}
</If>

Enables Storybook's additional features.

actions

Type: boolean

Default: true

Enable the Actions feature.

<If renderer="angular">

angularFilterNonInputControls

Type: boolean

Filter non-input controls in Angular.

</If>

argTypeTargetsV7

(⚠️ Experimental)

Type: boolean

Default: true

Filter args with a "target" on the type from the render function.

<CodeSnippets path="main-config-features-arg-type-targets-v7.md" />

backgrounds

Type: boolean

Default: true

Enable the Backgrounds feature.

<If renderer="react">

componentsManifest

Type: boolean

Default: false

Generate manifests, used by the MCP server.

<CodeSnippets path="main-config-features-components-manifest.md" /> </If>

controls

Type: boolean

Default: true

Enable the Controls feature.

developmentModeForBuild

Type: boolean

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

<CodeSnippets path="main-config-features-development-mode-for-build.md" /> <If renderer="react">

experimentalCodeExamples

(⚠️ Experimental)

Type: boolean

Enable the new code example generation method for React components (as seen in the story previews in an autodocs page).

Unlike the current implementation, this method reads the actual stories source file, which is faster to generate, more readable, and more accurate. However, they are not dynamic: they won't update if you change values in the Controls table.

<CodeSnippets path="main-config-features-experimental-code-examples.md" />

experimentalTestSyntax

(⚠️ Experimental)

Type: boolean

Enable the experimental .test method with the CSF Next format.

<CodeSnippets path="main-config-features-experimental-test-syntax.md" /> </If>

highlight

Type: boolean

Default: true

Enable the Highlight feature.

interactions

Type: boolean

Default: true

Enable the Interactions feature.

legacyDecoratorFileOrder

Type: boolean

Apply decorators from preview.js before decorators from addons or frameworks. More information.

<CodeSnippets path="main-config-features-legacy-decorator-file-order.md" />

measure

Type: boolean

Default: true

Enable the Measure feature.

outline

Type: boolean

Default: true

Enable the Outline feature.

sidebarOnboardingChecklist

Type: boolean

Default: true

Enable the onboarding checklist sidebar widget.

viewport

Type: boolean

Default: true

Enable the Viewport feature.