Getting started

7-10 minutes read
By Titus Wormer

Getting started

This article explains how to integrate MDX into your project. It shows how to use MDX with your bundler and JSX runtime of choice. To understand how the MDX format works, we recommend that you start with § What is MDX. See § Using MDX when you’re all set up and ready to use MDX.

Prerequisites

MDX relies on JSX, so it’s required that your project supports JSX as well. Any JSX runtime (React, Preact, Vue, etc.) will do. Note that we do compile JSX to JavaScript for you so you don’t have to set that up.

All @mdx-js/* packages are written in modern JavaScript. A Node.js version of 16 or later is needed to use them. Our packages are also ESM only.

Note: Using Rust instead of Node.js? Try mdxjs-rs!

Quick start

Bundler

MDX is a language that’s compiled to JavaScript. (We also compile regular markdown to JavaScript.) The easiest way to get started is to use an integration for your bundler if you have one:

if you use esbuild (or Bun), install and configure @mdx-js/esbuild
if you use Rollup (or Vite), install and configure @mdx-js/rollup
if you use webpack (or Next.js), install and configure @mdx-js/loader

You can also use MDX without bundlers:

you can import MDX files in Node.js with @mdx-js/node-loader
you can use our core compiler @mdx-js/mdx to compile MDX files
you can use our core compiler @mdx-js/mdx to evaluate (compile and run) MDX files

For more info on these tools, see their dedicated sections: ¶ Next.js, ¶ Node.js, ¶ Rollup, ¶ Vite, ¶ esbuild, and ¶ webpack.

JSX

Now you’ve set up an integration or @mdx-js/mdx itself, it’s time to configure your JSX runtime.

if you use React, that’s the default; optionally install and configure @mdx-js/react
if you use Preact, set jsxImportSource in ProcessorOptions to 'preact'; optionally install and configure @mdx-js/preact
if you use Svelte, install svelte-jsx, and set jsxImportSource in ProcessorOptions to 'svelte-jsx'
if you use Vue, set jsxImportSource in ProcessorOptions to 'vue'; optionally install and configure @mdx-js/vue
if you use Solid, set jsxImportSource in ProcessorOptions to 'solid-js/h'
if you use Emotion, set jsxImportSource in ProcessorOptions to '@emotion/react'
if you use Theme UI, install and configure @mdx-js/react, then wrap your MDX content in a <ThemeProvider />

Other JSX runtimes are supported by setting jsxImportSource in ProcessorOptions.

For more info on these tools, see their dedicated sections: ¶ Emotion, ¶ Preact, ¶ React, ¶ Solid, ¶ Svelte, ¶ Theme UI, and ¶ Vue.

Editor

You can enhance the experience of using MDX by adding support of it to your editor:

if you use VS Code, try mdx-js/mdx-analyzer
if you use Vim, try jxnblk/vim-mdx-js
if you use Sublime Text, try jonsuh/mdx-sublime
if you use JetBrains IntelliJ/WebStorm, try JetBrains/mdx-intellij-plugin

The syntax highlighting that powers our VS Code extension and that is used to highlight code blocks on GitHub is maintained at wooorm/markdown-tm-language.

Types

Expand example of typed imports

First install the package:

Shell

npm install @types/mdx

…TypeScript should automatically pick it up:

example.js

import Post from './post.mdx' // `Post` is now typed.

(alias) function Post(props: MDXProps): Element
import Post

Our packages are typed with TypeScript. For types to work, the JSX namespace must be typed. This is done by installing and using the types of your framework, such as @types/react, then augmenting the mdx/types.js module.

example.ts

import * as React from 'react'

declare module 'mdx/types.js' {
  export import JSX = React.JSX
}

(alias) namespace React
import React

(alias) namespace JSX
import JSX = JSX

(alias) namespace React
import React

namespace JSX

To enable types for imported .mdx, .md, etc., install and use @types/mdx. This package also exports several useful types, such as MDXComponents which represents the components prop. You can import them like so:

example.ts

import type {MDXComponents} from 'mdx/types.js'

(alias) type MDXComponents = NestedMDXComponents & {
    [x: string]: Component<JSX.IntrinsicElements> | undefined;
} & {
    wrapper?: Component<any>;
}
import MDXComponents

Security

MDX is a programming language. If you trust your authors, that’s fine. If you don’t, it’s unsafe.

Do not let random people from the internet write MDX. If you do, you might want to look into using <iframe>s with sandbox, but security is hard, and that doesn’t seem to be 100%. For Node.js, vm2 sounds interesting. But you should probably also sandbox the whole OS using Docker or similar, perform rate limiting, and make sure processes can be killed when taking too long.

Integrations

Bundlers

esbuild

Expand example

example.js

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

await esbuild.build({
  entryPoints: ['index.mdx'],
  format: 'esm',
  outfile: 'output.js',
  plugins: [mdx({/* jsxImportSource: …, otherOptions… */})]
})

(alias) function mdx(options?: Readonly<Options> | null | undefined): esbuild.Plugin
import mdx

import esbuild

import esbuild

function build<{
    entryPoints: string[];
    format: "esm";
    outfile: string;
    plugins: esbuild.Plugin[];
}>(options: esbuild.SameShape<esbuild.BuildOptions, {
    entryPoints: string[];
    format: "esm";
    outfile: string;
    plugins: esbuild.Plugin[];
}>): Promise<esbuild.BuildResult<{
    entryPoints: string[];
    format: "esm";
    outfile: string;
    plugins: esbuild.Plugin[];
}>>

(property) entryPoints: string[]

(property) format: "esm"

(property) outfile: string

(property) plugins: esbuild.Plugin[]

(alias) mdx(options?: Readonly<Options> | null | undefined): esbuild.Plugin
import mdx

We support esbuild. Install and configure the esbuild plugin @mdx-js/esbuild. Configure your JSX runtime depending on which one (React, Preact, Vue, etc.) you use.

To use more modern JavaScript features than what your users support, configure esbuild’s target.

See also ¶ Bun, which you might be using, for more info.

Rollup

Expand example

rollup.config.js

/**
 * @import {RollupOptions} from 'rollup'
 */

import mdx from '@mdx-js/rollup'
import {babel} from '@rollup/plugin-babel'

/** @type {RollupOptions} */
const config = {
  // …
  plugins: [
    // …
    mdx({/* jsxImportSource: …, otherOptions… */}),
    // Babel is optional:
    babel({
      // Also run on what used to be `.mdx` (but is now JS):
      extensions: ['.js', '.jsx', '.cjs', '.mjs', '.md', '.mdx'],
      // Other options…
    })
  ]
}

export default config

(alias) function mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

(alias) function babel(options?: RollupBabelInputPluginOptions): Plugin
import babel

const config: RollupOptions

(property) InputOptions.plugins?: InputPluginOption

(alias) mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

(alias) babel(options?: RollupBabelInputPluginOptions): Plugin
import babel

(property) RollupBabelInputPluginOptions.extensions?: string[]

const config: RollupOptions

We support Rollup. Install and configure the Rollup plugin @mdx-js/rollup. Configure your JSX runtime depending on which one (React, Preact, Vue, etc.) you use.

To use more modern JavaScript features than what your users support, install and configure @rollup/plugin-babel.

See also ¶ Vite, if you use Rollup through it, for more info.

Webpack

Expand example

webpack.config.js

/**
 * @import {Options} from '@mdx-js/loader'
 * @import {Configuration} from 'webpack'
 */

/** @type {Configuration} */
const webpackConfig = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          // Babel is optional:
          {loader: 'babel-loader', options: {}},
          {
            loader: '@mdx-js/loader',
            /** @type {Options} */
            options: {/* jsxImportSource: …, otherOptions… */}
          }
        ]
      }
    ]
  }
}

export default webpackConfig

const webpackConfig: Configuration

(property) Configuration.module?: ModuleOptions

(property) ModuleOptions.rules?: (false | "" | 0 | RuleSetRule | "..." | null | undefined)[]

(property) RuleSetRule.test?: string | RegExp | ((value: string) => boolean) | RuleSetLogicalConditionsAbsolute | RuleSetConditionAbsolute[]

(property) RuleSetRule.use?: string | RuleSetUseFunction | (string | false | 0 | RuleSetUseFunction | {
    ident?: string;
    loader?: string;
    options?: string | {
        [index: string]: any;
    };
} | null | undefined)[] | {
    ident?: string;
    loader?: string;
    options?: string | {
        [index: string]: any;
    };
}

(property) loader?: string

(property) options?: string | {
    [index: string]: any;
}

(property) loader?: string

(property) options?: string | {
    [index: string]: any;
}

const webpackConfig: Configuration

We support webpack. Install and configure the webpack loader @mdx-js/loader. Configure your JSX runtime depending on which one (React, Preact, Vue, etc.) you use.

To use more modern JavaScript features than what your users support, install and configure babel-loader.

See also ¶ Next.js, if you use webpack through it, for more info.

Build systems

Vite

Expand example

vite.config.js

import mdx from '@mdx-js/rollup'
import {defineConfig} from 'vite'

const viteConfig = defineConfig({
  plugins: [
    mdx(/* jsxImportSource: …, otherOptions… */)
  ]
})

export default viteConfig

(alias) function mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

(alias) function defineConfig(config: UserConfig): UserConfig (+5 overloads)
import defineConfig

const viteConfig: UserConfig

(alias) defineConfig(config: UserConfig): UserConfig (+5 overloads)
import defineConfig

(property) UserConfig.plugins?: PluginOption[]

(alias) mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

const viteConfig: UserConfig

We support Vite. Install and configure the Rollup plugin @mdx-js/rollup. Configure your JSX runtime depending on which one (React, Preact, Vue, etc.) you use.

To use more modern JavaScript features than what your users support, configure Vite’s build.target.

Note: If you also use @vitejs/plugin-react, you must force @mdx-js/rollup to run in the pre phase before it:

vite.config.js

// …
const viteConfig = defineConfig({
  plugins: [
    {enforce: 'pre', ...mdx({/* jsxImportSource: …, otherOptions… */})},
    react({include: /\.(jsx|js|mdx|md|tsx|ts)$/})
  ]
})
// …

const viteConfig: UserConfig

(alias) defineConfig(config: UserConfig): UserConfig (+5 overloads)
import defineConfig

(property) UserConfig.plugins?: PluginOption[]

(property) Plugin<any>.enforce?: "pre" | "post"

(alias) mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

(alias) react(opts?: Options): Plugin[]
import react

(property) Options.include?: string | RegExp | (string | RegExp)[]

See also ¶ Rollup which is used in Vite and see ¶ Vue if you’re using that, for more info.

Linters

ESLint

You can lint your MDX code with ESLint using eslint-mdx.

mdxlint

You can lint your MDX code with remark-lint and other remark plugins using mdxlint.

Compilers

Babel

Expand plugin and sample use

This plugin:

plugin.js

/**
 * @import {ParseResult, ParserOptions} from '@babel/parser'
 * @import {File} from '@babel/types'
 * @import {Program} from 'estree'
 * @import {Plugin} from 'unified'
 */

import parser from '@babel/parser'
import {compileSync} from '@mdx-js/mdx'
import estreeToBabel from 'estree-to-babel'

/**
 * Plugin that tells Babel to use a different parser.
 */
export function babelPluginSyntaxMdx() {
  return {parserOverride: babelParserWithMdx}
}

/**
 * Parser that handles MDX with `@mdx-js/mdx` and passes other things through
 * to the normal Babel parser.
 *
 * @param {string} value
 * @param {ParserOptions} options
 * @returns {ParseResult&#60File>}
 */
function babelParserWithMdx(value, options) {
  /** @type {string | undefined} */
  // @ts-expect-error: babel changed the casing at some point and the types are out of date.
  const filename = options.sourceFilename || options.sourceFileName

  if (filename && /\.mdx?$/.test(filename)) {
    // Babel does not support async parsers, unfortunately.
    const file = compileSync(
      {value, path: options.sourceFilename},
      {recmaPlugins: [recmaBabel] /* jsxImportSource: …, otherOptions… */}
    )
    return /** @type {ParseResult&#60File>} */</span> (<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-25><span class=pl-smi>file</span></span>.<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-26><span class=pl-smi>result</span></span>)
  }

  <span class=pl-k>return</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-27><span class=pl-smi>parser</span></span>.<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-28><span class=pl-c1>parse</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-29>value</span>, <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-30>options</span>)
}

