- 03 Feb 2023
- 1 Minute to read
What Are Live Components?
- Updated on 03 Feb 2023
- 1 Minute to read
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.