ezmdx

MDX is easy.

Usage

MDX

import { MDX } from 'ezmdx'

export default function Page() {
  return <MDX source="# Hello, world!" />
}

Outputs:

<h1>Hello, world!</h1>

compile

import { compile } from 'ezmdx'

const source = `---
title: This is a title.
---
This is a paragraph.
`

export default function Page() {
  const { frontmatter, content } = compile({ source })
  return (
    <>
      <h1>{frontmatter.title}</h1>
      {content}
    </>
  )
}

Outputs:

<h1>This is a title.</h1>
<p>This is a paragraph.</p>

Options

components

// This is much abstracted.
// See https://mdxjs.com/packages/react/#use for precise types.
{ components: { [key: JSX.ElementType]: (props: Props) => React.ReactNode } }

// Example:
{ components: { h1: ({ children }) => <h1>{children}</h1> } }

import type { MDXComponents } from 'ezmdx'
import { MDX } from 'ezmdx'

const components = {
  h1: ({ children }: { children: React.ReactNode }) => {
    return <h1 className="text-2xl font-bold">{children}</h1>
  },
} satisfies MDXComponents

export default function Page() {
  return <MDX source="# Hello, world!" options={{ components }} />
}

Outputs:

<h1 class="text-2xl font-bold">Hello, world!</h1>