<span class=pl-c>/**</span>
<span class=pl-c> * A “recma” plugin is a unified plugin that runs on the estree (used by</span>
<span class=pl-c> * `@mdx-js/mdx` and much of the JS ecosystem but not Babel).</span>
<span class=pl-c> * This plugin defines `'estree-to-babel'` as the compiler,</span>
<span class=pl-c> * which means that the resulting Babel tree is given back by `compileSync`.</span>
<span class=pl-c> *</span>
<span class=pl-c> * @type {Plugin&#60[], Program, unknown>}</span>
<span class=pl-c> */</span>
<span class=pl-k>function</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-31><span class=pl-en>recmaBabel</span></span>() {
  <span class=pl-c>// @ts-expect-error: `Program` is similar enough to a unist node.</span>
  <span class=pl-c1>this</span>.<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-32><span class=pl-smi>compiler</span></span> <span class=pl-k>=</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-33>compiler</span>

  <span class=pl-c>/**</span>
<span class=pl-c>   * @param {Program} tree</span>
<span class=pl-c>   * @returns {unknown}</span>
<span class=pl-c>   */</span>
  <span class=pl-k>function</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-34><span class=pl-en>compiler</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-35><span class=pl-smi>tree</span></span>) {
    <span class=pl-c>// @ts-expect-error: TS2349: This expression *is* callable, `estreeToBabel` types are wrong.</span>
    <span class=pl-k>return</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-36><span class=pl-en>estreeToBabel</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-iPPfawre-37>tree</span>)
  }
}
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>import</span> <span class=pl-smi>parser</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>compileSync</span>(<span class=pl-v>vfileCompatible</span><span class=pl-k>:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>Compatible</span>>, <span class=pl-v>compileOptions</span><span class=pl-k>?:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>CompileOptions</span>> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>)<span class=pl-k>:</span> <span class=pl-en>VFile</span>
<span class=pl-k>import</span> <span class=pl-smi>compileSync</span></code></pre><div class=rehype-twoslash-popover-description><p>Synchronously compile MDX to JS.<p>When possible please use the async <code>compile</code>.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>import</span> <span class=pl-smi>estreeToBabel</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>function</span> <span class=pl-en>babelPluginSyntaxMdx</span>()<span class=pl-k>:</span> {
    <span class=pl-en>parserOverride</span><span class=pl-k>:</span> (<span class=pl-v>value</span><span class=pl-k>:</span> <span class=pl-c1>string</span>, <span class=pl-v>options</span><span class=pl-k>:</span> <span class=pl-en>parser</span>.<span class=pl-en>ParserOptions</span>) <span class=pl-k>=></span> <span class=pl-en>parser</span>.<span class=pl-en>ParseResult</span>&lt;<span class=pl-en>File</span>>;
}</code></pre><div class=rehype-twoslash-popover-description><p>Plugin that tells Babel to use a different parser.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-en>parserOverride</span>: (<span class=pl-v>value</span><span class=pl-k>:</span> <span class=pl-c1>string</span>, <span class=pl-v>options</span><span class=pl-k>:</span> <span class=pl-en>parser</span>.<span class=pl-en>ParserOptions</span>) <span class=pl-k>=></span> <span class=pl-smi>parser</span>.<span class=pl-smi>ParseResult</span><span class=pl-k>&lt;</span><span class=pl-c1>File</span><span class=pl-k>></span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>function</span> <span class=pl-en>babelParserWithMdx</span>(<span class=pl-v>value</span><span class=pl-k>:</span> <span class=pl-c1>string</span>, <span class=pl-v>options</span><span class=pl-k>:</span> <span class=pl-en>parser</span>.<span class=pl-en>ParserOptions</span>)<span class=pl-k>:</span> <span class=pl-en>parser</span>.<span class=pl-en>ParseResult</span>&lt;<span class=pl-en>File</span>></code></pre><div class=rehype-twoslash-popover-description><p>Parser that handles MDX with <code>@mdx-js/mdx</code> and passes other things through to the normal Babel parser.<ul><li><strong>@param</strong> value<li><strong>@param</strong> options<li><strong>@returns</strong></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>function</span> <span class=pl-en>babelParserWithMdx</span>(<span class=pl-v>value</span><span class=pl-k>:</span> <span class=pl-c1>string</span>, <span class=pl-v>options</span><span class=pl-k>:</span> <span class=pl-en>parser</span>.<span class=pl-en>ParserOptions</span>)<span class=pl-k>:</span> <span class=pl-en>parser</span>.<span class=pl-en>ParseResult</span>&lt;<span class=pl-en>File</span>></code></pre><div class=rehype-twoslash-popover-description><p>Parser that handles MDX with <code>@mdx-js/mdx</code> and passes other things through to the normal Babel parser.<ul><li><strong>@param</strong> value<li><strong>@param</strong> options<li><strong>@returns</strong></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>value</span>: <span class=pl-smi>string</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> value</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>options</span>: <span class=pl-smi>Partial</span><span class=pl-k>&lt;</span><span class=pl-smi>Options</span><span class=pl-k>></span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> options</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>filename</span><span class=pl-k>:</span> <span class=pl-c1>string</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@type</strong> {string | undefined}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>options</span>: <span class=pl-smi>Partial</span><span class=pl-k>&lt;</span><span class=pl-smi>Options</span><span class=pl-k>></span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> options</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>sourceFilename</span><span class=pl-k>?:</span> <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>Correlate output AST nodes with their source filename. Useful when generating code and source maps from the ASTs of multiple input files.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>options</span>: <span class=pl-smi>Partial</span><span class=pl-k>&lt;</span><span class=pl-smi>Options</span><span class=pl-k>></span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> options</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-smi>any</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>filename</span><span class=pl-k>:</span> <span class=pl-c1>string</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@type</strong> {string | undefined}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>method</span>) <span class=pl-c1>RegExp</span>.<span class=pl-c1>test</span>(<span class=pl-smi>string</span>: <span class=pl-smi>string</span>): <span class=pl-smi>boolean</span></code></pre><div class=rehype-twoslash-popover-description><p>Returns a Boolean value that indicates whether or not a pattern exists in a searched string.<ul><li><strong>@param</strong> string String on which to perform the search.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>filename</span><span class=pl-k>:</span> <span class=pl-c1>string</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@type</strong> {string | undefined}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-17 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>file</span><span class=pl-k>:</span> <span class=pl-en>VFile</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-18 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>compileSync</span>(<span class=pl-smi>vfileCompatible</span>: <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>Compatible</span><span class=pl-k>></span>, <span class=pl-smi>compileOptions</span><span class=pl-k>?:</span> <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>CompileOptions</span><span class=pl-k>></span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>): <span class=pl-smi>VFile</span>
<span class=pl-k>import</span> <span class=pl-smi>compileSync</span></code></pre><div class=rehype-twoslash-popover-description><p>Synchronously compile MDX to JS.<p>When possible please use the async <code>compile</code>.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-19 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-en>value</span>: <span class=pl-smi>string</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-20 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-en>path</span>: <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-21 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>options</span>: <span class=pl-smi>Partial</span><span class=pl-k>&lt;</span><span class=pl-smi>Options</span><span class=pl-k>></span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> options</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-22 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>sourceFilename</span><span class=pl-k>?:</span> <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>Correlate output AST nodes with their source filename. Useful when generating code and source maps from the ASTs of multiple input files.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-23 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>recmaPlugins</span><span class=pl-k>?:</span> <span class=pl-smi>PluggableList</span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>List of recma plugins (optional).</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-24 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>class</span> <span class=pl-en>recmaBabel</span>
<span class=pl-en>function</span> <span class=pl-en>recmaBabel</span>(<span class=pl-en>this</span>: <span class=pl-en>Processor</span>): <span class=pl-en>void</span> | <span class=pl-en>Transformer</span>&lt;<span class=pl-en>Program</span>, <span class=pl-en>Node</span>> | <span class=pl-en>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>A “recma” plugin is a unified plugin that runs on the estree (used by <code>@mdx-js/mdx</code> and much of the JS ecosystem but not Babel). This plugin defines <code>'estree-to-babel'</code> as the compiler, which means that the resulting Babel tree is given back by <code>compileSync</code>.<ul><li><strong>@type</strong> {Plugin&#60[], Program, unknown>}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-25 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>file</span><span class=pl-k>:</span> <span class=pl-en>VFile</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-26 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>VFile</span>.<span class=pl-smi>result</span>: <span class=pl-smi>unknown</span></code></pre><div class=rehype-twoslash-popover-description><p>Custom, non-string, compiled, representation.<p>This is used by unified to store non-string results. One example is when turning markdown into React nodes.<ul><li><strong>@type</strong> {unknown}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-27 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>import</span> <span class=pl-smi>parser</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-28 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>parse</span>(<span class=pl-smi>input</span>: <span class=pl-smi>string</span>, <span class=pl-smi>options</span><span class=pl-k>?:</span> <span class=pl-smi>parser</span>.<span class=pl-smi>ParserOptions</span>): <span class=pl-smi>parser</span>.<span class=pl-smi>ParseResult</span><span class=pl-k>&lt;</span><span class=pl-c1>File</span><span class=pl-k>></span>
<span class=pl-k>export</span> <span class=pl-smi>parse</span></code></pre><div class=rehype-twoslash-popover-description><p>Parse the provided code as an entire ECMAScript program.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-29 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>value</span>: <span class=pl-smi>string</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> value</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-30 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>options</span>: <span class=pl-smi>Partial</span><span class=pl-k>&lt;</span><span class=pl-smi>Options</span><span class=pl-k>></span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> options</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-31 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>function</span> <span class=pl-en>recmaBabel</span>(<span class=pl-c1>this</span><span class=pl-k>:</span> <span class=pl-en>Processor</span>)<span class=pl-k>:</span> <span class=pl-c1>void</span> <span class=pl-k>|</span> <span class=pl-en>Transformer</span>&lt;<span class=pl-en>Program</span>, <span class=pl-en>Node</span>> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>A “recma” plugin is a unified plugin that runs on the estree (used by <code>@mdx-js/mdx</code> and much of the JS ecosystem but not Babel). This plugin defines <code>'estree-to-babel'</code> as the compiler, which means that the resulting Babel tree is given back by <code>compileSync</code>.<ul><li><strong>@type</strong> {Plugin&#60[], Program, unknown>}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-32 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>recmaBabel</span>.<span class=pl-smi>compiler</span>: (<span class=pl-v>tree</span><span class=pl-k>:</span> <span class=pl-en>Program</span>) <span class=pl-k>=></span> <span class=pl-smi>unknown</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-33 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>local</span> <span class=pl-k>function</span>) <span class=pl-en>compiler</span>(<span class=pl-v>tree</span><span class=pl-k>:</span> <span class=pl-en>Program</span>)<span class=pl-k>:</span> <span class=pl-c1>unknown</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> tree<li><strong>@returns</strong></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-34 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>local</span> <span class=pl-k>function</span>) <span class=pl-en>compiler</span>(<span class=pl-v>tree</span><span class=pl-k>:</span> <span class=pl-en>Program</span>)<span class=pl-k>:</span> <span class=pl-c1>unknown</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> tree<li><strong>@returns</strong></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-35 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>tree</span>: <span class=pl-smi>Program</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> tree</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-36 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>import</span> <span class=pl-smi>estreeToBabel</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-iPPfawre-37 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>tree</span>: <span class=pl-smi>Program</span></code></pre><div class=rehype-twoslash-popover-description><ul><li><strong>@param</strong> tree</ul></div></div></div><button class=copy-button data-value="/**
 * @import {ParseResult, ParserOptions} from &#39@babel/parser&#39
 * @import {File} from &#39@babel/types&#39
 * @import {Program} from &#39estree&#39
 * @import {Plugin} from &#39unified&#39
 */

import parser from &#39@babel/parser&#39
import {compileSync} from &#39@mdx-js/mdx&#39
import estreeToBabel from &#39estree-to-babel&#39

/**
 * Plugin that tells Babel to use a different parser.
 */
export function babelPluginSyntaxMdx() {
  return {parserOverride: babelParserWithMdx}
}

/**
 * Parser that handles MDX with &#96@mdx-js/mdx&#96 and passes other things through
 * to the normal Babel parser.
 *
 * @param {string} value
 * @param {ParserOptions} options
 * @returns {ParseResult<File>}
 */
function babelParserWithMdx(value, options) {
  /** @type {string | undefined} */
  // @ts-expect-error: babel changed the casing at some point and the types are out of date.
  const filename = options.sourceFilename || options.sourceFileName

  if (filename &#38&#38 /\.mdx?$/.test(filename)) {
    // Babel does not support async parsers, unfortunately.
    const file = compileSync(
      {value, path: options.sourceFilename},
      {recmaPlugins: [recmaBabel] /* jsxImportSource: …, otherOptions… */}
    )
    return /** @type {ParseResult<File>} */ (file.result)
  }

  return parser.parse(value, options)
}

/**
 * A “recma” plugin is a unified plugin that runs on the estree (used by
 * &#96@mdx-js/mdx&#96 and much of the JS ecosystem but not Babel).
 * This plugin defines &#96&#39estree-to-babel&#39&#96 as the compiler,
 * which means that the resulting Babel tree is given back by &#96compileSync&#96.
 *
 * @type {Plugin<[], Program, unknown>}
 */
function recmaBabel() {
  // @ts-expect-error: &#96Program&#96 is similar enough to a unist node.
  this.compiler = compiler

  /**
   * @param {Program} tree
   * @returns {unknown}
   */
  function compiler(tree) {
    // @ts-expect-error: TS2349: This expression *is* callable, &#96estreeToBabel&#96 types are wrong.
    return estreeToBabel(tree)
  }
}
"></button></div><p>…can be used like so with the Babel API:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">example.js</span></div><div class="highlight highlight-js"><pre><code class="language-js twoslash"><span class=pl-k>import</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-0><span class=pl-smi>babel</span></span> <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>@babel/core<span class=pl-pds>'</span></span>
<span class=pl-k>import</span> {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-1><span class=pl-smi>babelPluginSyntaxMdx</span></span>} <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>./plugin.js<span class=pl-pds>'</span></span>

<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-2><span class=pl-c1>document</span></span> <span class=pl-k>=</span> <span class=pl-s><span class=pl-pds>'</span># Hello, world!<span class=pl-pds>'</span></span>

<span class=pl-c>// Note that a filename must be set for our plugin to know it’s MDX instead of JS.</span>
<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-3><span class=pl-c1>result</span></span> <span class=pl-k>=</span> <span class=pl-k>await</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-4><span class=pl-smi>babel</span></span>.<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-5><span class=pl-en>transformAsync</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-6><span class=pl-c1>document</span></span>, {
  <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-7>filename</span><span class=pl-k>:</span> <span class=pl-s><span class=pl-pds>'</span>example.mdx<span class=pl-pds>'</span></span>,
  <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-8>plugins</span><span class=pl-k>:</span> [<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-9>babelPluginSyntaxMdx</span>]
})

<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-10><span class=pl-en>console</span></span>.<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-11><span class=pl-c1>log</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtcfepbc-12>result</span>)
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>import</span> <span class=pl-smi>babel</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>babelPluginSyntaxMdx</span>()<span class=pl-k>:</span> {
    <span class=pl-en>parserOverride</span><span class=pl-k>:</span> (<span class=pl-v>value</span><span class=pl-k>:</span> <span class=pl-c1>string</span>, <span class=pl-v>options</span><span class=pl-k>:</span> <span class=pl-en>babel</span>.<span class=pl-en>ParserOptions</span>) <span class=pl-k>=></span> <span class=pl-en>ParseResult</span>&lt;<span class=pl-en>babel</span>.<span class=pl-en>types</span>.<span class=pl-en>File</span>>;
}
<span class=pl-k>import</span> <span class=pl-smi>babelPluginSyntaxMdx</span></code></pre><div class=rehype-twoslash-popover-description><p>Plugin that tells Babel to use a different parser.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>document</span><span class=pl-k>:</span> <span class=pl-s><span class=pl-pds>"</span># Hello, world!<span class=pl-pds>"</span></span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>result</span><span class=pl-k>:</span> <span class=pl-en>babel</span>.<span class=pl-en>BabelFileResult</span> <span class=pl-k>|</span> <span class=pl-c1>null</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>import</span> <span class=pl-smi>babel</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>function</span> <span class=pl-en>transformAsync</span>(<span class=pl-v>code</span><span class=pl-k>:</span> <span class=pl-c1>string</span>, <span class=pl-v>opts</span><span class=pl-k>?:</span> <span class=pl-en>babel</span>.<span class=pl-en>TransformOptions</span>)<span class=pl-k>:</span> <span class=pl-en>Promise</span>&lt;<span class=pl-en>babel</span>.<span class=pl-en>BabelFileResult</span> <span class=pl-k>|</span> <span class=pl-c1>null</span>></code></pre><div class=rehype-twoslash-popover-description><p>Transforms the passed in code. Calling a callback with an object with the generated code, source map, and AST.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>document</span><span class=pl-k>:</span> <span class=pl-s><span class=pl-pds>"</span># Hello, world!<span class=pl-pds>"</span></span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>TransformOptions</span>.<span class=pl-c1>filename</span><span class=pl-k>?:</span> <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>Filename for use in errors etc<p>Default: <code>"unknown"</code></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>TransformOptions</span>.<span class=pl-c1>plugins</span><span class=pl-k>?:</span> <span class=pl-smi>babel</span>.<span class=pl-smi>PluginItem</span>[] <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>List of plugins to load and use<p>Default: <code>[]</code></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>babelPluginSyntaxMdx</span>()<span class=pl-k>:</span> {
    <span class=pl-en>parserOverride</span><span class=pl-k>:</span> (<span class=pl-v>value</span><span class=pl-k>:</span> <span class=pl-c1>string</span>, <span class=pl-v>options</span><span class=pl-k>:</span> <span class=pl-en>babel</span>.<span class=pl-en>ParserOptions</span>) <span class=pl-k>=></span> <span class=pl-en>ParseResult</span>&lt;<span class=pl-en>babel</span>.<span class=pl-en>types</span>.<span class=pl-en>File</span>>;
}
<span class=pl-k>import</span> <span class=pl-smi>babelPluginSyntaxMdx</span></code></pre><div class=rehype-twoslash-popover-description><p>Plugin that tells Babel to use a different parser.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>namespace</span> <span class=pl-en>console</span>
<span class=pl-k>var</span> <span class=pl-smi>console</span><span class=pl-k>:</span> <span class=pl-en>Console</span></code></pre><div class=rehype-twoslash-popover-description><p>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.<p>The module exports two specific components:<ul><li>A <code>Console</code> class with methods such as <code>console.log()</code>, <code>console.error()</code> and <code>console.warn()</code> that can be used to write to any Node.js stream.<li>A global <code>console</code> instance configured to write to <a href=//nodejs.org/docs/latest-v24.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v24.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without importing the <code>node:console</code> module.</ul><p><em><strong>Warning</strong></em>: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the <a href=//nodejs.org/docs/latest-v24.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.<p>Example using the global <code>console</code>:<pre><code class=language-js><span class=pl-en>console</span>.<span class=pl-c1>log</span>(<span class=pl-s><span class=pl-pds>'</span>hello world<span class=pl-pds>'</span></span>);
<span class=pl-c>// Prints: hello world, to stdout</span>
<span class=pl-en>console</span>.<span class=pl-c1>log</span>(<span class=pl-s><span class=pl-pds>'</span>hello %s<span class=pl-pds>'</span></span>, <span class=pl-s><span class=pl-pds>'</span>world<span class=pl-pds>'</span></span>);
<span class=pl-c>// Prints: hello world, to stdout</span>
<span class=pl-en>console</span>.<span class=pl-c1>error</span>(<span class=pl-k>new</span> <span class=pl-en>Error</span>(<span class=pl-s><span class=pl-pds>'</span>Whoops, something bad happened<span class=pl-pds>'</span></span>));
<span class=pl-c>// Prints error message and stack trace to stderr:</span>
<span class=pl-c>//   Error: Whoops, something bad happened</span>
<span class=pl-c>//     at [eval]:5:15</span>
<span class=pl-c>//     at Script.runInThisContext (node:vm:132:18)</span>
<span class=pl-c>//     at Object.runInThisContext (node:vm:309:38)</span>
<span class=pl-c>//     at node:internal/process/execution:77:19</span>
<span class=pl-c>//     at [eval]-wrapper:6:22</span>
<span class=pl-c>//     at evalScript (node:internal/process/execution:76:60)</span>
<span class=pl-c>//     at node:internal/main/eval_string:23:3</span>

