npm install mdxe

import { execute } from 'mdxe'
 
const mdx = `
---
title: Hello World
---
 
# {frontmatter.title}
 
This is **MDX** content with {1 + 1} expressions.
`
 
const { content, frontmatter } = await execute(mdx)

import { execute } from 'mdxe'
 
const mdx = `
# Interactive Demo
 
<Button onClick={() => alert('clicked!')}>
  Click me
</Button>
 
<Chart data={[1, 2, 3, 4, 5]} />
`
 
const result = await execute(mdx, {
  components: {
    Button: (props) => <button {...props} />,
    Chart: ({ data }) => <svg>{/* render chart */}</svg>,
  },
})

import { createLocalEvaluator } from '@mdxe/workers/local'
 
const evaluator = createLocalEvaluator()
const result = await evaluator.evaluate(mdx)

import { execute } from '@mdxe/workers'
 
export default {
  async fetch(request, env) {
    const mdx = await env.CONTENT.get('page.mdx')
    const { content } = await execute(mdx)
 
    return new Response(content, {
      headers: { 'content-type': 'text/html' },
    })
  },
}

interface ExecuteOptions {
  /** Custom components */
  components?: Record<string, Component>
 
  /** Scope variables accessible in MDX */
  scope?: Record<string, unknown>
 
  /** MDX compile options */
  mdxOptions?: MDXOptions
 
  /** Enable development mode */
  development?: boolean
}

import { execute, MDXError } from 'mdxe'
 
try {
  const result = await execute(invalidMdx)
} catch (error) {
  if (error instanceof MDXError) {
    console.log(error.line)    // Line number
    console.log(error.column)  // Column number
    console.log(error.source)  // Source context
  }
}