Getting Started with Live Components
Before creating live components, there are a few things you’ll need:
- A code component library. DSM currently supports live components implemented in React, Vue, Angular, and HTML. Soon support will be added for even more popular frameworks. Need help thinking through your design system implementation? Check out our expert advice page.
- Familiarity with Storybook. Storybook is a development environment for UI components. DSM integrates with Storybook to bring interactive components directly into your DSM library. If you’re not familiar with Storybook, here’s a great tutorial to get you started.
- Familiarity with a development environment and NPM. You can always add people for the task to your DSM organization.
- Access to the DSM Sketch tool. You’ll need to create a component container with the DSM Sketch tool. This enables DSM to embed the live component in its proper place.
- Admin or editor access in the DSM organization. To learn more about DSM roles, check out this article: Roles and Permissions in DSM
Adding live components to DSM consists of 4 steps:
- Configuring the Storybook DSM integration (a one-time setup)
- Adding a component container via the DSM Sketch tool
- Connecting the Storybook story to its DSM component container
- Publishing Storybook to DSM
Keep reading for detailed instructions on each step.
If you're just getting started with Live Components, we recommend following along using our example Storybook component library project
on GitHub. It includes a few sample components and is pre-configured to work with Storybook.