<span class=pl-k>const</span> <span class=pl-c1>name</span> <span class=pl-k>=</span> <span class=pl-s><span class=pl-pds>'</span>Will Robinson<span class=pl-pds>'</span></span>;
<span class=pl-en>console</span>.<span class=pl-c1>warn</span>(<span class=pl-s><span class=pl-pds>`</span>Danger <span class=pl-pse><span class=pl-s1>${</span></span><span class=pl-s1>name</span><span class=pl-pse><span class=pl-s1>}</span></span>! Danger!<span class=pl-pds>`</span></span>);
<span class=pl-c>// Prints: Danger Will Robinson! Danger!, to stderr</span>
</code></pre><p>Example using the <code>Console</code> class:<pre><code class=language-js><span class=pl-k>const</span> <span class=pl-c1>out</span> <span class=pl-k>=</span> <span class=pl-en>getStreamSomehow</span>();
<span class=pl-k>const</span> <span class=pl-c1>err</span> <span class=pl-k>=</span> <span class=pl-en>getStreamSomehow</span>();
<span class=pl-k>const</span> <span class=pl-c1>myConsole</span> <span class=pl-k>=</span> <span class=pl-k>new</span> <span class=pl-en>console.Console</span>(out, err);

<span class=pl-smi>myConsole</span>.<span class=pl-en>log</span>(<span class=pl-s><span class=pl-pds>'</span>hello world<span class=pl-pds>'</span></span>);
<span class=pl-c>// Prints: hello world, to out</span>
<span class=pl-smi>myConsole</span>.<span class=pl-en>log</span>(<span class=pl-s><span class=pl-pds>'</span>hello %s<span class=pl-pds>'</span></span>, <span class=pl-s><span class=pl-pds>'</span>world<span class=pl-pds>'</span></span>);
<span class=pl-c>// Prints: hello world, to out</span>
<span class=pl-smi>myConsole</span>.<span class=pl-en>error</span>(<span class=pl-k>new</span> <span class=pl-en>Error</span>(<span class=pl-s><span class=pl-pds>'</span>Whoops, something bad happened<span class=pl-pds>'</span></span>));
<span class=pl-c>// Prints: [Error: Whoops, something bad happened], to err</span>

<span class=pl-k>const</span> <span class=pl-c1>name</span> <span class=pl-k>=</span> <span class=pl-s><span class=pl-pds>'</span>Will Robinson<span class=pl-pds>'</span></span>;
<span class=pl-smi>myConsole</span>.<span class=pl-en>warn</span>(<span class=pl-s><span class=pl-pds>`</span>Danger <span class=pl-pse><span class=pl-s1>${</span></span><span class=pl-s1>name</span><span class=pl-pse><span class=pl-s1>}</span></span>! Danger!<span class=pl-pds>`</span></span>);
<span class=pl-c>// Prints: Danger Will Robinson! Danger!, to err</span>
</code></pre><ul><li><strong>@see</strong> <a href=//github.com/nodejs/node/blob/v24.x/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>method</span>) <span class=pl-c1>Console</span>.<span class=pl-en>log</span>(<span class=pl-smi>message</span><span class=pl-k>?:</span> <span class=pl-smi>any</span>, <span class=pl-k>...</span><span class=pl-smi>optionalParams</span>: <span class=pl-smi>any</span>[]): <span class=pl-k>void</span></code></pre><div class=rehype-twoslash-popover-description><p>Prints to <code>stdout</code> with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to <a href=http://man7.org/linux/man-pages/man3/printf.3.html><code>printf(3)</code></a> (the arguments are all passed to <a href=//nodejs.org/docs/latest-v24.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js><span class=pl-k>const</span> <span class=pl-c1>count</span> <span class=pl-k>=</span> <span class=pl-c1>5</span>;
<span class=pl-en>console</span>.<span class=pl-c1>log</span>(<span class=pl-s><span class=pl-pds>'</span>count: %d<span class=pl-pds>'</span></span>, count);
<span class=pl-c>// Prints: count: 5, to stdout</span>
<span class=pl-en>console</span>.<span class=pl-c1>log</span>(<span class=pl-s><span class=pl-pds>'</span>count:<span class=pl-pds>'</span></span>, count);
<span class=pl-c>// Prints: count: 5, to stdout</span>
</code></pre><p>See <a href=//nodejs.org/docs/latest-v24.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li><strong>@since</strong> v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtcfepbc-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>result</span><span class=pl-k>:</span> <span class=pl-en>babel</span>.<span class=pl-en>BabelFileResult</span> <span class=pl-k>|</span> <span class=pl-c1>null</span></code></pre></div></div><button class=copy-button data-value="/// <reference types=&#34node&#34 />
// ---cut---
// @filename: plugin.js
/**
 * @import {ParseResult, ParserOptions} from &#39@babel/parser&#39
 * @import {File} from &#39@babel/types&#39
 * @import {Program} from &#39estree&#39
 * @import {Plugin} from &#39unified&#39
 */

import parser from &#39@babel/parser&#39
import {compileSync} from &#39@mdx-js/mdx&#39
import estreeToBabel from &#39estree-to-babel&#39

/**
 * Plugin that tells Babel to use a different parser.
 */
export function babelPluginSyntaxMdx() {
  return {parserOverride: babelParserWithMdx}
}

/**
 * Parser that handles MDX with &#96@mdx-js/mdx&#96 and passes other things through
 * to the normal Babel parser.
 *
 * @param {string} value
 * @param {ParserOptions} options
 * @returns {ParseResult<File>}
 */
function babelParserWithMdx(value, options) {
  /** @type {string | undefined} */
  // @ts-expect-error: babel types are wrong.
  const filename = options.sourceFilename || options.sourceFileName

  if (filename &#38&#38 /\.mdx?$/.test(filename)) {
    // Babel does not support async parsers, unfortunately.
    const file = compileSync(
      {value, path: options.sourceFilename},
      {recmaPlugins: [recmaBabel] /* jsxImportSource: …, otherOptions… */}
    )
    return /** @type {ParseResult<File>} */ (file.result)
  }

  return parser.parse(value, options)
}

/**
 * A “recma” plugin is a unified plugin that runs on the estree (used by
 * &#96@mdx-js/mdx&#96 and much of the JS ecosystem but not Babel).
 * This plugin defines &#96&#39estree-to-babel&#39&#96 as the compiler,
 * which means that the resulting Babel tree is given back by &#96compileSync&#96.
 *
 * @type {Plugin<[], Program, unknown>}
 */
function recmaBabel() {
  // @ts-expect-error: &#96Program&#96 is similar enough to a unist node.
  this.compiler = compiler

  /**
   * @param {Program} tree
   * @returns {unknown}
   */
  function compiler(tree) {
    // @ts-expect-error: TS2349: This expression *is* callable, &#96estreeToBabel&#96 types are wrong.
    return estreeToBabel(tree)
  }
}
// @filename: example.js
// ---cut---
import babel from &#39@babel/core&#39
import {babelPluginSyntaxMdx} from &#39./plugin.js&#39

const document = &#39# Hello, world!&#39

// Note that a filename must be set for our plugin to know it’s MDX instead of JS.
const result = await babel.transformAsync(document, {
  filename: &#39example.mdx&#39,
  plugins: [babelPluginSyntaxMdx]
})

console.log(result)
"></button></div></details><p>You should probably use Rollup or webpack instead of Babel directly as that gives the best interface. It is possible to use <code>@mdx-js/mdx</code> in Babel and it’s a bit faster, as it skips <code>@mdx-js/mdx</code> serialization and Babel parsing, if Babel is used anyway.<p>Babel does not support syntax extensions to its parser (it has “syntax” plugins but those only turn internal flags on or off). It does support setting a different parser. Which in turn lets us choose whether to use the <code>@mdx-js/mdx</code> or <code>@babel/parser</code>.<h4 id=site-generators><a href=#site-generators class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Site generators</h4><h5 id=astro><a href=#astro class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Astro</h5><p><a href=//astro.build>Astro</a> has its own MDX integration. You can add the integration with the Astro CLI: <code>npx astro add mdx</code>.<p>This base setup lets you import markdown, Astro components, and MDX files as components. See Astro’s <a href=//docs.astro.build/en/core-concepts/framework-components/>Framework components guide</a> for info on how to use components from frameworks in your MDX files.<p>For more on how to combine Astro and MDX, see <a href=//docs.astro.build/en/guides/integrations-guide/mdx/>Astro’s MDX integration docs</a>.<h5 id=docusaurus><a href=#docusaurus class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Docusaurus</h5><p><a href=//docusaurus.io>Docusaurus</a> supports MDX by default. See <a href=//docusaurus.io/docs/next/markdown-features/react>Docusaurus’ MDX and React guide</a> for info on how to use MDX with Docusaurus.<h5 id=gatsby><a href=#gatsby class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Gatsby</h5><p><a href=//www.gatsbyjs.com>Gatsby</a> has its own plugin to support MDX. See <a href=//www.gatsbyjs.com/plugins/gatsby-plugin-mdx/><code>gatsby-plugin-mdx</code></a> on how to use MDX with Gatsby.<h5 id=nextjs><a href=#nextjs class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Next.js</h5><details><summary>Expand example</summary><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">next.config.js</span></div><div class="highlight highlight-js"><pre><code class="language-js twoslash"><span class=pl-k>import</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-0><span class=pl-smi>nextMdx</span></span> <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>@next/mdx<span class=pl-pds>'</span></span>

<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-1><span class=pl-c1>withMdx</span></span> <span class=pl-k>=</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-2><span class=pl-en>nextMdx</span></span>({
  <span class=pl-c>// By default only the `.mdx` extension is supported.</span>
  <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-3>extension</span><span class=pl-k>:</span> <span class=pl-k>/</span>\.<span class=pl-smi>mdx</span><span class=pl-k>?</span>$<span class=pl-k>/</span>,
  <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-4>options</span><span class=pl-k>:</span> {<span class=pl-c>/* otherOptions… */</span>}
})

<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-5><span class=pl-c1>nextConfig</span></span> <span class=pl-k>=</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-6><span class=pl-en>withMdx</span></span>({
  <span class=pl-c>// Support MDX files as pages:</span>
  <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-7>pageExtensions</span><span class=pl-k>:</span> [<span class=pl-s><span class=pl-pds>'</span>md<span class=pl-pds>'</span></span>, <span class=pl-s><span class=pl-pds>'</span>mdx<span class=pl-pds>'</span></span>, <span class=pl-s><span class=pl-pds>'</span>tsx<span class=pl-pds>'</span></span>, <span class=pl-s><span class=pl-pds>'</span>ts<span class=pl-pds>'</span></span>, <span class=pl-s><span class=pl-pds>'</span>jsx<span class=pl-pds>'</span></span>, <span class=pl-s><span class=pl-pds>'</span>js<span class=pl-pds>'</span></span>],
})

<span class=pl-k>export</span> <span class=pl-c1>default</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-infnjedn-8><span class=pl-smi>nextConfig</span></span>
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>nextMdx</span>(<span class=pl-v>options</span><span class=pl-k>?:</span> <span class=pl-en>nextMdx</span>.<span class=pl-en>NextMDXOptions</span>)<span class=pl-k>:</span> <span class=pl-en>WithMDX</span>
(<span class=pl-v>alias</span>) <span class=pl-en>namespace</span> <span class=pl-en>nextMdx</span>
<span class=pl-k>import</span> <span class=pl-smi>nextMdx</span></code></pre><div class=rehype-twoslash-popover-description><p>Use <a href=//github.com/mdx-js/mdx>MDX</a> with <a href=//github.com/vercel/next.js>Next.js</a></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>withMdx</span><span class=pl-k>:</span> <span class=pl-en>WithMDX</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>nextMdx</span>(<span class=pl-smi>options</span><span class=pl-k>?:</span> <span class=pl-smi>nextMdx</span>.<span class=pl-smi>NextMDXOptions</span>): <span class=pl-smi>WithMDX</span>
<span class=pl-k>import</span> <span class=pl-smi>nextMdx</span></code></pre><div class=rehype-twoslash-popover-description><p>Use <a href=//github.com/mdx-js/mdx>MDX</a> with <a href=//github.com/vercel/next.js>Next.js</a></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>nextMDX</span>.<span class=pl-smi>NextMDXOptions</span>.<span class=pl-smi>extension</span><span class=pl-k>?:</span> <span class=pl-smi>RuleSetConditionAbsolute</span></code></pre><div class=rehype-twoslash-popover-description><p>A webpack rule test to match files to treat as MDX.<ul><li><strong>@default</strong> /.mdx$/<li><strong>@example</strong> // Support both .md and .mdx files. /.mdx?$/</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>nextMDX</span>.<span class=pl-smi>NextMDXOptions</span>.<span class=pl-c1>options</span><span class=pl-k>?:</span> <span class=pl-smi>Options</span> <span class=pl-k>&amp</span> {
    <span class=pl-smi>remarkPlugins</span><span class=pl-k>?:</span> (<span class=pl-smi>string</span> <span class=pl-k>|</span> [<span class=pl-smi>name</span>: <span class=pl-smi>string</span>, <span class=pl-smi>options</span>: <span class=pl-smi>any</span>] <span class=pl-k>|</span> <span class=pl-smi>NonNullable</span><span class=pl-k>&lt;</span><span class=pl-smi>Options</span>[<span class=pl-s><span class=pl-pds>"</span>remarkPlugins<span class=pl-pds>"</span></span>]<span class=pl-k>></span>[<span class=pl-smi>number</span>])[] <span class=pl-k>|</span> <span class=pl-smi>Options</span>[<span class=pl-s><span class=pl-pds>"</span>remarkPlugins<span class=pl-pds>"</span></span>];
    <span class=pl-smi>rehypePlugins</span><span class=pl-k>?:</span> (<span class=pl-smi>string</span> <span class=pl-k>|</span> [<span class=pl-smi>name</span>: <span class=pl-smi>string</span>, <span class=pl-smi>options</span>: <span class=pl-smi>any</span>] <span class=pl-k>|</span> <span class=pl-smi>NonNullable</span><span class=pl-k>&lt;</span><span class=pl-smi>Options</span>[<span class=pl-s><span class=pl-pds>"</span>rehypePlugins<span class=pl-pds>"</span></span>]<span class=pl-k>></span>[<span class=pl-smi>number</span>])[] <span class=pl-k>|</span> <span class=pl-smi>Options</span>[<span class=pl-s><span class=pl-pds>"</span>rehypePlugins<span class=pl-pds>"</span></span>];
}</code></pre><div class=rehype-twoslash-popover-description><p>The options to pass to MDX.<ul><li><strong>@see</strong> <a href=/packages/mdx/#api>https://mdxjs.com/packages/mdx/#api</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>nextConfig</span><span class=pl-k>:</span> <span class=pl-en>NextConfig</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-en>withMdx</span><span class=pl-k>:</span> (<span class=pl-v>config</span><span class=pl-k>:</span> <span class=pl-en>NextConfig</span>) <span class=pl-k>=></span> <span class=pl-en>NextConfig</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-en>pageExtensions</span>: <span class=pl-smi>string</span>[]</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-infnjedn-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>nextConfig</span><span class=pl-k>:</span> <span class=pl-en>NextConfig</span></code></pre></div></div><button class=copy-button data-value="import nextMdx from &#39@next/mdx&#39

const withMdx = nextMdx({
  // By default only the &#96.mdx&#96 extension is supported.
  extension: /\.mdx?$/,
  options: {/* otherOptions… */}
})

const nextConfig = withMdx({
  // Support MDX files as pages:
  pageExtensions: [&#39md&#39, &#39mdx&#39, &#39tsx&#39, &#39ts&#39, &#39jsx&#39, &#39js&#39],
})

export default nextConfig
"></button></div></details><p><a href=//nextjs.org>Next.js</a> has its own MDX integration. Install and configure <a href=//github.com/vercel/next.js/tree/canary/packages/next-mdx><code>@next/mdx</code></a>.<p>Do not use <code>providerImportSource</code> and <code>@mdx-js/react</code> with Next to inject components. Add an <code>mdx-components.tsx</code> (in <code>src/</code> or <code>/</code>) file instead. See <a href=//nextjs.org/docs/pages/building-your-application/configuring/mdx>Configuring MDX on <code>nextjs.org</code></a> for more info.<h5 id=parcel><a href=#parcel class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Parcel</h5><p><a href=//parceljs.org>Parcel</a> has its own plugin to support MDX. See <a href=//parceljs.org/languages/mdx/><code>@parcel/transformer-mdx</code></a> on how to use MDX with Parcel.<div class="info note"><p><strong>Note</strong>: the official Parcel plugin is currently not maintained. For a maintained alternative, try <a href=//github.com/EasyWebApp/Parcel-transformer-MDX><code>parcel-transformer-mdx</code></a>.</div><h4 id=jsx-runtimes><a href=#jsx-runtimes class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>JSX runtimes</h4><h5 id=emotion><a href=#emotion class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Emotion</h5><details><summary>Expand example</summary><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">example.js</span></div><div class="highlight highlight-js"><pre><code class="language-js twoslash"><span class=pl-k>import</span> {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjeo-0><span class=pl-smi>compile</span></span>} <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>@mdx-js/mdx<span class=pl-pds>'</span></span>

<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjeo-1><span class=pl-c1>js</span></span> <span class=pl-k>=</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjeo-2><span class=pl-c1>String</span></span>(<span class=pl-k>await</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjeo-3><span class=pl-en>compile</span></span>(<span class=pl-s><span class=pl-pds>'</span># hi<span class=pl-pds>'</span></span>, {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjeo-4>jsxImportSource</span><span class=pl-k>:</span> <span class=pl-s><span class=pl-pds>'</span>@emotion/react<span class=pl-pds>'</span></span>, <span class=pl-c>/* otherOptions… */</span>}))
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjeo-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>compile</span>(<span class=pl-v>vfileCompatible</span><span class=pl-k>:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>Compatible</span>>, <span class=pl-v>compileOptions</span><span class=pl-k>?:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>CompileOptions</span>> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>)<span class=pl-k>:</span> <span class=pl-en>Promise</span>&lt;<span class=pl-en>VFile</span>>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjeo-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>js</span><span class=pl-k>:</span> <span class=pl-c1>string</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjeo-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>var</span> <span class=pl-smi>String</span><span class=pl-k>:</span> <span class=pl-en>StringConstructor</span>
(<span class=pl-v>value</span><span class=pl-k>?:</span> <span class=pl-c1>any</span>) <span class=pl-k>=></span> <span class=pl-smi>string</span></code></pre><div class=rehype-twoslash-popover-description><p>Allows manipulation and formatting of text strings and determination and location of substrings within strings.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjeo-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>compile</span>(<span class=pl-smi>vfileCompatible</span>: <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>Compatible</span><span class=pl-k>></span>, <span class=pl-smi>compileOptions</span><span class=pl-k>?:</span> <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>CompileOptions</span><span class=pl-k>></span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>): <span class=pl-c1>Promise</span><span class=pl-k>&lt;</span><span class=pl-smi>VFile</span><span class=pl-k>></span>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjeo-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>jsxImportSource</span><span class=pl-k>?:</span> <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>Place to import automatic JSX runtimes from (default: <code>'react'</code>); when in the <code>automatic</code> runtime, this is used to define an import for <code>Fragment</code>, <code>jsx</code>, <code>jsxDEV</code>, and <code>jsxs</code>.</div></div></div><button class=copy-button data-value="import {compile} from &#39@mdx-js/mdx&#39

const js = String(await compile(&#39# hi&#39, {jsxImportSource: &#39@emotion/react&#39, /* otherOptions… */}))
"></button></div></details><p><a href=//emotion.sh/docs/introduction>Emotion</a> is supported when <a href=/packages/mdx/#processoroptions><code>jsxImportSource</code> in <code>ProcessorOptions</code></a> is set to <code>'@emotion/react'</code>. You can optionally install and configure <a href=/packages/react/><code>@mdx-js/react</code></a> to support context based component passing.<p>See also <a href=#react>¶ React</a>, which is used in Emotion, and see <a href=#rollup>¶ Rollup</a> and <a href=#webpack>¶ webpack</a>, which you might be using, for more info.<h5 id=ink><a href=#ink class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Ink</h5><details><summary>Expand example</summary><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">example.mdx</span></div><pre><code class=language-mdx><span class=pl-mh># <span class=pl-en>Hi!</span></span>
</code></pre><button class=copy-button data-value="# Hi!
"></button></div><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">example.js</span></div><div class="highlight highlight-js"><pre><code class="language-js twoslash"><span class=pl-k>import</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-0><span class=pl-smi>React</span></span> <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>react<span class=pl-pds>'</span></span>
<span class=pl-k>import</span> {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-1><span class=pl-smi>Text</span></span>, <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-2><span class=pl-smi>render</span></span>} <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>ink<span class=pl-pds>'</span></span>
<span class=pl-k>import</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-3><span class=pl-smi>Content</span></span> <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>./example.mdx<span class=pl-pds>'</span></span> <span class=pl-c>// Assumes an integration is used to compile MDX -> JS.</span>

<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-4><span class=pl-en>render</span></span>(
  <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-5><span class=pl-smi>React</span></span>.<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-6><span class=pl-c1>createElement</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-7>Content</span>, {
    <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-8>components</span><span class=pl-k>:</span> {
      <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-9><span class=pl-en>h1</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-10><span class=pl-smi>properties</span></span>) {
        <span class=pl-k>return</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-11><span class=pl-smi>React</span></span>.<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-12><span class=pl-c1>createElement</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-13><span class=pl-c1>Text</span></span>, {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-14>bold</span><span class=pl-k>:</span> <span class=pl-c1>true</span>, <span class=pl-k>...</span><span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-15>properties</span>})
      },
      <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-16>p</span><span class=pl-k>:</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-ftittppT-17><span class=pl-c1>Text</span></span>
    }
  })
)
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>namespace</span> <span class=pl-en>React</span>
<span class=pl-k>import</span> <span class=pl-smi>React</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>Text</span>({ <span class=pl-v>color</span>, <span class=pl-v>backgroundColor</span>, <span class=pl-v>dimColor</span>, <span class=pl-v>bold</span>, <span class=pl-v>italic</span>, <span class=pl-v>underline</span>, <span class=pl-v>strikethrough</span>, <span class=pl-v>inverse</span>, <span class=pl-v>wrap</span>, <span class=pl-v>children</span>, <span class=pl-s><span class=pl-pds>"</span>aria-label<span class=pl-pds>"</span></span>: <span class=pl-v>ariaLabel</span>, <span class=pl-s><span class=pl-pds>"</span>aria-hidden<span class=pl-pds>"</span></span>: <span class=pl-v>ariaHidden</span>, }<span class=pl-k>:</span> <span class=pl-en>Props</span>)<span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>JSX</span>.<span class=pl-en>Element</span> <span class=pl-k>|</span> <span class=pl-c1>null</span>
<span class=pl-k>import</span> <span class=pl-smi>Text</span></code></pre><div class=rehype-twoslash-popover-description><p>This component can display text and change its style to make it bold, underlined, italic, or strikethrough.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>const</span> <span class=pl-en>render</span><span class=pl-k>:</span> (<span class=pl-v>node</span><span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>ReactNode</span>, <span class=pl-v>options</span><span class=pl-k>?:</span> <span class=pl-en>NodeJS</span>.<span class=pl-en>WriteStream</span> <span class=pl-k>|</span> <span class=pl-en>RenderOptions</span>) <span class=pl-k>=></span> <span class=pl-en>Instance</span>
<span class=pl-k>import</span> <span class=pl-smi>render</span></code></pre><div class=rehype-twoslash-popover-description><p>Mount a component and render the output.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>Content</span>(<span class=pl-v>props</span><span class=pl-k>:</span> <span class=pl-en>MDXProps</span>)<span class=pl-k>:</span> <span class=pl-en>Element</span>
<span class=pl-k>import</span> <span class=pl-smi>Content</span></code></pre><div class=rehype-twoslash-popover-description><p>An function component which renders the MDX content using JSX.<ul><li><strong>@param</strong> props This value is be available as the named variable <code>props</code> inside the MDX component.<li><strong>@returns</strong> A JSX element. The meaning of this may depend on the project configuration. I.e. it could be a React, Preact, or Vuex element.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>render</span>(<span class=pl-smi>node</span>: <span class=pl-smi>React</span>.<span class=pl-smi>ReactNode</span>, <span class=pl-smi>options</span><span class=pl-k>?:</span> <span class=pl-smi>NodeJS</span>.<span class=pl-smi>WriteStream</span> <span class=pl-k>|</span> <span class=pl-smi>RenderOptions</span>): <span class=pl-smi>Instance</span>
<span class=pl-k>import</span> <span class=pl-smi>render</span></code></pre><div class=rehype-twoslash-popover-description><p>Mount a component and render the output.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>namespace</span> <span class=pl-en>React</span>
<span class=pl-k>import</span> <span class=pl-smi>React</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>function</span> <span class=pl-en>createElement</span>&lt;<span class=pl-en>MDXProps</span>>(<span class=pl-v>type</span><span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>FunctionComponent</span>&lt;<span class=pl-en>MDXProps</span>>, <span class=pl-v>props</span><span class=pl-k>?:</span> (<span class=pl-en>React</span>.<span class=pl-en>Attributes</span> <span class=pl-k>&amp</span> <span class=pl-en>MDXProps</span>) <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>, <span class=pl-k>...</span><span class=pl-v>children</span><span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>ReactNode</span>[])<span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>FunctionComponentElement</span>&lt;<span class=pl-en>MDXProps</span>> (+<span class=pl-c1>6</span> <span class=pl-en>overloads</span>)</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>Content</span>(<span class=pl-v>props</span><span class=pl-k>:</span> <span class=pl-en>MDXProps</span>)<span class=pl-k>:</span> <span class=pl-en>Element</span>
<span class=pl-k>import</span> <span class=pl-smi>Content</span></code></pre><div class=rehype-twoslash-popover-description><p>An function component which renders the MDX content using JSX.<ul><li><strong>@param</strong> props This value is be available as the named variable <code>props</code> inside the MDX component.<li><strong>@returns</strong> A JSX element. The meaning of this may depend on the project configuration. I.e. it could be a React, Preact, or Vuex element.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>MDXProps</span>.<span class=pl-c1>components</span><span class=pl-k>?:</span> <span class=pl-smi>MDXComponents</span></code></pre><div class=rehype-twoslash-popover-description><p>This prop may be used to customize how certain components are rendered.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>method</span>) <span class=pl-en>h1</span>(<span class=pl-smi>properties</span>: <span class=pl-c1>JSX</span>.<span class=pl-smi>IntrinsicElements</span>): <span class=pl-smi>React</span>.<span class=pl-smi>FunctionComponentElement</span><span class=pl-k>&lt;</span><span class=pl-smi>Props</span><span class=pl-k>></span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>properties</span>: <span class=pl-c1>JSX</span>.<span class=pl-smi>IntrinsicElements</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>namespace</span> <span class=pl-en>React</span>
<span class=pl-k>import</span> <span class=pl-smi>React</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>function</span> <span class=pl-en>createElement</span>&lt;<span class=pl-en>Props</span>>(<span class=pl-v>type</span><span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>FunctionComponent</span>&lt;<span class=pl-en>Props</span>>, <span class=pl-v>props</span><span class=pl-k>?:</span> (<span class=pl-en>React</span>.<span class=pl-en>Attributes</span> <span class=pl-k>&amp</span> <span class=pl-en>Props</span>) <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>, <span class=pl-k>...</span><span class=pl-v>children</span><span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>ReactNode</span>[])<span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>FunctionComponentElement</span>&lt;<span class=pl-en>Props</span>> (+<span class=pl-c1>6</span> <span class=pl-en>overloads</span>)</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>Text</span>({ <span class=pl-v>color</span>, <span class=pl-v>backgroundColor</span>, <span class=pl-v>dimColor</span>, <span class=pl-v>bold</span>, <span class=pl-v>italic</span>, <span class=pl-v>underline</span>, <span class=pl-v>strikethrough</span>, <span class=pl-v>inverse</span>, <span class=pl-v>wrap</span>, <span class=pl-v>children</span>, <span class=pl-s><span class=pl-pds>"</span>aria-label<span class=pl-pds>"</span></span>: <span class=pl-v>ariaLabel</span>, <span class=pl-s><span class=pl-pds>"</span>aria-hidden<span class=pl-pds>"</span></span>: <span class=pl-v>ariaHidden</span>, }<span class=pl-k>:</span> <span class=pl-en>Props</span>)<span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>JSX</span>.<span class=pl-en>Element</span> <span class=pl-k>|</span> <span class=pl-c1>null</span>
<span class=pl-k>import</span> <span class=pl-smi>Text</span></code></pre><div class=rehype-twoslash-popover-description><p>This component can display text and change its style to make it bold, underlined, italic, or strikethrough.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>bold</span><span class=pl-k>?:</span> <span class=pl-smi>boolean</span></code></pre><div class=rehype-twoslash-popover-description><p>Make the text bold.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>parameter</span>) <span class=pl-en>properties</span>: <span class=pl-c1>JSX</span>.<span class=pl-smi>IntrinsicElements</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-en>p</span>: ({ <span class=pl-v>color</span>, <span class=pl-v>backgroundColor</span>, <span class=pl-v>dimColor</span>, <span class=pl-v>bold</span>, <span class=pl-v>italic</span>, <span class=pl-v>underline</span>, <span class=pl-v>strikethrough</span>, <span class=pl-v>inverse</span>, <span class=pl-v>wrap</span>, <span class=pl-v>children</span>, <span class=pl-s><span class=pl-pds>"</span>aria-label<span class=pl-pds>"</span></span>: <span class=pl-v>ariaLabel</span>, <span class=pl-s><span class=pl-pds>"</span>aria-hidden<span class=pl-pds>"</span></span>: <span class=pl-v>ariaHidden</span>, }<span class=pl-k>:</span> <span class=pl-en>Props</span>) <span class=pl-k>=></span> <span class=pl-smi>React</span>.<span class=pl-c1>JSX</span>.<span class=pl-smi>Element</span> <span class=pl-k>|</span> <span class=pl-c1>null</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftittppT-17 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>Text</span>({ <span class=pl-v>color</span>, <span class=pl-v>backgroundColor</span>, <span class=pl-v>dimColor</span>, <span class=pl-v>bold</span>, <span class=pl-v>italic</span>, <span class=pl-v>underline</span>, <span class=pl-v>strikethrough</span>, <span class=pl-v>inverse</span>, <span class=pl-v>wrap</span>, <span class=pl-v>children</span>, <span class=pl-s><span class=pl-pds>"</span>aria-label<span class=pl-pds>"</span></span>: <span class=pl-v>ariaLabel</span>, <span class=pl-s><span class=pl-pds>"</span>aria-hidden<span class=pl-pds>"</span></span>: <span class=pl-v>ariaHidden</span>, }<span class=pl-k>:</span> <span class=pl-en>Props</span>)<span class=pl-k>:</span> <span class=pl-en>React</span>.<span class=pl-en>JSX</span>.<span class=pl-en>Element</span> <span class=pl-k>|</span> <span class=pl-c1>null</span>
<span class=pl-k>import</span> <span class=pl-smi>Text</span></code></pre><div class=rehype-twoslash-popover-description><p>This component can display text and change its style to make it bold, underlined, italic, or strikethrough.</div></div></div><button class=copy-button data-value="// @filename: types.d.ts
import type {} from &#39mdx&#39
// @filename: example.js
// @errors: 2769 -- something with Ink/twoslash/react getting different versions of React?
// ---cut---
import React from &#39react&#39
import {Text, render} from &#39ink&#39
import Content from &#39./example.mdx&#39 // Assumes an integration is used to compile MDX -> JS.

