« BackGitHub Logo

MDX with Jeasx - write content with Markdown

MDX allows you to use JSX directly within your markdown content. This means you can import JSX components and seamlessly embed them in your text. This makes writing long-form content with dynamic components much more enjoyable and efficient. Markdown often feels more natural to write than HTML or JSX, especially for common elements like emphasis or headings.

How to configure MDX for Jeasx? If you want to use MDX with Jeasx, simply run npm install @mdx-js/esbuild and add the configuration below to ESBUILD_SERVER_OPTIONS in .env.js. Visit www.jeasx.dev to learn how to enhance MDX with additional plugins.

import mdx from "@mdx-js/esbuild";

export default {
  /** @type {() => import("esbuild").BuildOptions} */
  ESBUILD_SERVER_OPTIONS: () => ({
    plugins: [
      mdx({
        development: process.env.NODE_ENV === "development",
        jsxImportSource: "jsx-async-runtime",
        elementAttributeNameCase: "html",
        stylePropertyNameCase: "css"
      })
    ]
  })
}

Accessing props in MDX

The current url is /mdx. In MDX all props can be accessed via props.

Hello Jeasx

The content above rendered via a MDX component

Dynamic content in MDX