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


Connecting a Storybook Story to a Component Container

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

After you have created a component container in DSM, it's time to connect the component to your Storybook story.

Obtaining the component container ID

To connect a Storybook story to its component container, you'll need to add the DSM component container ID in the third parameter of the options object of the story.

To find the component container ID:

  1. Open your library in the DSM web view and navigate to your component.
  2. Click the appropriate code tab (React, Vue, etc.).
    If you didn't add a code tab while creating a component container, you can do so by clicking Add Code and selecting the appropriate framework.
  3. Scroll to the Integration details section and copy the component ID.
copy-component-id.gif

Adding IDs to different frameworks

Depending on your framework, use one of the following example code snippets to add the DSM component container ID to the story.

You can see examples of DSM-connected stories in the example component library project. You’ll notice in the example stories that we have added an optional version number. This specifies per-component versioning rather than per-library versioning.

If you're following along in the example project, you can insert the ID for your specific component container.

React

For React stories, add the following code and insert your DSM component container ID:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from './Button.jsx';

storiesOf('Button', module)
.add(
'with emoji',
() => (
<Button>😀 😎 👍 💯</Button>
),
{
'in-dsm': {
id: '<DSM component container ID>'
}
}
);

Vue

For Vue stories, add the following code and insert your DSM component container ID:

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import MyButton from './Button.vue';

storiesOf('Button', module)
.add(
'with emoji',
() => ({
components: { MyButton },
template: '<my-button>😀 😎 👍 💯</my-button>'
}),
{
'in-dsm': {
id: ‘<DSM component container ID>’,
componentPath: './Button.vue'
}
}
);

Angular

For Angular stories, add the following code and insert your DSM component container ID:

import { storiesOf } from '@storybook/angular';
import { ButtonComponent } from '../app/button.component';

storiesOf('Button', module)
.add(
'with emoji',
() => ({
component: ButtonComponent,
template: '<storybook-button-component [text]="buttonText"></storybook-button-component>',
props: {
buttonText: '😀 😎 👍 💯'
}
}),
{
'in-dsm': {
id: '<DSM component container ID>',
componentPath: '../app/button.component'
}
}
);

Additional notes

Any Storybook addons that are configured for your connected stories will also appear in DSM. This is helpful if you want to use features like Knobs in DSM. For a list of available addons, check out the Storybook Addon Gallery.

Note that you can connect multiple stories to the same component container if you’d like to showcase different examples per component.

After completing this step, it's finally time to publish your Storybook story to DSM.


Learn something new

Getting Started Guides