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:
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.
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=docs in the URL: