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


Options for integrating DSM and Storybook

Follow

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:

Using an embedded URL is the quickest and simplest way to integrate DSM and Storybook. However, there are some instances where you may want DSM to host Storybook via the CLI-based integration. The following tables compares the methods and their respective advantages.

 

Self-hosted

DSM-hosted

Integration approach

Embed a self-hosted Storybook URL in DSM.

This is the simplest and quickest way to integrate.

 

Upload your Storybook project for DSM to host.

Stories appear in DSM component pages based on a unique DSM page ID that you add to each story.

 

Supported Storybook version

No restrictions. If it appears in your self-hosted site, it’ll appear in DSM.

DSM may not immediately support new features that are introduced in Storybook.

MDX support

No restrictions. Content that appears in your self-hosted site will appear in an iFrame in DSM.

DSM does not support stories written in MDX. It does support documentation written in MDX.

 

Theme

The theme appears as defined in the self-hosted project.

You can potentially maintain two different themes—one for the self-hosted project, and another for the DSM-hosted project. You'll need to apply the desired theme before publishing the project to DSM.

Version control

Versions are self-managed.

DSM keeps each version of a Storybook project that’s uploaded. Users can view different versions of a component.

Suitability for public documentation

It depends on the hosting details. If the self-hosted Storybook URL is behind a firewall, only users within the firewall can view the live component.

If the system is made public, any user can view the live component.

For documentation and tutorials on using Storybook, visit storybook.js.org.


Was this article helpful?

Still have a question?

Get Help