DSM Storybook Integration

[[ section.name ]]

[[ subSection.name ]] [[ articles[subSection.id] ? "(" + articles[subSection.id].length + ")" : "" ]]

Options for integrating DSM and Storybook

Storybook is an open-source tool for developing user interface (UI) components. By integrating DSM with Storybook, you can create Live Components. Currently, there are two options for integrating Storybook with DSM: Self-hoste...

Embedding Storybook in DSM via URL

The DSM Storybook integration is available exclusively for DSM Enterprise. Learn more about the DSM plans. Integrating Storybook with DSM Live Components is as simple as pasting in your hosted Storybook URL. To embed Storybook ...

What version of Storybook does DSM support?

Currently, there are two options for integrating Storybook with DSM: Self-hosted (via an embedded URL) DSM-hosted (via a CLI-based integration) When using an embedded URL, there are no limitations. Anything supported in S...

Does the DSM Storybook integration support TypeScript?

Yes, The DSM Storybook integration (version 0.0.127 and newer) supports Storybook stories written in TypeScript. To learn more about integrating DSM and Storybook, check out this guide: What Are Live Components? There is a know...

How do I check my version of Node.js?

When troubleshooting issues with InVision's DSM Storybook integration, our support agents will sometimes need to know which version of Node.js you're using.  To check your version of Node.js, open Terminal (or another CLI of yo...

How do I use Storybook addons with DSM Live Components?

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise. When you publish Storybook stories to DSM as live components, most of the official Storybook addon...

How does DSM access Storybook?

To access Storybook, Design System Manager (DSM) generates a unique authentication token, which is displayed one time for the user once). This authentication token and the dsmHost, organization, outputDir, storyPath, proxyUrl, ...

Versioning DSM Live Components

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise. When viewing live components in the DSM web view, you can quickly identify a component’s version b...

Does InVision store any Storybook code?

When running the DSM publish command, npm run dsm-storybook:publish, the CLI builds your Storybook project and creates the production Storybook bundle. The bundle is then uploaded and hosted in the DSM cloud. DSM Cloud assets a...

What is contained in a Storybook bundle?

Storybook uses webpack to build javascript bundles. Like bundles from any website that relies on webpack, Storybook bundles contain everything that's required to render the website. If you have code that is sensitive, you need ...

What happens when we publish a Storybook bundle to DSM?

In the Storybook webpack build, all resources (javascript, CSS, images, etc.) are relative to the root of the website: / Rather than hosting the uploaded storybook in a classic webserver, the DSM Storybook integration uploads b...

Is it possible to modify the Storybook code from DSM?

No, it's not possible to publish changes from DSM to Storybook. There are no post, pull, or write commands back to the self-hosted Storybook instance. The npm run dsm-storybook:publish command writes from Storybook to DSM. 

Is Storybook covered by InVision's SOC 2 examination?

No, Storybook is not an InVision product and is independent of our DSM Storybook integration. For more information about our annual SOC 2 examination and resulting report, see this article: Does InVision complete an SOC 2 Type ...

InVision Learn

[[ slotProps.course.title ]]

[[ slotProps.course.description ]]

Learn [[ slotProps.course.customFields.topic[0] ]]