MDX.js file format: MD + JSX

Markdown for the component era | MDX (mdx.js)

MDX lets you use JSX in your markdown content. 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.

What is MDX? | MDX

import {Chart} from './snowfall.js' export const year = 2023 # Last year’s snowfall In {year}, the snowfall was above average. It was followed by a warm spring which caused flood conditions in many of the nearby rivers. <Chart year={year} color="#fcb32c" />

• ❤️ Powerful: MDX blends markdown and JSX syntax to fit perfectly in JSX-based projects
• 💻 Everything is a component: Use existing components in your MDX and import other MDX files as components
• 🔧 Customizable: Decide which component is rendered for each markdown construct ({h1: MyHeading})
• 📚 Markdown-based: The simplicity and elegance of markdown remains, you use JSX only when you want to
• 🔥 Blazingly blazing fast: MDX has no runtime, all compilation occurs during the build stage

Issue search results · GitHub (type "MDX")

MDX is a file format that combines Markdown and JSX to create interactive documentation. It allows users to write JSX directly in their Markdown files, which can be used to add dynamic interactivity and embed React components. MDX can be used for a variety of purposes, including: 

• Importing components: Users can import components like interactive charts or alerts. 
• Embedding components: Users can embed components within their content. 
• Writing long-form content: Users can write long-form content with components. 
• Creating rich documentation: Users can mix Markdown's readable syntax with JSX component blocks to create rich documentation. 

The MDX GitHub repository contains packages for compiling the MDX format to JavaScript, integrating with bundlers, and using it with frameworks. 

MDX is an extension to Markdown that lets you include JSX in Markdown documents. MDX makes it possible to include React components in your Gatsby blog posts and pages.