render(
  React.createElement(Content, {
    components: {
      h1(properties) {
        return React.createElement(Text, {bold: true, ...properties})
      },
      p: Text
    }
  })
)
"></button></div><p>Can be used with:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-inactive frame-tab-item-language">Shell</span></div><pre><code class=language-sh>node --loader=@mdx-js/node-loader example.js
</code></pre><button class=copy-button data-value="node --loader=@mdx-js/node-loader example.js
"></button></div></details><p><a href=//github.com/vadimdemedes/ink>Ink</a> uses the React JSX runtime, so set that up. You will need to swap HTML elements out for Ink’s components. See <a href=/table-of-components/>§ Table of components</a> for what those are and Ink’s docs on what they can be replaced with.<p>See also <a href=#nodejs>¶ Node.js</a> and <a href=#react>¶ React</a> for more info.<h5 id=preact><a href=#preact class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Preact</h5><details><summary>Expand example</summary><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">example.js</span></div><div class="highlight highlight-js"><pre><code class="language-js twoslash"><span class=pl-k>import</span> {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjpo-0><span class=pl-smi>compile</span></span>} <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>@mdx-js/mdx<span class=pl-pds>'</span></span>

<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjpo-1><span class=pl-c1>js</span></span> <span class=pl-k>=</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjpo-2><span class=pl-c1>String</span></span>(<span class=pl-k>await</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjpo-3><span class=pl-en>compile</span></span>(<span class=pl-s><span class=pl-pds>'</span># hi<span class=pl-pds>'</span></span>, {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjpo-4>jsxImportSource</span><span class=pl-k>:</span> <span class=pl-s><span class=pl-pds>'</span>preact<span class=pl-pds>'</span></span>, <span class=pl-c>/* otherOptions… */</span>}))
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjpo-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>compile</span>(<span class=pl-v>vfileCompatible</span><span class=pl-k>:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>Compatible</span>>, <span class=pl-v>compileOptions</span><span class=pl-k>?:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>CompileOptions</span>> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>)<span class=pl-k>:</span> <span class=pl-en>Promise</span>&lt;<span class=pl-en>VFile</span>>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjpo-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>js</span><span class=pl-k>:</span> <span class=pl-c1>string</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjpo-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>var</span> <span class=pl-smi>String</span><span class=pl-k>:</span> <span class=pl-en>StringConstructor</span>
(<span class=pl-v>value</span><span class=pl-k>?:</span> <span class=pl-c1>any</span>) <span class=pl-k>=></span> <span class=pl-smi>string</span></code></pre><div class=rehype-twoslash-popover-description><p>Allows manipulation and formatting of text strings and determination and location of substrings within strings.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjpo-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>compile</span>(<span class=pl-smi>vfileCompatible</span>: <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>Compatible</span><span class=pl-k>></span>, <span class=pl-smi>compileOptions</span><span class=pl-k>?:</span> <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>CompileOptions</span><span class=pl-k>></span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>): <span class=pl-c1>Promise</span><span class=pl-k>&lt;</span><span class=pl-smi>VFile</span><span class=pl-k>></span>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjpo-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>jsxImportSource</span><span class=pl-k>?:</span> <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>Place to import automatic JSX runtimes from (default: <code>'react'</code>); when in the <code>automatic</code> runtime, this is used to define an import for <code>Fragment</code>, <code>jsx</code>, <code>jsxDEV</code>, and <code>jsxs</code>.</div></div></div><button class=copy-button data-value="import {compile} from &#39@mdx-js/mdx&#39

