This article also exists in: French

Hello, world!

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

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:

This is JSX in Markdown

Code:

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

How-to?

import MySuperComponent from '../path/to/MySuperComponent'

# Some text in Markdown

<MySuperComponent />
other text in markdown

Read more

👉 https://mdxjs.com

About the author

For the last decade, Maxence Poutord has worked with a variety of web technologies. He is currently focused on front-end development. On his day to day job, he is working as a senior front-end engineer at VSware. He is also an occasional tech speaker and a mentor. As a digital nomad, he is living where the WiFi and sun are 😎
Do you want to know more? Visit my website!