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

What Are Live Components?

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

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.

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

Image of Craft Logo