Contents x
    Options for integrating DSM and Storybook
    • 10 Jan 2023
    • 1 Minute to read
    • Dark
      Light
    Contents

    Options for integrating DSM and Storybook

    • Updated on 10 Jan 2023
    • 1 Minute to read
    • Dark
      Light
    Article Summary

    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

    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.

    Was this article helpful?
    What's Next