Embed stories

1000s of teams write stories to document and discuss components. It streamlines collaboration for teams because the published Storybook serves as a shared reference point.

I’m thrilled to share embeds, a new way to showcase your work to teammates and the developer community at large. You can embed your stories in tools like Notion, Medium, and even Wordpress. In many cases, they'll get unfurled automatically.

👉 Read the full embed docs

How to embed

Chromatic supports oEmbed and standard <iframe>s, that means you can embed stories in Medium articles, Notion pages, and countless other platforms. All you need is the URL for a Storybook published on Chromatic.

Story with toolbar embed

Embed a Storybook with a selected story by pasting your Storybook URL (as published on Chromatic). For example this Storybook URL:

// oEmbed
https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default

// iframe embed
<iframe src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default&full=1&shortcuts=false&singleStory=true" width="800" height="400"></iframe>

Plain story embed

It’s also possible to use the canvas URL (iframe.html) to embed the story without the Storybook toolbar.

Click the “open canvas in new tab” icon in the top-right corner of your Storybook to get the canvas URL and replace the app id and story path with your own.

// oEmbed
https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=/story/shadowboxcta--default&viewMode=story

// iframe embed
<iframe src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=shadowboxcta--default&viewMode=story&shortcuts=false&singleStory=true" width="800" height="400"></iframe>

Docs page embed

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:

// oEmbed
https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=/story/shadowboxcta--default&viewMode=docs

// iframe embed
<iframe src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default&viewMode=docs&shortcuts=false&singleStory=true" width="800" height="400"></iframe>

Chromatic by Storybook maintainers

Chromatic is a production-grade UI testing and review tool by the Storybook team. We automate your workflow so you can ship UIs with less work.

👉 Try Chromatic today 👈