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


What’s the difference between Storybook and the DSM Storybook integration?

Follow

While InVision created the DSM Storybook integration to connect Design System Manager (DSM) with Storybook, the two are separate products.

Storybook

Storybook is a self-hosted, open-source tool for developing user interface (UI) components. Because Storybook itself is not an InVision product and is independent of DSM, you'll need to visit their website for documentation or tutorials: storybook.js.org 

The DSM Storybook integration

The DSM Storybook integration lets you connect your local Storybook instance to Design System Manager (DSM), which is an InVision product. After connecting your Storybook instance to DSM, you can open DSM to access and interact with live components from your Storybook.

Benefits of integrating

While Storybook does not require DSM or the DSM Storybook integration, our integration offers important additional functionality, including the following:

  • A dynamic code sample lets developers instantly copy the code that renders the live component, so they can use it in their development environment.
  • An auto-generated properties table provides a detailed view of component properties and their corresponding descriptions. The table is generated based on code analysis, so it’s easy to keep the data in sync as components change. Property descriptions are generated automatically based on JSDoc code annotations.
  • DSM is hosted on a server, whereas Storybook is not hosted on a server by default.
  • With Access control in DSM, you can set viewing permissions for your design systems.
  • Versioning in DSM lets viewers switch among different versions of a component.

You must have DSM to run the DSM Storybook integration.


Was this article helpful?

Still have a question?

Contact Us