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


Getting Started with Live Components

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

Before creating live components, you'll want to decide how to integrate DSM with Storybook. Currently, there are two options for integrating Storybook with DSM:

  • Self-hosted via an embedded URL
  • DSM-hosted via a CLI-based integration

If you're not sure which method to use, check out this comparison table.

Self-hosted via an embedded URL

If you already have a hosted version of Storybook, you can integrate with DSM by embedding your Storybook URL. This is the quickest and simplest way to get started.

Learn how to embed Storybook in DSM via URL

DSM-hosted via a CLI-based integration

If you prefer to host your version of Storybook with DSM, you can do so via our CLI-based integration. To do so, you'll need the following:

  • A code component library. DSM currently supports live components implemented in ReactVueAngular, 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, check out the DSM roles and permissions.

Adding live components via the CLI-based DSM Storybook integration consists of 4 steps:

  1. Configuring the CLI-based integration (a one-time setup)
  2. Adding a component container in DSM
  3. Connecting the Storybook story to its DSM component container
  4. 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.

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