Player + Storybook Integration
Reference Assets
The reference asset set, complete with the storybook-plugin integration below is available here
Storybook Plugin
The @player-ui/storybook
package is a storybook addon + wrapper that provides easy-to-use mechanisms for integrating Player flows into storybook.
Installation
There are a few different parts required to integrate with storybook.
Start by installing @player-ui/storybook
:
npm i @player-ui/storybook
yarn add @player-ui/storybook
pnpm add @player-ui/storybook
Next, add @player-ui/storybook
to the addons
section in .storybook/main.js
module.exports = { addons: ["@player-ui/storybook"],};
In .storybook/preview.js
add the PlayerDecorator
:
import { PlayerDecorator } from "@player-ui/storybook";
export const decorators = [PlayerDecorator];
Lastly use the PlayerStory
component to render a flow:
import { PlayerStory } from "@player-ui/storybook";
export const MyStory = <PlayerStory flow={initialFlow} />;
The reactPlayerPlugins
story parameter allows you to add any custom plugins (like asset providers) to a story. This can also be set in the .storybook/preview.js
file as a global option:
import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";
export const parameters = { reactPlayerPlugins: [new ReferenceAssetsPlugin()],};
Panels
Events
The events panel addon shows a timeline of events as the flow is processed. Here you will see logs, render/update metrics, data mutations, and more.

Flow
The flow panel addon enables users to view and edit the JSON content in the running Player.

Asset Docs
The asset docs panel will show the data-types for the configured Assets.

In order to configure the panel to show specific asset documentation, first include the assetXLRSources
as a parameter in your preview.js
:
import RefXLR from "@player-ui/reference-assets-plugin/dist/xlr/manifest.js";
export const parameters = { assetXLRSources: [RefXLR],};
then use the assetDocs
parameter in each story to set the asset types to render:
const meta: Meta<typeof Action> = { title: "Reference Assets/Action", component: Action, parameters: { assetDocs: ["ActionAsset"], },};
Reset
The reset button in the toolbar will reset the running Player with the initial content. This is useful for clearing any data or validation state, or for resetting a completed flow.
