Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.

Declarative configuration in the DSM Storybook integration


After adding a DSM configuration file to your Storybook component library project, you'll need to add DSM as a Storybook addon. This article walks through how to do so using Storybook's declarative configuration.

Storybook introduced declarative configuration in version 5.3. If you’re using an earlier version of Storybook, refer to the non-declarative configuration article.

Registering the DSM Storybook integration (required)

The DSM Storybook integration now aligns with the standard method of registering an addon in Storybook. Just add @invisionapp/dsm-storybook to your addons array in main.js.

Adding DSM-specific options (required)

In version 5.3, Storybook introduced a new API for setting options parameters. The DSM Storybook integration requires certain options to be set in order to render optimally on the web—most importantly, the showNav option. To set these options, import getDsmOptions from @invisionapp/dsm-storybook in manager.js and apply it using the new addons.setConfig Storybook API.

To return the correct options for dsm-storybook preview or dsm-storybook publishgetDsmOptions requires the STORYBOOK_DSM environment variable. Pass the environment variable to the getDsmOptions function call.

To apply your own options—or overwrite the DSM-specific ones—add the option after the getDsmOptions assignment as you normally would in a JavaScript object.

Adding the decorator (required)

The DSM Storybook integration now exports a decorator that you need to add to your stories. Import withDsm from @invisionapp/dsm-storybook in preview.js. Depending on which version of Storybook you’re using, you'll use the withDsm decorator differently in preview.js 

If you’re using Storybook 6, add withDsm to your decorators array.

If you’re using Storybook 5.3, pass withDsm as a parameter to addDecorator.

Adding the DSM-specific theme (optional)

DSM Storybook integration also now ships with an optional theme. In previous versions, this theme was automatically applied. If you liked the theme, import getDsmTheme from @invisionapp/dsm-storybook and apply it to the addons configuration in your manager.js file.

To overwrite the DSM theme with your own values, apply the theming property after the DSM theme as you normally would in a JavaScript object.

Unused APIs

The following APIs are not used with the declarative configuration. However, they will continue to work and be supported if you opt to use the non-declarative configuration.

  • initDsm
  • registerDsm

Was this article helpful?

Still have a question?

Get Help