Is it possible to add/embed storybook components stories) into docusaurus?

[the-ult]

We love docusaurus for our documentation.
But we are using storybook to test/showcase our components.

Is it possible to embed a storybook story into a docusaurus page? As part of the documentation.

For example

Components

• Card
  Here we describe the installation instructions, sample code etc.
  But it would be cool if we could embed a running/live storybook component example.

Is this something which is already (or will be ) available with docusaurus?

[slorber]

Hi

I've never seen that done before.

Can you show an example where stories are embedded in another React app? If it's possible to do it in Next.js, Remix, Gatsby and others, we should be able to do it as well.

Afaik storybook is using an iframe so technically you should be able to embed iframes in your Docusaurus site quite easily. For example, here's a Chakra UI component:

<iframe src="https://chakra-ui.netlify.app/iframe.html?id=menu--default&viewMode=story"></iframe>

---

I know @jodyheavener is working on a Storybook addon, but it looks like the opposite integration, where you document Docusaurus components in Storybook.

https://storybook.js.org/addons/storybook-addon-docusaurus

[the-ult]

Well.. haven't seen it before (and have been searching).
But it somehow felt logical.

We love storybook for developing and testing components/stories. But creating an actual documentation site is lacking a bit (as is styling/theming)
Docusaurus is awesome at this.
So including storybook in docusaurus seems logical.

But the <iframe> solution seems like a possibility.
Gonna try it out! 👍

[the-ult]

Tested it. Works perfectly 👍

[embaobao]

give me a code demo,please ?

[kamranayub]

We use Storybook with embeds for the excaliburjs docs. Here's an example of an MDX component we have:

https://github.com/excaliburjs/excaliburjs.github.io/blob/site/src/components/docs/Example.js

import React from 'react'

const FRAME_STYLE = {
  border: '1px solid #aaa',
}

/**
 * Embeds a Storybook example
 *
 * @prop story The story ID in the URL to navigate to
 */
export default ({ story = '' }) => (
  <iframe
    title="Excalibur Storybook Example"
    src={`https://excaliburjs.com/examples/?nav=0&path=/docs/${story}`}
    frameBorder={0}
    width="100%"
    height="600"
    style={FRAME_STYLE}
  ></iframe>
)

So we use it like this:

# A docs page

<Example story="audio" />

The story is the ID to pass to Storybook's query string.

You can see an example at https://excaliburjs.com/docs/sound/

We are in the process of migrating to Docusaurus and so will be upgrading our Storybook support too; I'm hoping to figure out something a little more integrated (or at least, to customize Storybook's layout better for embedding in our use case -- side-by-side).