Example: Nano JSX

[JumpLink]

It is also possible to use Nano JSX for rendering JSX in MDX, here is a small example:

example.mdx:

export function Thing() {
  return <>World</>
}

# Hello <Thing />

index.tsx:

import { render, renderSSR } from 'nano-jsx/esm/index.js'
import type { MDXComponents } from 'mdx/types'

import Content from './example.mdx'

export const components: MDXComponents = {
    h1(properties) {
      return <h2 {...properties} />
    }
}

// To use this in the browser use `render` instead
console.log("Output:", renderSSR(<Content components={components} />))

That should have already shown the most important thing. In my case I used esbuild, here are the remaining files for this setup:

esbuild.js:

import mdx from '@mdx-js/esbuild'
import esbuild from 'esbuild'

await esbuild.build({
  entryPoints: ['index.tsx'],
  format: 'esm',
  outdir: 'dist',
  plugins: [mdx({jsxImportSource: 'nano-jsx/esm'})],
  bundle: true,
})

tsconfig.json:

{
    "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "jsx": "react-jsx",
        "jsxImportSource": "nano-jsx/esm",
        "types": ["mdx"]
    },
    "include": ["*.ts", "*.tsx", "*.mdx"]
}

package.json:

{
    "name": "mdx-nano-jsx-example",
    "type": "module",
    "scripts": {
        "build": "node esbuild.js",
        "ssr": "node dist/index.js"
    },
    "devDependencies": {
        "@mdx-js/esbuild": "^3.0.1",
        "@types/mdx": "^2.0.13",
        "esbuild": "^0.23.1",
        "nano-jsx": "^0.1.0",
        "typescript": "^5.5.4"
    }
}

npm run build
npm run ssr
# Output: <h2>Hello World</h2>