Publishing Storybook to DSM

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise.

The last step in creating Live Components is publishing your Storybook story to DSM.

Publishing stories to DSM

Publish mode builds your Storybook project and creates the production Storybook bundle. The bundle is then uploaded and hosted in the DSM cloud.

To publish, run the following command in your development environment:

npm run dsm-storybook:publish

After publishing to DSM, you can view the live components on the DSM documentation site, including any Storybook addons. Viewers will be able to interact with the components to see how they respond in a live environment.

Example user interacting with the Storybook Knobs addon for a live component in DSM.

Previewing stories

Preview enables you to view your documentation stories before uploading them to DSM. It starts a local instance of Storybook with a source-code addon to preview stories and sample code snippets. To create a preview, run the following command in your development environment:

npm run dsm-storybook:preview

If you want to preview components in DSM rather than Storybook, you can create a design system in DSM to be used for test purposes. Add a component to the test design system, and publish your story to that test component. If everything works in your test system, you can publish the story again to your production system.

Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

InVision Design System Manager gives you one centralized place to maintain all of your brand and UX components across design and code–providing the speed and confidence to power design at scale.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Community

Community

[[ section.name ]]

[[ article.title ]]

Publishing Storybook to DSM

Publishing stories to DSM

Previewing stories