Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Plugin MDX Embed

Gatsby Plugin 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 gatsby-plugin-mdx-embed --save


add gatsby-plugin-mdx-embed to the gatsby.config.js plugins array.

// gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-mdx-embed`]


The Gatsby plugin works by wrapping the Gatsby “Root Element” with the MDXEmbedProvider. If you encounter any issues with the plugin you could try manually including the MDXEmbedProvider in your project by adding the following to gatsby-browser.js and/or gatsby-ssr.js

// gatsby-browser.js || gatsby-ssr.js
import React from 'react';
import { MDXEmbedProvider } from 'mdx-embed';

export const wrapRootElement = ({ element }) => {
  return <MDXEmbedProvider>{element}</MDXEmbedProvider>;


If you were a user of @pauliescanlon/gatsby-mdx-embed here’s how you can migrate to the new package and plugin.

1. Remove the old plugin

npm uninstall @pauliescanlon/gatsby-mdx-embed

2. Install the new dependencies

npm install mdx-embed gatsby-plugin-mdx-embed --save

3. Remove the old plugin from gatsby-config.js and add the new plugin

// gatsby-config.js
module.exports = {
  plugins: [
-    `@pauliescanlon/gatsby-mdx-embed`
+    `gatsby-plugin-mdx-embed`

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

© 2023 Gatsby, Inc.