import {Chart} from './_component/snowfall.jsx'
export {Home as default} from './component/home.jsx' export const info = { author: [ {github: 'johno', name: 'John Otander', twitter: '4lpine'}, {github: 'wooorm', name: 'Titus Wormer', twitter: 'wooorm'} ], modified: new Date('2023-10-24'), published: new Date('2017-12-23'), schemaOrg: { "@context": "https://schema.org", "@type": "SoftwareApplication", "additionalType": "ComputerLanguage", "applicationCategory": "DeveloperApplication", "description": "an authorable format for writing JSX in markdown documents", "name": "MDX", "offers": { "@type": "Offer", "price": "0.00", "priceCurrency": "USD" }, "operatingSystem": "Windows, MacOS, Linux", "sameAs": [ "https://www.wikidata.org/wiki/Q95971592", "https://www.wikidata.org/wiki/Q27966906", "https://www.wikidata.org/wiki/Q95961071", "https://en.wikipedia.org/wiki/MDX(markup_language)", "https://github.com/mdx-js/mdx" ], "url": "https://mdxjs.com" } } export const year = 2023
{/* lint disable heading-style */}
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. {/* more */} 🚀 Continue reading »
A small major this time, nothing big, which is also nice sometimes!
This mainly drops support for old Node (use 16 or later), adds modern ES2024
support in MDX, supports await
in MDX (if your framework does too), and
removes several deprecated options.
```mdx path="example.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" />
```
{/* lint disable */}
<div className="home-preview">
# 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" />
</div>
{/* lint enable */}
We made an interactive playground where you can try MDX out and see what it turns into. Play »
There are integrations for most bundlers, frameworks, and editors. Whether you build with Docusaurus, Next.js, or Vite. You prefer Rollup, esbuild, or webpack. You’re using React, Preact, or Vue. Get started »
lol mdx is so good