What Are Live Components?

DSM Live Components are interactive coded components that you can embed in your design system to create a single source of truth for your product teams across design and development.

The embedded code is built directly from your code component library and is showcased via an integration with the popular component development framework Storybook.

Empower developers with rich documentation

The Live Component page in DSM includes all the details a developer needs to use the component.

Live embedded code provides a fully interactive example of the component to showcase an end-user experience as they interact with your applications.

Knobs allow viewers to control component properties and see different component variants in real time. Additionally, any Storybook addon you include in your story will appear in DSM.

A dynamic code sample allows developers to instantly copy the code that renders the live component to use in their development environment.

An auto-generated properties table provides a detailed view of component properties and their description. The table is generated based on code analysis, so it’s easy to keep the table in sync as components change. Property descriptions are generated automatically based on JSDoc code annotations.

Centralize your design system documentation

By using Live Components in DSM, you're able to centralize your design system documentation in a way that is secure and beneficial to all teams involved.

Bring design and code together

The Live Component page enables you to map live components to their design component counterparts so you can establish a shared language and taxonomy across design and code.

Bring development teams together

On a single page, you can showcase different component implementations in different technologies (React, Angular, Vue, and HTML). This enables you to drive company-wide consistency with a single source of truth.

Built-in access control

Control who can edit and view DSM design systems with DSM’s roles and permissions.

Power your design-to-development process

When developers inspect prototypes with InVision Inspect, they can easily identify design system components. They can quickly view live components in DSM, copy the component code, and bring any design to life.