New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-mdx-embed
Embed 3rd party media content in MDX - no import required
npm install storybook-addon-mdx-embed
Last updated about 1 month ago
1.2k
Downloads per week
Readme View on GitHub

Storybook Addon MDX Embed

MDX Embed allows you to easily embed popular 3rd party media content such as YouTube videos, Tweets, Instagram posts and many more straight into your .mdx - no import required!

https://mdx-embed.com/

Install

npm install mdx-embed storybook-addon-mdx-embed --save

Setup

Add storybook-addon-mdx-embed to your addons array in main.js

// main.js
module.exports = {
 ...
  addons: ['storybook-addon-mdx-embed']
};

Alternatively

The plugin works by using Storybooks' parameters export and wrapping the docs children with the MDXEmbedProvider.

If you encounter any issues with the addon you could try manually including the MDXEmbedProvider in you project. Ensure you have removed the addon from your dependencies and addons array in main.js then add the following to preview.js

// preview.js
import React from 'react';
import { DocsContainer } from '@storybook/addon-docs/blocks';
import { MDXEmbedProvider } from 'mdx-embed';

export const parameters = {
  docs: {
    container: ({ children, context }) => (
      <DocsContainer context={context}>
        <MDXEmbedProvider>{children}</MDXEmbedProvider>
      </DocsContainer>
    ),
  },
};

For more information about how to install the package please see the docs

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI