@mdx-js/mdx

What is @mdx-js/mdx?

The @mdx-js/mdx package is a Markdown processor powered by JSX and React. It allows you to write JSX in your Markdown documents and render them as React components. This enables the embedding of dynamic content within static Markdown files, combining the simplicity of Markdown with the power of React.

What are @mdx-js/mdx's main functionalities?

Writing JSX in Markdown

Allows embedding JSX directly in your Markdown files, which can then be transformed into React components.

import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import { mdx } from '@mdx-js/mdx'

const mdxContent = `
# Hello, MDX!

Some **bold** text and a component:

<MyComponent />
`

const MyComponent = () => <div>My Custom Component</div>

const run = async () => {
  const jsx = await mdx(mdxContent)
  // Now you can render the jsx with your preferred method
}

run()

Customizing Markdown components

Enables overriding default HTML tags with custom React components for a more personalized rendering of Markdown content.

import React from 'react'
import { MDXProvider } from '@mdx-js/react'

const components = {
  h1: props => <h1 style={{ color: 'tomato' }} {...props} />,
  p: props => <p style={{ fontSize: '18px' }} {...props} />
}

const MarkdownContent = () => (
  <MDXProvider components={components}>
    <YourMDXContent />
  </MDXProvider>
)

Using MDX files as pages in a React application

Facilitates the use of MDX files as if they were React components, making it easy to integrate them into a React application as pages or parts of pages.

import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import YourMDXPage from './YourMDXPage.mdx'

const App = () => (
  <MDXProvider>
    <YourMDXPage />
  </MDXProvider>
)

Other packages similar to @mdx-js/mdx

remark

Remark is a markdown processor powered by plugins part of the unified collective. It is similar to @mdx-js/mdx in that it allows for the transformation and parsing of Markdown content, but it does not support JSX out of the box.

rehype

Rehype is an HTML processor that can be used to manipulate and process HTML content. It is also part of the unified collective and can be used in conjunction with remark to render Markdown as HTML. However, it does not natively support JSX or the direct use of React components.

markdown-it

Markdown-it is a Markdown parser with a focus on speed and extensibility. It supports a variety of plugins to extend its functionality but does not have built-in support for JSX or React components, making it less suitable for projects that require tight integration with React.

README

@mdx-js/mdx

MDX implementation using remark.

Installation

npm:

npm i -S @mdx-js/mdx

Usage

const mdx = require('@mdx-js/mdx')

const result = await mdx(`
# Hello, MDX

I <3 Markdown and JSX
`)

console.log(result)

Yields:

export default ({components, ...props}) => (
  <MDXTag name="wrapper" components={components}>
    <MDXTag name="h1" components={components}>{`Hello, MDX`}</MDXTag>
    <MDXTag name="p" components={components}>{`I <3 Markdown and JSX`}</MDXTag>
  </MDXTag>
)

Contribute

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.

License

MIT © Compositor and Vercel