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

How does the DSM Storybook integration differ from CodePen, CodeSandbox, Styleguidist, Pattern Lab integrations?


The approach to integration is one major way the DSM Storybook integration differs from similar integrations.

Embedding a live component from non-storybook development frameworks (such as CodePen, CodeSandbox, Styleguidist, Pattern Lab) into DSM requires providing a URL, and DSM renders the linked web page in an iFrame—as seen in the GIF that follows our Embedding a web page instructions.

With the Storybook integration, DSM offers additional functionality not present in the URL embed approach:

  • Support for CI and CD pipelines
  • Automatic generation of the component property table
  • Automatic generation of the component code snippet that’s tied to the component knobs
  • Versioning for Storybook projects

For Storybook 6, automatic generation of the component property table and code snippet is natively supported for React, Angular, and Vue.


Was this article helpful?

Still have a question?

Contact Us