const js = String(await compile(&#39# hi&#39, {jsxImportSource: &#39preact&#39, /* otherOptions… */}))
"></button></div></details><p>Preact is supported when <a href=/packages/mdx/#processoroptions><code>jsxImportSource</code> in <code>ProcessorOptions</code></a> is set to <code>'preact'</code>. You can optionally install and configure <a href=/packages/preact/><code>@mdx-js/preact</code></a> to support context based component passing.<p>See also <a href=#rollup>¶ Rollup</a>, <a href=#esbuild>¶ esbuild</a>, and <a href=#webpack>¶ webpack</a>, which you might be using, for more info.<h5 id=react><a href=#react class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>React</h5><p>React is supported by default. You can optionally install and configure <a href=/packages/react/><code>@mdx-js/react</code></a> to support context based component passing.<p>See also <a href=#rollup>¶ Rollup</a>, <a href=#esbuild>¶ esbuild</a>, and <a href=#webpack>¶ webpack</a>, which you might be using, for more info.<h5 id=theme-ui><a href=#theme-ui class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Theme UI</h5><p><a href=//theme-ui.com>Theme UI</a> has its own plugin to support MDX. See <a href=//theme-ui.com/mdx><code>@theme-ui/mdx</code></a> on how to use MDX with Theme UI.<h5 id=svelte><a href=#svelte class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Svelte</h5><details><summary>Expand example</summary><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">example.js</span></div><div class="highlight highlight-js"><pre><code class="language-js twoslash"><span class=pl-k>import</span> {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-0><span class=pl-smi>compile</span></span>} <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>@mdx-js/mdx<span class=pl-pds>'</span></span>

<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-1><span class=pl-c1>js</span></span> <span class=pl-k>=</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-2><span class=pl-c1>String</span></span>(<span class=pl-k>await</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-3><span class=pl-en>compile</span></span>(<span class=pl-s><span class=pl-pds>'</span># hi<span class=pl-pds>'</span></span>, {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-4>jsxImportSource</span><span class=pl-k>:</span> <span class=pl-s><span class=pl-pds>'</span>svelte-jsx<span class=pl-pds>'</span></span>, <span class=pl-c>/* otherOptions… */</span>}))
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>compile</span>(<span class=pl-v>vfileCompatible</span><span class=pl-k>:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>Compatible</span>>, <span class=pl-v>compileOptions</span><span class=pl-k>?:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>CompileOptions</span>> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>)<span class=pl-k>:</span> <span class=pl-en>Promise</span>&lt;<span class=pl-en>VFile</span>>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>js</span><span class=pl-k>:</span> <span class=pl-c1>string</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>var</span> <span class=pl-smi>String</span><span class=pl-k>:</span> <span class=pl-en>StringConstructor</span>
(<span class=pl-v>value</span><span class=pl-k>?:</span> <span class=pl-c1>any</span>) <span class=pl-k>=></span> <span class=pl-smi>string</span></code></pre><div class=rehype-twoslash-popover-description><p>Allows manipulation and formatting of text strings and determination and location of substrings within strings.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>compile</span>(<span class=pl-smi>vfileCompatible</span>: <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>Compatible</span><span class=pl-k>></span>, <span class=pl-smi>compileOptions</span><span class=pl-k>?:</span> <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>CompileOptions</span><span class=pl-k>></span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>): <span class=pl-c1>Promise</span><span class=pl-k>&lt;</span><span class=pl-smi>VFile</span><span class=pl-k>></span>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>jsxImportSource</span><span class=pl-k>?:</span> <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>Place to import automatic JSX runtimes from (default: <code>'react'</code>); when in the <code>automatic</code> runtime, this is used to define an import for <code>Fragment</code>, <code>jsx</code>, <code>jsxDEV</code>, and <code>jsxs</code>.</div></div></div><button class=copy-button data-value="import {compile} from &#39@mdx-js/mdx&#39

const js = String(await compile(&#39# hi&#39, {jsxImportSource: &#39svelte-jsx&#39, /* otherOptions… */}))
"></button></div></details><p>Svelte is supported when <a href=/packages/mdx/#processoroptions><code>jsxImportSource</code> in <code>ProcessorOptions</code></a> is set to <a href=//github.com/kenoxa/svelte-jsx><code>'svelte-jsx'</code></a>.<p>See also <a href=#rollup>¶ Rollup</a>, <a href=#esbuild>¶ esbuild</a>, and <a href=#webpack>¶ webpack</a>, which you might be using, for more info.<h5 id=vue><a href=#vue class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Vue</h5><details><summary>Expand example</summary><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">example.js</span></div><div class="highlight highlight-js"><pre><code class="language-js twoslash"><span class=pl-k>import</span> {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjvo-0><span class=pl-smi>compile</span></span>} <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>@mdx-js/mdx<span class=pl-pds>'</span></span>

<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjvo-1><span class=pl-c1>js</span></span> <span class=pl-k>=</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjvo-2><span class=pl-c1>String</span></span>(<span class=pl-k>await</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjvo-3><span class=pl-en>compile</span></span>(<span class=pl-s><span class=pl-pds>'</span># hi<span class=pl-pds>'</span></span>, {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjvo-4>jsxImportSource</span><span class=pl-k>:</span> <span class=pl-s><span class=pl-pds>'</span>vue<span class=pl-pds>'</span></span>, <span class=pl-c>/* otherOptions… */</span>}))
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjvo-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>compile</span>(<span class=pl-v>vfileCompatible</span><span class=pl-k>:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>Compatible</span>>, <span class=pl-v>compileOptions</span><span class=pl-k>?:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>CompileOptions</span>> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>)<span class=pl-k>:</span> <span class=pl-en>Promise</span>&lt;<span class=pl-en>VFile</span>>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjvo-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>js</span><span class=pl-k>:</span> <span class=pl-c1>string</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjvo-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>var</span> <span class=pl-smi>String</span><span class=pl-k>:</span> <span class=pl-en>StringConstructor</span>
(<span class=pl-v>value</span><span class=pl-k>?:</span> <span class=pl-c1>any</span>) <span class=pl-k>=></span> <span class=pl-smi>string</span></code></pre><div class=rehype-twoslash-popover-description><p>Allows manipulation and formatting of text strings and determination and location of substrings within strings.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjvo-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>compile</span>(<span class=pl-smi>vfileCompatible</span>: <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>Compatible</span><span class=pl-k>></span>, <span class=pl-smi>compileOptions</span><span class=pl-k>?:</span> <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>CompileOptions</span><span class=pl-k>></span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>): <span class=pl-c1>Promise</span><span class=pl-k>&lt;</span><span class=pl-smi>VFile</span><span class=pl-k>></span>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjvo-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>jsxImportSource</span><span class=pl-k>?:</span> <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>Place to import automatic JSX runtimes from (default: <code>'react'</code>); when in the <code>automatic</code> runtime, this is used to define an import for <code>Fragment</code>, <code>jsx</code>, <code>jsxDEV</code>, and <code>jsxs</code>.</div></div></div><button class=copy-button data-value="import {compile} from &#39@mdx-js/mdx&#39

const js = String(await compile(&#39# hi&#39, {jsxImportSource: &#39vue&#39, /* otherOptions… */}))
"></button></div></details><p>Vue is supported when <a href=/packages/mdx/#processoroptions><code>jsxImportSource</code> in <code>ProcessorOptions</code></a> is set to <code>'vue'</code>. You can optionally install and configure <a href=/packages/vue/><code>@mdx-js/vue</code></a> to support context based component passing.<p>See also <a href=#vite>¶ Vite</a>, which you might be using, for more info.<h5 id=solid><a href=#solid class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Solid</h5><details><summary>Expand example</summary><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">example.js</span></div><div class="highlight highlight-js"><pre><code class="language-js twoslash"><span class=pl-k>import</span> {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-1-0><span class=pl-smi>compile</span></span>} <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>@mdx-js/mdx<span class=pl-pds>'</span></span>

<span class=pl-k>const</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-1-1><span class=pl-c1>js</span></span> <span class=pl-k>=</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-1-2><span class=pl-c1>String</span></span>(<span class=pl-k>await</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-1-3><span class=pl-en>compile</span></span>(<span class=pl-s><span class=pl-pds>'</span># hi<span class=pl-pds>'</span></span>, {<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-icfmhjso-1-4>jsxImportSource</span><span class=pl-k>:</span> <span class=pl-s><span class=pl-pds>'</span>solid-js/h<span class=pl-pds>'</span></span>, <span class=pl-c>/* otherOptions… */</span>}))
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-1-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>compile</span>(<span class=pl-v>vfileCompatible</span><span class=pl-k>:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>Compatible</span>>, <span class=pl-v>compileOptions</span><span class=pl-k>?:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>CompileOptions</span>> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>)<span class=pl-k>:</span> <span class=pl-en>Promise</span>&lt;<span class=pl-en>VFile</span>>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-1-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>const</span> <span class=pl-c1>js</span><span class=pl-k>:</span> <span class=pl-c1>string</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-1-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts><span class=pl-k>var</span> <span class=pl-smi>String</span><span class=pl-k>:</span> <span class=pl-en>StringConstructor</span>
(<span class=pl-v>value</span><span class=pl-k>?:</span> <span class=pl-c1>any</span>) <span class=pl-k>=></span> <span class=pl-smi>string</span></code></pre><div class=rehype-twoslash-popover-description><p>Allows manipulation and formatting of text strings and determination and location of substrings within strings.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-1-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>compile</span>(<span class=pl-smi>vfileCompatible</span>: <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>Compatible</span><span class=pl-k>></span>, <span class=pl-smi>compileOptions</span><span class=pl-k>?:</span> <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>CompileOptions</span><span class=pl-k>></span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>): <span class=pl-c1>Promise</span><span class=pl-k>&lt;</span><span class=pl-smi>VFile</span><span class=pl-k>></span>
<span class=pl-k>import</span> <span class=pl-smi>compile</span></code></pre><div class=rehype-twoslash-popover-description><p>Compile MDX to JS.<ul><li><strong>@param</strong> vfileCompatible MDX document to parse.<li><strong>@param</strong> compileOptions Compile configuration (optional).<li><strong>@return</strong> Promise to compiled file.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-icfmhjso-1-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>property</span>) <span class=pl-smi>jsxImportSource</span><span class=pl-k>?:</span> <span class=pl-smi>string</span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span></code></pre><div class=rehype-twoslash-popover-description><p>Place to import automatic JSX runtimes from (default: <code>'react'</code>); when in the <code>automatic</code> runtime, this is used to define an import for <code>Fragment</code>, <code>jsx</code>, <code>jsxDEV</code>, and <code>jsxs</code>.</div></div></div><button class=copy-button data-value="import {compile} from &#39@mdx-js/mdx&#39

const js = String(await compile(&#39# hi&#39, {jsxImportSource: &#39solid-js/h&#39, /* otherOptions… */}))
"></button></div></details><p>Solid is supported when <a href=/packages/mdx/#processoroptions><code>jsxImportSource</code> in <code>ProcessorOptions</code></a> is set to <code>'solid-js/h'</code>.<p>See also <a href=#rollup>¶ Rollup</a> and <a href=#vite>¶ Vite</a>, which you might be using, for more info.<h4 id=javascript-engines><a href=#javascript-engines class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>JavaScript engines</h4><h5 id=nodejs><a href=#nodejs class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Node.js</h5><p>MDX files can be imported in Node by using <a href=/packages/node-loader/><code>@mdx-js/node-loader</code></a>. See its readme on how to configure it.<h5 id=bun><a href=#bun class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Bun</h5><p>MDX files can be imported in <a href=//bun.sh>Bun</a> by using <a href=/packages/esbuild/><code>@mdx-js/esbuild</code></a>.<details><summary>Expand example</summary><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">bunfig.toml</span></div><pre><code class=language-toml><span class=pl-smi>preload</span> = [<span class=pl-s><span class=pl-pds>"</span>./bun-mdx.ts<span class=pl-pds>"</span></span>]
</code></pre><button class=copy-button data-value='preload = [&#34./bun-mdx.ts&#34]
'></button></div><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll"><span class="frame-tab-item frame-tab-item-selected">bun-mdx.ts</span></div><div class="highlight highlight-ts"><pre><code class="language-ts twoslash"><span class=pl-k>import</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtciauaB-0><span class=pl-smi>mdx</span></span> <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>@mdx-js/esbuild<span class=pl-pds>'</span></span>
<span class=pl-k>import</span> {<span class=pl-k>type</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtciauaB-1><span class=pl-smi>BunPlugin</span></span>, <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtciauaB-2><span class=pl-smi>plugin</span></span>} <span class=pl-k>from</span> <span class=pl-s><span class=pl-pds>'</span>bun<span class=pl-pds>'</span></span>

<span class=pl-k>await</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtciauaB-3><span class=pl-en>plugin</span></span>(<span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtciauaB-4><span class=pl-en>mdx</span></span>() <span class=pl-k>as</span> <span class=pl-c1>unknown</span> <span class=pl-k>as</span> <span class=rehype-twoslash-popover-target data-popover-target=rehype-twoslash-rtciauaB-5><span class=pl-en>BunPlugin</span></span>)
</code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtciauaB-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>function</span> <span class=pl-en>mdx</span>(<span class=pl-v>options</span><span class=pl-k>?:</span> <span class=pl-en>Readonly</span>&lt;<span class=pl-en>Options</span>> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>)<span class=pl-k>:</span> <span class=pl-en>Plugin</span>
<span class=pl-k>import</span> <span class=pl-smi>mdx</span></code></pre><div class=rehype-twoslash-popover-description><p>Create an esbuild plugin to compile MDX to JS.<p>esbuild takes care of turning modern JavaScript features into syntax that works wherever you want it to. With other integrations you might need to use Babel for this, but with esbuild that’s not needed. See esbuild’s docs for more info.<ul><li><strong>@param</strong> options Configuration (optional).<li><strong>@return</strong> Plugin.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtciauaB-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>interface</span> <span class=pl-en>BunPlugin</span>
<span class=pl-en>import</span> <span class=pl-en>BunPlugin</span></code></pre><div class=rehype-twoslash-popover-description><p>A Bun plugin. Used for extending Bun's behavior at runtime, or with {@link Bun.build }<ul><li><strong>@category</strong> Bundler</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtciauaB-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>const</span> <span class=pl-c1>plugin</span><span class=pl-k>:</span> <span class=pl-en>Bun</span>.<span class=pl-en>BunRegisterPlugin</span>
<span class=pl-k>import</span> <span class=pl-smi>plugin</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtciauaB-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>plugin</span>&lt;<span class=pl-en>BunPlugin</span>>(<span class=pl-smi>options</span>: <span class=pl-smi>BunPlugin</span>): <span class=pl-k>void</span> <span class=pl-k>|</span> <span class=pl-c1>Promise</span><span class=pl-k>&#60void></span>
<span class=pl-k>import</span> <span class=pl-smi>plugin</span></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtciauaB-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-en>mdx</span>(<span class=pl-smi>options</span><span class=pl-k>?:</span> <span class=pl-smi>Readonly</span><span class=pl-k>&lt;</span><span class=pl-smi>Options</span><span class=pl-k>></span> <span class=pl-k>|</span> <span class=pl-c1>null</span> <span class=pl-k>|</span> <span class=pl-c1>undefined</span>): <span class=pl-c1>Plugin</span>
<span class=pl-k>import</span> <span class=pl-smi>mdx</span></code></pre><div class=rehype-twoslash-popover-description><p>Create an esbuild plugin to compile MDX to JS.<p>esbuild takes care of turning modern JavaScript features into syntax that works wherever you want it to. With other integrations you might need to use Babel for this, but with esbuild that’s not needed. See esbuild’s docs for more info.<ul><li><strong>@param</strong> options Configuration (optional).<li><strong>@return</strong> Plugin.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-rtciauaB-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(<span class=pl-smi>alias</span>) <span class=pl-k>interface</span> <span class=pl-en>BunPlugin</span>
<span class=pl-en>import</span> <span class=pl-en>BunPlugin</span></code></pre><div class=rehype-twoslash-popover-description><p>A Bun plugin. Used for extending Bun's behavior at runtime, or with {@link Bun.build }<ul><li><strong>@category</strong> Bundler</ul></div></div></div><button class=copy-button data-value="/// <reference types=&#34bun-types&#34 />
// ---cut---
import mdx from &#39@mdx-js/esbuild&#39
import {type BunPlugin, plugin} from &#39bun&#39

await plugin(mdx() as unknown as BunPlugin)
"></button></div></details><h3 id=further-reading><a href=#further-reading class=anchor aria-label="Link to this section"><svg class=icon height=18 viewBox="0 0 16 16"width=18 aria-hidden=true><path d="M7.775 3.275C7.64252 3.41717 7.57039 3.60522 7.57382 3.79952C7.57725 3.99382 7.65596 4.1792 7.79337 4.31662C7.93079 4.45403 8.11617 4.53274 8.31047 4.53617C8.50477 4.5396 8.69282 4.46748 8.835 4.335L10.085 3.085C10.2708 2.89918 10.4914 2.75177 10.7342 2.65121C10.977 2.55064 11.2372 2.49888 11.5 2.49888C11.7628 2.49888 12.023 2.55064 12.2658 2.65121C12.5086 2.75177 12.7292 2.89918 12.915 3.085C13.1008 3.27082 13.2482 3.49142 13.3488 3.7342C13.4493 3.97699 13.5011 4.23721 13.5011 4.5C13.5011 4.76279 13.4493 5.023 13.3488 5.26579C13.2482 5.50857 13.1008 5.72917 12.915 5.915L10.415 8.415C10.2292 8.60095 10.0087 8.74847 9.76588 8.84911C9.52308 8.94976 9.26283 9.00157 9 9.00157C8.73716 9.00157 8.47691 8.94976 8.23411 8.84911C7.99132 8.74847 7.77074 8.60095 7.585 8.415C7.44282 8.28252 7.25477 8.21039 7.06047 8.21382C6.86617 8.21725 6.68079 8.29596 6.54337 8.43337C6.40596 8.57079 6.32725 8.75617 6.32382 8.95047C6.32039 9.14477 6.39252 9.33282 6.525 9.475C6.85001 9.80004 7.23586 10.0579 7.66052 10.2338C8.08518 10.4097 8.54034 10.5002 9 10.5002C9.45965 10.5002 9.91481 10.4097 10.3395 10.2338C10.7641 10.0579 11.15 9.80004 11.475 9.475L13.975 6.975C14.6314 6.31858 15.0002 5.4283 15.0002 4.5C15.0002 3.57169 14.6314 2.68141 13.975 2.025C13.3186 1.36858 12.4283 0.999817 11.5 0.999817C10.5717 0.999817 9.68141 1.36858 9.02499 2.025L7.775 3.275ZM3.085 12.915C2.89904 12.7292 2.75152 12.5087 2.65088 12.2659C2.55023 12.0231 2.49842 11.7628 2.49842 11.5C2.49842 11.2372 2.55023 10.9769 2.65088 10.7341C2.75152 10.4913 2.89904 10.2707 3.085 10.085L5.585 7.585C5.77074 7.39904 5.99132 7.25152 6.23411 7.15088C6.47691 7.05023 6.73716 6.99842 7 6.99842C7.26283 6.99842 7.52308 7.05023 7.76588 7.15088C8.00867 7.25152 8.22925 7.39904 8.415 7.585C8.55717 7.71748 8.74522 7.7896 8.93952 7.78617C9.13382 7.78274 9.3192 7.70403 9.45662 7.56662C9.59403 7.4292 9.67274 7.24382 9.67617 7.04952C9.6796 6.85522 9.60748 6.66717 9.475 6.525C9.14999 6.19995 8.76413 5.94211 8.33947 5.7662C7.91481 5.59029 7.45965 5.49974 7 5.49974C6.54034 5.49974 6.08518 5.59029 5.66052 5.7662C5.23586 5.94211 4.85001 6.19995 4.525 6.525L2.025 9.02499C1.36858 9.68141 0.999817 10.5717 0.999817 11.5C0.999817 12.4283 1.36858 13.3186 2.025 13.975C2.68141 14.6314 3.57169 15.0002 4.5 15.0002C5.4283 15.0002 6.31858 14.6314 6.975 13.975L8.225 12.725C8.35748 12.5828 8.4296 12.3948 8.42617 12.2005C8.42274 12.0062 8.34403 11.8208 8.20662 11.6834C8.0692 11.546 7.88382 11.4672 7.68952 11.4638C7.49522 11.4604 7.30717 11.5325 7.165 11.665L5.915 12.915C5.72925 13.1009 5.50867 13.2485 5.26588 13.3491C5.02308 13.4498 4.76283 13.5016 4.5 13.5016C4.23716 13.5016 3.97691 13.4498 3.73411 13.3491C3.49132 13.2485 3.27074 13.1009 3.085 12.915Z"fill=currentcolor /></svg></a>Further reading</h3><ul><li>If you want to use MDX content in your project, see <a href=../using-mdx/>§ Using MDX</a><li>If you’re getting errors integrating MDX, see <a href=../troubleshooting-mdx/>§ Troubleshooting MDX</a> or <a href=/community/support/>§ Support</a></ul></div><footer class=content><div class="block foot-article"><div class="block article-row"><div class=article-row-start><div>Previous:<br><a href=../what-is-mdx/ rel=prev>What is MDX?</a></div></div><div class=article-row-end><div>Next:<br><a href=../using-mdx/ rel=next>Using MDX</a></div></div></div><div class="block article-row"><div class=article-row-start><div>Found a typo? Other suggestions?<br><a href=//github.com/mdx-js/mdx/blob/main/docs/docs/getting-started.mdx>Edit this page on GitHub</a></div></div><div class=article-row-end><div>Published on <time datetime=2021-10-05T00:00:00.000Z>October 5, 2021</time><br>Modified on <time datetime=2025-01-27T00:00:00.000Z>January 27, 2025</time></div></div></div></div></footer></article><footer class=foot-site><div class=content><div class=block style=display:flex;justify-content:space-between><div><small>MDX is made with ❤️ in Amsterdam, Boise, and around the 🌏</small><br><small>This site does not track you.</small><br><small>MIT © 2017-2026</small></div><div style=margin-left:auto;text-align:right><small>Project on <a href=//github.com/mdx-js/mdx/>GitHub</a></small><br><small>Site on <a href=//github.com/mdx-js/mdx/tree/main/docs/>GitHub</a></small><br><small>Updates as <a href=/rss.xml>RSS feed</a></small><br><small>Sponsor on <a href=//opencollective.com/unified>OpenCollective</a></small></div></div></div></footer></main><nav aria-label="Site navigation"class=navigation><div id=banner>Ceasefire now! 🕊️</div><a href=#start-of-content class=skip-to-content id=start-of-navigation>Skip to content</a><div class=navigation-primary><a href=/><h1><svg class="icon icon-mdx"height=28.5 viewBox="0 0 138 57"width=69 aria-label=MDX role=img><title>MDX</title><g><rect fill=currentColor height=55.5 rx=4.5 width=136.5 x=.75 y=.75 /><g fill=none stroke=var(--bg) stroke-width=6><path d="M16.5 44V19L30.25 32.75l14-14v25"/><path d="M70.5 40V10.75"/><path d="M57 27.25L70.5 40.75l13.5-13.5"/><path d="M122.5 41.24L93.25 12M93.5 41.25L122.75 12"/></g></g></svg></h1></a></div><div class=navigation-search><div id=docsearch></div></div><ol class=navigation-secondary><li><a href=../>Docs</a><ol><li><a href=../what-is-mdx/>What is MDX?</a><li><a href aria-current=page>Getting started</a><li><a href=../using-mdx/>Using MDX</a><li><a href=../extending-mdx/>Extending MDX</a><li><a href=../troubleshooting-mdx/>Troubleshooting MDX</a></ol><li><a href=/guides/>Guides</a><ol><li><a href=/guides/gfm/>GitHub flavored markdown (GFM)</a><li><a href=/guides/frontmatter/>Frontmatter</a><li><a href=/guides/math/>Math</a><li><a href=/guides/syntax-highlighting/>Syntax highlighting</a><li><a href=/guides/embed/>Embed</a><li><a href=/guides/mdx-on-demand/>MDX on demand</a><li><a href=/guides/injecting-components/>Injecting components</a></ol><li><a href=/packages/>Packages</a><ol><li><a href=/packages/esbuild/>@mdx-js/esbuild</a><li><a href=/packages/loader/>@mdx-js/loader</a><li><a href=/packages/mdx/>@mdx-js/mdx</a><li><a href=/packages/node-loader/>@mdx-js/node-loader</a><li><a href=/packages/preact/>@mdx-js/preact</a><li><a href=/packages/react/>@mdx-js/react</a><li><a href=/packages/rollup/>@mdx-js/rollup</a><li><a href=/packages/vue/>@mdx-js/vue</a><li><a href=/packages/remark-mdx/>remark-mdx</a></ol><li><a href=/table-of-components/>Components</a><li><a href=/playground/>Playground</a><li><a href=/community/>Community</a><ol><li><a href=/community/support/>Support</a><li><a href=/community/contribute/>Contribute</a><li><a href=/community/sponsor/>Sponsor</a><li><a href=/community/about/>About</a><li><a href=/community/projects/>Projects</a></ol><li><a href=/blog/>Blog</a></ol><ol class=navigation-tertiary><li><a href=//github.com/mdx-js/mdx/><svg class="icon icon-github"height=18 viewBox="0 0 16 16"width=18 aria-label=GitHub role=img><title>GitHub</title><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"fill=currentcolor clip-rule=evenodd fill-rule=evenodd /></svg></a><li class=navigation-show-big><a href=//opencollective.com/unified><svg class="icon icon-opencollective"height=18 viewBox="0 0 40 40"width=18 aria-label=OpenCollective role=img><title>OpenCollective</title><path d="M32.779 19.921a13.09 13.09 0 01-1.989 6.938l5.13 5.151c2.512-3.364 4.082-7.569 4.082-12.089 0-4.52-1.57-8.725-4.083-12.09l-5.129 5.152c1.256 1.997 1.989 4.31 1.989 6.938z"fill=currentcolor /><path d="M20.014 32.746c-7.014 0-12.771-5.782-12.771-12.825 0-7.043 5.757-12.825 12.77-12.825 2.618 0 4.92.736 6.91 2.102l5.129-5.15c-3.35-2.524-7.537-4.1-12.038-4.1C9.022-.053.02 8.882.02 20.025.02 31.17 9.022 40 20.014 40c4.605 0 8.793-1.577 12.142-4.1l-5.129-5.151c-1.989 1.261-4.396 1.997-7.013 1.997z"fill=currentcolor /></svg></a></ol></nav></div><script src=/index.js></script><script src=/editor.js></script>

Getting started

Contents

Prerequisites

Quick start

Bundler

JSX

Editor

Types

Security

Integrations

Bundlers

esbuild

Rollup

Webpack

Build systems

Vite

Linters

ESLint

mdxlint

Compilers

Babel