Embed stories

Embed interactive stories in Notion, Medium, and more

loading
Dominic Nguyen
β€” @domyen

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="5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/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 πŸ‘ˆ

Did this article help you?

Get free UI development guides and tutorials like this emailed to you.

4,402 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Comment on UI changes

Pin comments, inspect changes, and rewind through baseline history
loading
Dominic Nguyen
by Chromatic
In-depth guides and tutorials for professional UI developers, from the Storybook team
Guides
Intro to StorybookDesign Systems for DevelopersVisual Testing Handbook
Subscribe
Join the Ink newsletter to get free tutorials, guides, and resources emailed to you.