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

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows feat: bump all (dev)Dependencies, update related usages (#1023) Apr 22, 2020
docs Add a new homepage, because Black Lives Matter (#1094) Jun 1, 2020
examples v1.6.5 May 29, 2020
packages Add a new homepage, because Black Lives Matter (#1094) Jun 1, 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.6.5 May 29, 2020
license Update license to include 2020 May 20, 2020
now.json Remove www alias Aug 9, 2019
package.json Update dependency @pkgr/rollup to v0.10.4 (#1085) May 29, 2020
readme.md Change ZEIT -> Vercel (#1027) Apr 22, 2020
renovate.json perf: move all devDependencies to root package.json, prettier all fil… Dec 1, 2019
yarn.lock Update yarn.lock May 29, 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



🥇 Vercel


🥇 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 Vercel

You can’t perform that action at this time.