Embed stories
Embed stories published to Chromatic in Medium articles, Notion pages, and countless other platforms.
Before we begin, you’ll need to figure out which embed format your platform supports: oEmbed or standard <iframe>s. From there, paste the URL of a published story in the given format.
Embed a story with the toolbar
Embed a story with the toolbar by replacing the <appid>, <uploadhash>, and <path-to-story> with the details for your story. You can retrieve this URL by opening your Storybook from a Build or Library screen. Embedding Storybooks by their branch name or commit hash is not supported yet.
// oEmbed
https://<appid>-<uploadhash>.chromatic.com/?path=<path-to-story>
// iframe embed
<iframe src="https://<appid>-<uploadhash>.chromatic.com/?path=<path-to-story>&full=1&shortcuts=false&singleStory=true" width="800" height="400"></iframe>
| Name | Description | Default | Control |
|---|---|---|---|
| propertyName* | This is a short description summary |
defaultValue | Set string |
| propertyName* | This is a short description summary |
defaultValue | Set string |
| propertyName* | This is a short description summary |
defaultValue | Set string |
No Preview
Sorry, but you either have no stories or none are selected somehow.
- Please check the Storybook config.
- Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Composite component
Assemble a composite component out of simpler components
Continue
Controls
5
Actions
Code
Accessibility
Addons
| Name | Control |
|---|---|
| action* | RAW action : { - $$typeof : Symbol(react.element) type : {...} 3 keys - key : null - ref : null props : {...} 2 keys - _owner : null } |
| headingText* | |
| messageText | |
| theme | Set object |
| as | Set object |
Embed a plain story without the toolbar by replacing the <appid>, <uploadhash>, and <path-to-story> with the details for your story.
// oEmbed
https://<appid>-<uploadhash>.chromatic.com/iframe.html?<path-to-story>&viewMode=story
// iframe embed
<iframe src="<appid>-<uploadhash>.chromatic.com/?path=<path-to-story>&viewMode=story&shortcuts=false&singleStory=true" width="800" height="400"></iframe>
shadowboxcta--default
| Name | Description | Default | Control |
|---|---|---|---|
| propertyName* | This is a short description summary |
defaultValue | Set string |
| propertyName* | This is a short description summary |
defaultValue | Set string |
| propertyName* | This is a short description summary |
defaultValue | Set string |
No Preview
Sorry, but you either have no stories or none are selected somehow.
- Please check the Storybook config.
- Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
ShadowBoxCTA
Composite component
Assemble a composite component out of simpler components
Continue
Show code
| Name | Description | Default | Control |
|---|---|---|---|
| action* | ReactNode | - | RAW action : { - $$typeof : Symbol(react.element) type : {...} 3 keys - key : null - ref : null props : {...} 2 keys - _owner : null } |
| headingText* | ReactNode | - | |
| messageText | ReactNode | - | |
| theme | Theme | - | Set object |
| as | ElementType |
- | Set object |
Stories
Default
Composite component
Assemble a composite component out of simpler components
Continue
Show code
Without Message Text
Composite component
Continue
Show code
How to embed stories in Medium Anchor
Paste the Storybook URL into your Medium article, then press Enter. The embed will automatically resize to fit the height of your story.
While editing an article, Medium renders all embeds non-interactive. Once you publish, the embed will be interactive. View live demo on Medium »
How to embed stories in Notion Anchor
In your Notion doc type /embed, press Enter, then paste the Storybook URL as the embed link. You can manually resize the embed as needed.
How to embed stories in Ghost Anchor
In your Ghost post type /html, press Enter, then paste the <iframe> URL. You can manually resize the embed via the height and width properties as needed.