What is MDX Markdown

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.

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

As processed from this MDX document.

React Components

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

<Image
    src="/images/posts/mdx/tomato.jpg"
    alt="a tomato"
    height="427"
    width="640"
/>

As processed from this MDX document.

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.