Skip to content

Latest commit

 

History

History
152 lines (121 loc) · 4.35 KB

index.mdx

File metadata and controls

152 lines (121 loc) · 4.35 KB
Raw

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 */}

Markdown for the
component era

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 »

## New: MDX 2!

Version 2 of MDX was released after years of hard work, and has many improvements. Here are the highlights:

* 📝 **Improved syntax** makes it easier to use markdown in JSX * 🧑‍💻 **JavaScript expressions** turn `{2 * Math.PI}` into {2 * Math.PI} * 🔌 New **esbuild**, **Rollup**, and **Node.js** integrations * ⚛️ **Any JSX runtime**: React, Preact, Vue, Emotion, you name it, they’re all supported * 🌳 **Improved AST** exposes more info in greater detail * 🏃‍♀️ Compiles at least **25% faster** * 🚴 Generated code runs twice as fast (**100% faster**) * 🚄 Bundle size of `@mdx-js/mdx` is more than three times as small (**250% smaller**) * 🧵 …and much, so much more

Continue reading »

What does MDX do?

You write markdown with embedded components through JSX: 
```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" />
```
It gets compiled to JavaScript that you can use in any framework that supports JSX: 
{/* 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 »

Get started

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 »

MDX in short

* ❤️ **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

lol mdx is so good

— @dan_abramov