Markdown is a plain text formatting syntax. Markdown lets you write plain text that can be converted to formatted HTML. MDX is an extension to Markdown which allows you to write JSX in your Markdown documents. This is why they call it Markdown for the component era. You could embed interactive alerts, dynamic charts, or media components for images and video in your Markdown..

JSX in Markdown

An example of JSX code that can be written in an MDX document.

JSXCopy
<div style={{ padding: "1rem", backgroundColor: "tomato" }}>
  Just a bit of text with a background color of `tomato`.
</div>

As processed from this MDX document.

React Components

A React component that can be written to an MDX document.

A tomato

As processed from this MDX document.

A tomato

Photo credit: Avin CP aka @avincp on Upsplash

More Information:

Read more about MDX here

More about using MDX in a Next.js project

This blog uses a Next.js MDX package: next-mdx-remote.

Here is an example from Next.js of a site made using mdx-remote.

Simple Example: Next.js project example using MDX.