@mdx-js/mdx

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>
)