MDX on demand

2 minutes read
By Titus Wormer

This guide shows how to use @mdx-js/mdx to compile MDX on the server and run the result on clients. Some frameworks, such as Next.js and Remix, make it easy to split work between servers and clients. Using that it’s possible to for example do most of the work on demand on the server instead of at build time, then pass the resulting data to clients, where they finally use it.

This is similar to what people sometimes use mdx-bundler or next-mdx-remote for, but MDX also supports it.

Quick example

On the server:

server.js

import {compile} from '@mdx-js/mdx'

const code = String(await compile('# hi', {
  outputFormat: 'function-body',
  /* …otherOptions */
}))
// To do: send `code` to the client somehow.

(alias) function compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

const code: string

var String: StringConstructor
(value?: any) => string

(alias) compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

(property) outputFormat?: "function-body" | "program" | null | undefined

On the client:

client.js

import {run} from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'

const code = '' // To do: get `code` from server somehow.

const {default: Content} = await run(code, {...runtime, baseUrl: import.meta.url})

(alias) function run(code: {
    toString(): string;
}, options: RunOptions): Promise<MDXModule>
import run

import runtime

const code: ""

(property) MDXModule.default: MDXContent

const Content: MDXContent

(alias) run(code: {
    toString(): string;
}, options: RunOptions): Promise<MDXModule>
import run

const code: ""

import runtime

(property) baseUrl?: string | URL | null | undefined

(property) ImportMeta.url: string

Content is now an MDXContent component that you can use like normal in your framework (see § Using MDX).

More information is available in the API docs of @mdx-js/mdx for compile and run. For other use cases, you can also use evaluate, which both compiles and runs in one.

Note: MDX is not a bundler (esbuild, webpack, and Rollup are bundlers): you can’t import other code from the server within the string of MDX and get a nicely minified bundle out or so.

Next.js example

Some frameworks let you write the server and client code in one file, such as Next.

pages/hello.js

/**
 * @import {MDXModule} from 'mdx/types.js'
 * @import {Dispatch, SetStateAction} from 'react'
 */

import {compile, run} from '@mdx-js/mdx'
import {Fragment, useEffect, useState} from 'react'
import * as runtime from 'react/jsx-runtime'

/**
 * @param {{code: string}} props
 * @returns {JSX.Element}
 */
export default function Page({code}) {
  /** @type {[MDXModule | undefined, Dispatch<SetStateAction<MDXModule | undefined>>]} */
  const [mdxModule, setMdxModule] = useState()
  const Content = mdxModule ? mdxModule.default : Fragment

  useEffect(
    function () {
      ;(async function () {
        setMdxModule(await run(code, {...runtime, baseUrl: import.meta.url}))
      })()
    },
    [code]
  )

  return <Content />
}

export async function getStaticProps() {
  const code = String(
    await compile('# hi', {
      outputFormat: 'function-body'
      /* …otherOptions */
    })
  )
  return {props: {code}}
}

(alias) function compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

(alias) function run(code: {
    toString(): string;
}, options: RunOptions): Promise<MDXModule>
import run

(alias) const Fragment: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}>
import Fragment

Lets you group elements without a wrapper node.

@see {@link https://react.dev/reference/react/Fragment React Docs}

@example

import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>

@example

// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>

(alias) function useEffect(effect: React.EffectCallback, deps?: React.DependencyList): void
import useEffect

(alias) function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
import useState

import runtime

function Page({ code }: {
    code: string;
}): JSX.Element

(parameter) code: string

const mdxModule: MDXModule | undefined

const setMdxModule: Dispatch<SetStateAction<MDXModule | undefined>>

(alias) useState<MDXModule>(): [MDXModule | undefined, Dispatch<SetStateAction<MDXModule | undefined>>] (+1 overload)
import useState

const Content: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}> | MDXContent

const mdxModule: MDXModule | undefined

const mdxModule: MDXModule

(property) MDXModule.default: MDXContent

(alias) const Fragment: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}>
import Fragment

Lets you group elements without a wrapper node.

@see {@link https://react.dev/reference/react/Fragment React Docs}

@example

import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>

@example

// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>

(alias) useEffect(effect: React.EffectCallback, deps?: React.DependencyList): void
import useEffect

const setMdxModule: (value: SetStateAction<MDXModule | undefined>) => void

(alias) run(code: {
    toString(): string;
}, options: RunOptions): Promise<MDXModule>
import run

(parameter) code: string

import runtime

(property) baseUrl?: string | URL | null | undefined

(property) ImportMeta.url: string

(parameter) code: string

const Content: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}> | MDXContent

function getStaticProps(): Promise<{
    props: {
        code: string;
    };
}>

const code: string

var String: StringConstructor
(value?: any) => string

(alias) compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

(property) outputFormat?: "function-body" | "program" | null | undefined

(property) props: {
    code: string;
}

(property) code: string