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

TypeScript support in DSM Storybook

The Live Components feature, made possible by an integration between Storybook and DSM, is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise.

The Design System Manager (DSM) Storybook integration supports extraction of React component property definitions written in TypeScript to generate the component properties table.

If you’re using TypeScript in Storybook stories for use cases other than defining component properties, you can still use your existing Storybook project; however, you'll need to add new stories that don’t use TypeScript before embedding them in DSM.

To prep your new stories for embedding in DSM:

  • Use a naming convention, e.g., dsm, for all DSM-specific story files. For example, you could name a button story file button.dsm.js.
  • Using the storyPath property in the DSM .dsmrc config file, set DSM to use only DSM stories by filtering on the naming convention.
    Applying this filter ensures that DSM will only analyze your DSM-specific stories, rather than attempting to analyze stories with unsupported syntax like TypeScript, which would cause DSM to fail.

Was this article helpful?

Still have a question?

Contact Us