MDX: Markdown for the component era ?
MDX is an authorable format that lets you seamlessly use JSX in your markdown documents.
You can import components, like interactive charts or notifications, and export
metadata.
This makes writing long-form content with components a blast.
Example
See MDX in action:
import { Chart } from '../components/chart'
# Here’s a chart
The chart is rendered inside our MDX document.
<Chart />
Intro
MDX is markdown for the component era.
It lets you write JSX embedded inside markdown.
That’s a great combination because it allows you to use markdown’s often terse
syntax (such as # heading) for the little things and JSX for more advanced
components.
:heart: Powerful: MDX blends markdown and JSX syntax to fit perfectly in
React/JSX-based projects.
:computer: Everything is a component: Use existing components inside your
MDX and import other MDX files as plain components.
:wrench: Customizable: Decide which component is rendered for each markdown
element ({ h1: MyHeading }).
:books: Markdown-based: The simplicity and elegance of markdown remains,
you interleave JSX only when you want to.
:fire: Blazingly blazing fast: MDX has no runtime, all compilation occurs
during the build stage.
Getting started
npm init mdx
Visit mdxjs.com for more info, and check out Contribute below
to find out how to help out.
Why?
Before MDX, some of the benefits of writing markdown were lost when integrating
with JSX.
Implementations were often template string-based which required lots of escaping
and cumbersome syntax.
“MDX […] is extremely useful for using design system components to render
markdown and weaving interactive components in with existing markdown.”
MDX seeks to make writing with markdown and JSX simpler while being more
expressive.
The possibilities are endless when you combine components (that can even be
dynamic or load data) with the simplicity of markdown for long-form content.
A nice example of this is mdx-deck, a great way to create slides with MDX.
- Fast
- No runtime compilation
- Pluggable
- Element to React component mapping
- React component
import/export - Customizable layouts
- Webpack loader
- Parcel plugin
- Next.js plugin
- Gatsby plugin
Sponsors
Read more about the unified collective on Medium »
Authors
- John Otander (@4lpine) – Compositor + Clearbit
- Tim Neutkens (@timneutkens) – ZEIT
- Guillermo Rauch (@rauchg) – ZEIT
- Brent Jackson (@jxnblk) – Compositor
Related
See related projects in the MDX specification.
Contribute
MDX is built by people just like you!
See the Support and Contributing guidelines on the MDX website for ways
to (get) help.
This project has a Code of Conduct.
By interacting with this repository, organisation, or community you agree to
abide by its terms.
Want to chat with the community and contributors?
Join us on Spectrum!
License
MIT © Compositor and ZEIT