Embedding Storybook on Medium

Chromatic integrates with Embedly and Iframely as an embed provider. That means you can embed Storybook stories in your Medium articles, your Notion pages, and many other platforms that support the oEmbed standard. All you need is a URL for a Storybook published on Chromatic.

Embedding a Storybook

In most cases, embedding a Storybook with a selected story is as simple as copy/pasting your Storybook URL (as published on Chromatic). Take for example this Storybook URL: https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default

Just paste this into the Medium editor, press Enter and wait a few seconds:

While the Medium editor will render your Storybook non-interactive (like a screenshot), it will be interactive after you publish your article.

If you aren’t using Chromatic yet, get started today. Publishing your Storybook is always free, no credit card required.

Embedding a plain story

It’s also possible to paste the direct canvas URL (iframe.html) to embed the story without the Storybook UI around it:

Simply click the “open canvas in new tab” icon in the top-right corner of your Storybook to get the canvas URL.

The height of the embed will automatically adjust to fit your story.

Embedding a docs page

You can also embed a docs page. Simply open the canvas in a new tab, and replace viewMode=story with viewMode=docs in the URL: