mdx-js/mdx

mirror of https://github.com/mdx-js/mdx.git synced 2024-11-09 12:59:28 +03:00

Markdown for the component era

jsx markdown mdx react remark starred-mdx-js-repo starred-repo unified vue

Go to file

Titus f55fae2109 Fix casing of file names Also show swallowed errors on Vercel/Linux		2021-10-07 17:50:53 +02:00
.github/workflows	chore(deps): update codecov/codecov-action action to v2 (#1695 )	2021-09-28 08:51:49 +02:00
.husky	Update dev-dependencies, examples (#1634 )	2021-09-08 12:43:04 +02:00
docs	Fix casing of file names	2021-10-07 17:50:53 +02:00
packages	Miscellaneous cleaning tasks (#1721 )	2021-10-07 08:55:27 +02:00
patches	Add readmes of packages to website (#1698 )	2021-09-28 14:23:18 +02:00
script	Update `@mdx-js/react` (#1659 )	2021-09-16 10:59:04 +02:00
website	Add callouts to website (#1724 )	2021-10-07 17:27:25 +02:00
.editorconfig	Miscellaneous cleaning tasks (#1677 )	2021-09-24 12:58:28 +02:00
.gitignore	Miscellaneous cleaning tasks (#1721 )	2021-10-07 08:55:27 +02:00
.npmrc	Replace yarn, lerna with npm (#1654 )	2021-09-14 19:23:08 +02:00
.prettierignore	Remove examples from monorepo (#1681 )	2021-09-26 17:39:27 +02:00
.vercelignore	Miscellaneous cleaning tasks (#1721 )	2021-10-07 08:55:27 +02:00
babel.config.cjs	Remove examples from monorepo (#1681 )	2021-09-26 17:39:27 +02:00
changelog.md	Improve docs (#315 )	2018-11-19 00:29:43 +01:00
license	Miscellaneous cleaning tasks (#1677 )	2021-09-24 12:58:28 +02:00
package-lock.json	Add filename, language, copy button to code blocks (#1723 )	2021-10-07 15:12:58 +02:00
package.json	Fix casing of file names	2021-10-07 17:50:53 +02:00
readme.md	Miscellaneous cleaning tasks (#1721 )	2021-10-07 08:55:27 +02:00
renovate.json	chore: configure renovate bot to preserve semantic version ranges (#1407 )	2020-12-20 20:17:50 -07:00
tsconfig.json	Refactor to consolidate `tsconfig` files (#1685 )	2021-09-26 18:48:09 +02:00
vercel.json	Add redirects to `vercel.json` (#1722 )	2021-10-07 09:10:51 +02:00

readme.md

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.

❤️ Powerful: MDX blends markdown and JSX syntax to fit perfectly in 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.