Skip to content
JSX in Markdown for ambitious projects
JavaScript
Branch: master
Clone or download

Latest commit

1
Latest commit e030ddc Mar 26, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows ci: try actions/checkout@v1 instead (#956) Feb 23, 2020
docs Add table of components page (#973) Mar 11, 2020
examples v1.5.8 Mar 26, 2020
packages v1.5.8 Mar 26, 2020
.editorconfig Markdown style (#314) Nov 17, 2018
.eslintignore chore: enable prettier for .md/.mdx files - close #844 (#927) Jan 28, 2020
.eslintrc.yml perf: move all devDependencies to root package.json, prettier all fil… Dec 1, 2019
.gitattributes ci: update setup node action, add cross platform testing (#812) Oct 12, 2019
.gitignore fix: lint issues from xo, close #799 (#856) Dec 1, 2019
.nowignore perf: move all devDependencies to root package.json, prettier all fil… Dec 1, 2019
.prettierignore chore: enable prettier for .md/.mdx files - close #844 (#927) Jan 28, 2020
.remarkrc.js chore: enable prettier for .md/.mdx files - close #844 (#927) Jan 28, 2020
.yarnrc perf: move all devDependencies to root package.json, prettier all fil… Dec 1, 2019
babel.config.js chore: bump all (dev)Dependencies Jan 27, 2020
changelog.md Improve docs (#315) Nov 18, 2018
gatsby-config.js Bump all dependencies to latest, clean up scripts (#643) Jul 15, 2019
lerna.json v1.5.8 Mar 26, 2020
license Update license for 2019 Aug 22, 2019
now.json Remove www alias Aug 9, 2019
package.json chore(deps): update dependency eslint-config-prettier to v6.10.1 (#984) Mar 26, 2020
readme.md chore: enable prettier for .md/.mdx files - close #844 (#927) Jan 28, 2020
renovate.json perf: move all devDependencies to root package.json, prettier all fil… Dec 1, 2019
yarn.lock Update yarn.lock Mar 26, 2020

readme.md

MDX logo

MDX: Markdown for the component era 🚀

Build Status Join the community on Spectrum

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'

# Heres 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.

❤️ Powerful: MDX blends markdown and JSX syntax to fit perfectly in React/JSX-based projects.

💻 Everything is a component: Use existing components inside your MDX and import other MDX files as plain components.

🔧 Customizable: Decide which component is rendered for each markdown element ({ h1: MyHeading }).

📚 Markdown-based: The simplicity and elegance of markdown remains, you interleave JSX only when you want to.

🔥 Blazingly blazing fast: MDX has no runtime, all compilation occurs during the build stage.

Watch some of these features in action

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.”

@chrisbiscardi

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.

Sponsors



🥇 ZEIT


🥇 Gatsby


🥇 Netlify


Holloway




You?

Read more about the unified collective on Medium »

Authors

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

You can’t perform that action at this time.