Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Embed 3rd party media content in MDX - no import required
npm install storybook-addon-mdx-embed
Last updated 4 months ago
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!


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


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

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


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}>

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

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

Maintained by
Special thanks to Netlify and CircleCI