maxpou/gatsby-starter-morning-dew

---
title: Using MDX
slug: using-mdx
date: 2019-07-10
language: en
generate-card: false
tags: ['gatsby', 'translation']
translations:
  - link: '/using-mdx-fr'
    language: French
    hreflang: fr
---

## Hello, world!

Thanks to MDX, It is now possible to add JSX in Markdown! Below is an example of JSX embedded in Markdown. <br />

> MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀.


**Example:**

<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
  <h3>This is JSX in Markdown</h3>
  {console.log('hello MDX')}
</div>

Code:

```jsx
<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
  <h3>This is JSX in Markdown</h3>
  {console.log('hello MDX')}
</div>
```


## How-to?

```jsx{5}
import MySuperComponent from '../path/to/MySuperComponent'

# Some text in Markdown

<MySuperComponent />

other text in markdown
```

## Read more

👉 https://mdxjs.com