MDXRenderer

Compiles and renders a string of MDX content.

Security

Always sanitize user-provided content before passing it to MDXRenderer. This includes sanitizing value, components, and dependencies.

Failing to do so puts you at risk of a cross-site scripting (XSS) attack. See the MDX security documentation for more information.

import { MDXRenderer } from 'renoun/components'

export function Basic() {
  return <MDXRenderer># Hello World</MDXRenderer>
}

({ children, components, dependencies, remarkPlugins, rehypePlugins, baseUrl, }: MDXRendererProps) => Promise<React.JSX.Element>

Compiles and renders a string of MDX content.

MDXRendererProps

Promise<Element>

MDXRendererProps

string

The MDX content to render.

MDXComponents | undefined

Additional components to use or a function that creates them.

Record<string, any> | undefined

An object of external dependencies that will be available to the MDX source code.

PluggableList | null | undefined

Remark plugins to use. See PluggableList for more info.

PluggableList | null | undefined

Rehype plugins to use. See PluggableList for more info.

string | undefined

Base URL to resolve imports and named exports from (e.g. import.meta.url)

Last updated 03/12/25