@storybook/channel-postmessage

What is @storybook/channel-postmessage?

The @storybook/channel-postmessage npm package is used within the Storybook ecosystem to enable communication between the Storybook UI and the preview iframe where the components are rendered. It uses the browser's postMessage API to create a channel for sending and receiving messages across different origins securely.

What are @storybook/channel-postmessage's main functionalities?

Creating a channel for communication

This code sample demonstrates how to create a new PostmsgTransport instance and use it to create a communication channel. The 'key' is a unique identifier for the channel.

import { PostmsgTransport } from '@storybook/channel-postmessage';
const transport = new PostmsgTransport({ key: 'postmsg-key' });
const channel = createChannel({ transport });

Sending messages

This code sample shows how to send a message with an event name and associated data through the channel.

channel.emit('eventName', { payload: 'data' });

Receiving messages

This code sample illustrates how to set up a listener for a specific event name and handle the data received through the channel.

channel.on('eventName', (data) => console.log(data));

Other packages similar to @storybook/channel-postmessage

socket.io-client

Socket.IO-client is a real-time bidirectional event-based communication library. Unlike @storybook/channel-postmessage which is specific to Storybook and uses postMessage, socket.io-client can be used for a wide range of applications and relies on WebSockets with fallbacks.

postmate

Postmate is a powerful, simple, promise-based postMessage library that enables secure and seamless iframe communication, similar to @storybook/channel-postmessage, but it is not tied to Storybook and can be used for general iframe communication.

README

Storybook PostMessage Channel

Storybook PostMessage Channel is a channel for Storybook that can be used when the Storybook Renderer runs inside an iframe or a child window. A channel can be created using the createChannel function.

import { createChannel } from '@storybook/channel-postmessage';

const channel = createChannel({ key: 'postmsg-key' });

---

For more information visit: storybook.js.org

Changelog

7.1.0 (July 18, 2023)

Storybook 7.1 is here! 🎉

• 🏄‍♀️ In-app onboarding to help you set up new projects

• 💅 Zero-config styling support for major libraries

• 🗃️ API reference documentation and TypeScript-first snippets

• 📇 Table of Contents for docs

• 🎨 Figma Design addon official support

• 📗 Vue3 source snippets and reactivity improvements

• 💯 Hundreds more fixes and improvements

  7.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 7.1.0-alpha.*, 7.1.0-beta.*, and 7.1.0-rc.* for the full list of changes.

For a better upgrade experience, please use one of the following commands:

npm or yarn 1: npx storybook@latest upgrade

pnpm: pnpm dlx storybook@latest upgrade

yarn berry: yarn dlx storybook@latest upgrade