# gatsby-plugin-mdx-embed

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

Latest version **1.1.3** (published 2022-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-mdx-embed
pnpm add gatsby-plugin-mdx-embed
yarn add gatsby-plugin-mdx-embed
bun add gatsby-plugin-mdx-embed
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2022-10-25 |
| First published | 2020-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 294 |
| Author | Paul Scanlon |
| Maintainers | pauliescanlon |
| Keywords | gatsby, gatsby-plugin, mdx |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-mdx-embed
- Repository: https://github.com/PaulieScanlon/mdx-embed
- Homepage: https://github.com/PaulieScanlon/mdx-embed#readme
- Issues: https://github.com/PaulieScanlon/mdx-embed/issues
- npm.io page: https://npm.io/package/gatsby-plugin-mdx-embed

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.1.3 (latest) — 2022-10-25
- 1.0.0 — 2022-02-06
- 0.0.23 — 2022-02-01
- 0.0.22 — 2021-09-29
- 0.0.21 — 2021-09-28
- 0.0.20 — 2021-09-23
- 0.0.20-alpha — 2021-06-10
- 0.0.19 — 2021-02-11
- 0.0.18 — 2021-02-10
- 0.0.17 — 2020-12-23
- 0.0.16 — 2020-12-10
- 0.0.15 — 2020-11-24
- 0.0.14 — 2020-09-23
- 0.0.13 — 2020-09-11
- 0.0.12 — 2020-09-07
- … 11 more at https://npm.io/package/gatsby-plugin-mdx-embed/versions

## README

# 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!**

[https://mdx-embed.com/](https://www.mdx-embed.com/)

## Install

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

### Setup

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

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

### Alternatively

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`

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

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

### Migration

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

```sh
npm uninstall @pauliescanlon/gatsby-mdx-embed
```

**2. Install the new dependencies**

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

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

```diff
// 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](https://www.mdx-embed.com/?path=/docs/gatsby-plugin--page)

---
_Source: https://npm.io/package/gatsby-plugin-mdx-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._