Embed 3rd party media content in MDX - no import required

Downloads in past


243161.1.15 months ago3 years agoMinified + gzip package size for storybook-addon-mdx-embed in KB


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