Edit page
Getting StartedNo import required!Which renders as ๐Ÿ‘‡
Components
Help

Gatsby Mdx Embed ๐Ÿงผ

With gatsby-mdx-embed you can embed media content from providers like Twitter, YouTube, Instagram and a number of others directly in .mdx ... no imports required

Install

npm install @pauliescanlon/gatsby-mdx-embed --save

Install peer dependencies

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react --save

Add gatsby-mdx-embed to your gatsby-config.js then use the components in your .mdx files!

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

No import required!

Because gatsby-mdx-embed is a plugin, to use it just pop a component in your .mdx file and; et voila!

// some-mdx-file.mdx
#### My cool pen
Here's a pen, and some other blog post text
<CodePen codePenId="PNaGbb" />

Which renders as ๐Ÿ‘‡

My cool pen

Here's a pen, and some other blog post text