[[ rootSection.name ]]
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-hosted (via an embedded URL)
- DSM-hosted (via a CLI-based integration)
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 |
|
Supported Storybook version |
No restrictions. If it appears in your self-hosted site, it’ll appear in DSM. |
The latest officially supported Storybook version is 6.3* The DSM CLI-based integration is not guaranteed to work with later versions of Storybook. *DSM does not support stories written in MDX format |
|
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. |
|
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.
