MDX

Compiles and renders a string of MDX content. Note, a set of default remarkPlugins and rehypePlugins options are only used if both are not provided.

import { MDX } from 'renoun'

export function Basic() {
  return <MDX>{`# Hello World\n\n<p>React in Markdown</p>`}</MDX>
}

Security

This component evaluates JavaScript. Always sanitize user-provided content before passing it to the MDX component. 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.

Prefer the Markdown component if possible for rendering untrusted content as it does not evaluate JavaScript and is therefore safe by default.