CINXE.COM

<!doctypehtml><html lang=en><meta charset=utf8><title>Using MDX | MDX</title><meta content="width=device-width,initial-scale=1"name=viewport><meta content=mdx name=generator><link href=/rss.xml rel=alternate type=application/rss+xml title=mdxjs.com><link href=/favicon.ico rel=icon sizes=any><link href=/icon.svg rel=icon type=image/svg+xml><link href=/index.css rel=stylesheet><link href=//esm.sh/@docsearch/css@3/dist/style.css rel=stylesheet><link href=https://mdxjs.com/docs/using-mdx/ rel=canonical><meta content="This article explains how to use MDX files in your project. It shows how you can pass props and how to import, define, or pass components."name=description><meta content=mdx,markdown,jsx,oss,react name=keywords><meta content="Titus Wormer"name=author><meta content="© 2021 Titus Wormer"name=copyright><meta content=#010409 name=theme-color><meta content=article property=og:type><meta content=MDX property=og:site_name><meta content=https://mdxjs.com/docs/using-mdx/ property=og:url><meta content="Using MDX | MDX"property=og:title><meta content="This article explains how to use MDX files in your project. It shows how you can pass props and how to import, define, or pass components."property=og:description><meta content=https://mdxjs.com/docs/using-mdx/index.png property=og:image><meta content=2400 property=og:image:width><meta content=1256 property=og:image:height><meta content=2021-09-30T00:00:00.000Z property=article:published_time><meta content=2024-10-18T00:00:00.000Z property=article:modified_time><meta content=summary_large_image name=twitter:card><meta content=https://mdxjs.com/docs/using-mdx/index.png name=twitter:image><meta content=@mdx_js name=twitter:site><meta content=@wooorm name=twitter:creator><meta content="Reading time"name=twitter:label1><meta content="8-13 minutes"name=twitter:data1><link href=//esm.sh/@wooorm/starry-night@3/style/both.css rel=preload as=style onload='this.onload=void 0,this.rel=&#34stylesheet"'><noscript><link href=//esm.sh/@wooorm/starry-night@3/style/both.css rel=stylesheet></noscript><div class="doc page"><a href=#start-of-navigation class=skip-to-navigation id=start-of-content>Skip to navigation</a><main><article><header class=content><div class="block head-article"><div class="block article-row"><div class=article-row-start><div><a href=../>Docs</a> / <a href aria-current=page>Using MDX</a></div></div><div class=article-row-end>8-13 minutes read By <a href=//github.com/wooorm>Titus Wormer</a></div></div></div></header><div class="content body"><h2 id=using-mdx><a href=#using-mdx 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>Using MDX</h2>This article explains how to use MDX files in your project. It shows how you can pass props and how to import, define, or pass components. See <a href=../getting-started/>§ Getting started</a> for how to integrate MDX into your project. To understand how the MDX format works, we recommend that you start with <a href=../what-is-mdx/>§ What is MDX</a>.<h3 id=contents><a href=#contents 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>Contents</h3><ul><li><a href=#how-mdx-works>How MDX works</a><li><a href=#mdx-content>MDX content</a><ul><li><a href=#props>Props</a><li><a href=#components>Components</a><li><a href=#layout>Layout</a></ul><li><a href=#mdx-provider>MDX provider</a></ul><h3 id=how-mdx-works><a href=#how-mdx-works 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>How MDX works</h3>An integration compiles MDX syntax to JavaScript. Say we have an MDX document, <code>example.mdx</code>:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">input.mdx</div><pre><code class=language-mdx>export function Thing() { return &#60>World&#60/> } # Hello <Thing /> </code></pre><button class=copy-button data-value="export function Thing() { return <>World</> } # Hello <Thing /> "></button></div>That’s roughly turned into the following JavaScript. The below might help to form a mental model:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">output-outline.jsx</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">/* @jsxRuntime automatic */ /* @jsxImportSource react */ export function Thing() { return &#60>World&#60/> } export default function MDXContent() { return <h1>Hello <Thing />&#60/h1> } </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-jajrrhTh-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function Thing(): JSX.Element</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-jajrrhTh-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function MDXContent(): JSX.Element</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-jajrrhTh-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-jajrrhTh-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function Thing(): JSX.Element</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-jajrrhTh-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement></code></pre></div></div><button class=copy-button data-value="/* @jsxRuntime automatic */ /* @jsxImportSource react */ export function Thing() { return <>World</> } export default function MDXContent() { return <h1>Hello <Thing /></h1> } "></button></div>Some observations:<ul><li>The output is serialized JavaScript that still needs to be evaluated<li>A comment is injected to configure how JSX is handled<li>It’s a complete file with import/exports<li>A component (<code>MDXContent</code>) is exported</ul>The actual output is:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">output-actual.js</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime' export function Thing() { return _jsx(_Fragment, {children: 'World'}) } function _createMdxContent(props) { const _components = {h1: 'h1', ...props.components} return _jsxs(_components.h1, {children: ['Hello ', _jsx(Thing, {})]}) } export default function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || {} return MDXLayout ? _jsx(MDXLayout, {...props, children: _jsx(_createMdxContent, {...props})}) : _createMdxContent(props) } </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Fragment: React.ExoticComponent&#60{ children?: React.ReactNode | undefined; }> export Fragment</code></pre><div class=rehype-twoslash-popover-description>Lets you group elements without a wrapper node.<ul><li>@see {@link <a href=//react.dev/reference/react/Fragment>https://react.dev/reference/react/Fragment</a> React Docs}<li>@example<pre><code class=language-tsx>import { Fragment } from 'react'; <Fragment> <td>Hello&#60/td> <td>World&#60/td> &#60/Fragment> </code></pre><li>@example<pre><code class=language-tsx>// Using the &#60>&#60/> shorthand syntax: &#60> <td>Hello&#60/td> <td>World&#60/td> &#60/> </code></pre></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const _Fragment: React.ExoticComponent&#60{ children?: React.ReactNode | undefined; }> import _Fragment</code></pre><div class=rehype-twoslash-popover-description>Lets you group elements without a wrapper node.<ul><li>@see {@link <a href=//react.dev/reference/react/Fragment>https://react.dev/reference/react/Fragment</a> React Docs}<li>@example<pre><code class=language-tsx>import { Fragment } from 'react'; <Fragment> <td>Hello&#60/td> <td>World&#60/td> &#60/Fragment> </code></pre><li>@example<pre><code class=language-tsx>// Using the &#60>&#60/> shorthand syntax: &#60> <td>Hello&#60/td> <td>World&#60/td> &#60/> </code></pre></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function jsx(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function _jsx(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement import _jsx</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function jsxs(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function _jsxs(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement import _jsxs</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function Thing(): React.ReactElement<any, string | React.JSXElementConstructor<any>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) _jsx(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement import _jsx</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const _Fragment: React.ExoticComponent&#60{ children?: React.ReactNode | undefined; }> import _Fragment</code></pre><div class=rehype-twoslash-popover-description>Lets you group elements without a wrapper node.<ul><li>@see {@link <a href=//react.dev/reference/react/Fragment>https://react.dev/reference/react/Fragment</a> React Docs}<li>@example<pre><code class=language-tsx>import { Fragment } from 'react'; <Fragment> <td>Hello&#60/td> <td>World&#60/td> &#60/Fragment> </code></pre><li>@example<pre><code class=language-tsx>// Using the &#60>&#60/> shorthand syntax: &#60> <td>Hello&#60/td> <td>World&#60/td> &#60/> </code></pre></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) children: string</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function _createMdxContent(props: any): React.ReactElement<any, string | React.JSXElementConstructor<any>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const _components: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h1: string</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) _jsxs(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement import _jsxs</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-17 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const _components: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-18 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-19 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) children: (string | React.ReactElement<any, string | React.JSXElementConstructor<any>>)[]</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-20 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) _jsx(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement import _jsx</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-21 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function Thing(): React.ReactElement<any, string | React.JSXElementConstructor<any>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-22 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function MDXContent(props?: {}): React.ReactElement<any, string | React.JSXElementConstructor<any>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-23 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: {}</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-24 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-25 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const MDXLayout: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-26 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: {}</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-27 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-28 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const MDXLayout: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-29 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) _jsx(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement import _jsx</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-30 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const MDXLayout: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-31 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: {}</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-32 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) children: React.ReactElement<any, string | React.JSXElementConstructor<any>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-33 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) _jsx(type: React.ElementType, props: unknown, key?: React.Key): React.ReactElement import _jsx</code></pre><div class=rehype-twoslash-popover-description>Create a React element.You should not use this function directly. Use JSX and a transpiler instead.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-34 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function _createMdxContent(props: any): React.ReactElement<any, string | React.JSXElementConstructor<any>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-35 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: {}</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-36 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function _createMdxContent(props: any): React.ReactElement<any, string | React.JSXElementConstructor<any>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-niFacjpc-37 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: {}</code></pre></div></div><button class=copy-button data-value="// @noErrors import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from &#39react/jsx-runtime&#39 export function Thing() { return _jsx(_Fragment, {children: &#39World&#39}) } function _createMdxContent(props) { const _components = {h1: &#39h1&#39, ...props.components} return _jsxs(_components.h1, {children: [&#39Hello &#39, _jsx(Thing, {})]}) } export default function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || {} return MDXLayout ? _jsx(MDXLayout, {...props, children: _jsx(_createMdxContent, {...props})}) : _createMdxContent(props) } "></button></div>Some more observations:<ul><li>JSX is compiled away to function calls and an import of React†<li>The content component can be given <code>{components: {wrapper: MyLayout}}</code> to wrap all content<li>The content component can be given <code>{components: {h1: MyComponent}}</code> to use something else for the heading</ul>† MDX is not coupled to React. You can also use it with <a href=../getting-started/#preact>Preact</a>, <a href=../getting-started/#vue>Vue</a>, <a href=../getting-started/#emotion>Emotion</a>, <a href=../getting-started/#theme-ui>Theme UI</a>, etc. Both the classic and automatic JSX runtimes are supported.<h3 id=mdx-content><a href=#mdx-content 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>MDX content</h3>We just saw that MDX files are compiled to components. You can use those components like any other component in your framework of choice. Take this file:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.mdx</div><pre><code class=language-mdx># Hi! </code></pre><button class=copy-button data-value="# Hi! "></button></div>It could be imported and used in a React app like so:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.jsx</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">import {createRoot} from 'react-dom/client' import Example from './example.mdx' // Assumes an integration is used to compile MDX -> JS. const container = document.getElementById('root') if (!container) throw new Error('Expected `root`') const root = createRoot(container) root.render(<Example />) </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function createRoot(container: Container, options?: RootOptions): Root import createRoot</code></pre><div class=rehype-twoslash-popover-description>createRoot lets you create a root to display React components inside a browser DOM node.<ul><li>@see {@link <a href=//react.dev/reference/react-dom/client/createRoot>https://react.dev/reference/react-dom/client/createRoot</a> API Reference for <code>createRoot</code>}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftitcrcr-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const container: HTMLElement | null</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>var document: Document</code></pre><div class=rehype-twoslash-popover-description><a href=//developer.mozilla.org/docs/Web/API/Window/document>MDN Reference</a></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Document.getElementById(elementId: string): HTMLElement | null</code></pre><div class=rehype-twoslash-popover-description>Returns a reference to the first object with the specified value of the ID attribute.<ul><li>@param elementId String that specifies the ID value.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const container: HTMLElement | null</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>var Error: ErrorConstructor new (message?: string, options?: ErrorOptions) => Error (+1 overload)</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const root: Root</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) createRoot(container: Container, options?: RootOptions): Root import createRoot</code></pre><div class=rehype-twoslash-popover-description>createRoot lets you create a root to display React components inside a browser DOM node.<ul><li>@see {@link <a href=//react.dev/reference/react-dom/client/createRoot>https://react.dev/reference/react-dom/client/createRoot</a> API Reference for <code>createRoot</code>}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const container: HTMLElement</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const root: Root</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Root.render(children: React.ReactNode): void</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitcrcr-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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><button class=copy-button data-value="// @filename: types.d.ts import type {} from &#39mdx&#39 // @filename: example.jsx /// <reference lib=&#34dom&#34 /> // ---cut--- import {createRoot} from &#39react-dom/client&#39 import Example from &#39./example.mdx&#39 // Assumes an integration is used to compile MDX -> JS. const container = document.getElementById(&#39root&#39) if (!container) throw new Error(&#39Expected &#96root&#96&#39) const root = createRoot(container) root.render(<Example />) "></button></div>The main content is exported as the default export. All other values are also exported. Take this example:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.mdx</div><pre><code class=language-mdx>export function Thing() { return &#60>World&#60/> } # Hello <Thing /> </code></pre><button class=copy-button data-value="export function Thing() { return <>World</> } # Hello <Thing /> "></button></div>It could be imported in the following ways:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.js</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">// A namespace import to get everything: import * as everything from './example.mdx' // Assumes an integration is used to compile MDX -> JS. console.log(everything) // {Thing: [Function: Thing], default: [Function: MDXContent]} // Default export shortcut and a named import specifier: import Content, {Thing} from './example.mdx' console.log(Content) // [Function: MDXContent] console.log(Thing) // [Function: Thing] // Import specifier with another local name: import {Thing as AnotherName} from './example.mdx' console.log(AnotherName) // [Function: Thing] </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) module "*.mdx" import everything</code></pre><div class=rehype-twoslash-popover-description>An MDX file which exports a JSX component.The default export of MDX files is a function which takes props and returns a JSX element. MDX files can export other identifiers from within the MDX file as well, either authored manually or automatically through pluginsIt’s currently not possible for the other exports to be typed automatically. You can type them yourself with a TypeScript <a href=//www.typescriptlang.org/docs/handbook/2/modules.html#non-modules>script</a> which augments <code>*.mdx</code> modules. A script file is a file which doesn’t use top-level ESM syntax, but ESM syntax is allowed inside the declared module.This is typically useful for exports created by plugins. For example:<pre><code class=language-ts>// mdx-custom.d.ts declare module '*.mdx' { import { Frontmatter } from 'my-frontmatter-types'; export const frontmatter: Frontmatter; export const title: string; } </code></pre>The previous example added types to all <code>.mdx</code> files. To define types for a specific MDX file, create a file with the same name but postfixed with <code>.d.ts</code> next to the MDX file.For example, given the following MDX file <code>my-component.mdx</code>:<pre><code class=language-mdx>export const message = 'world'; # Hello {message} </code></pre>Create the following file named <code>my-component.mdx.d.ts</code> in the same directory:<pre><code class=language-ts>export { default } from '*.mdx'; export const message: string; </code></pre>Note that this overwrites the <code>declare module '*.mdx' { … }</code> types from earlier, which is why you also need to define the default export. You can also define your own default export type to narrow the accepted prop types of this specific file.It should now be possible to import both the MDX component and the exported constant <code>message</code>.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) module "*.mdx" import everything</code></pre><div class=rehype-twoslash-popover-description>An MDX file which exports a JSX component.The default export of MDX files is a function which takes props and returns a JSX element. MDX files can export other identifiers from within the MDX file as well, either authored manually or automatically through pluginsIt’s currently not possible for the other exports to be typed automatically. You can type them yourself with a TypeScript <a href=//www.typescriptlang.org/docs/handbook/2/modules.html#non-modules>script</a> which augments <code>*.mdx</code> modules. A script file is a file which doesn’t use top-level ESM syntax, but ESM syntax is allowed inside the declared module.This is typically useful for exports created by plugins. For example:<pre><code class=language-ts>// mdx-custom.d.ts declare module '*.mdx' { import { Frontmatter } from 'my-frontmatter-types'; export const frontmatter: Frontmatter; export const title: string; } </code></pre>The previous example added types to all <code>.mdx</code> files. To define types for a specific MDX file, create a file with the same name but postfixed with <code>.d.ts</code> next to the MDX file.For example, given the following MDX file <code>my-component.mdx</code>:<pre><code class=language-mdx>export const message = 'world'; # Hello {message} </code></pre>Create the following file named <code>my-component.mdx.d.ts</code> in the same directory:<pre><code class=language-ts>export { default } from '*.mdx'; export const message: string; </code></pre>Note that this overwrites the <code>declare module '*.mdx' { … }</code> types from earlier, which is why you also need to define the default export. You can also define your own default export type to narrow the accepted prop types of this specific file.It should now be possible to import both the MDX component and the exported constant <code>message</code>.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Content(props: MDXProps): Element import Content</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftdmecFT-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Thing(): JSX.Element import Thing</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Content(props: MDXProps): Element import Content</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftdmecFT-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Thing(): JSX.Element import Thing</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function Thing(): JSX.Element</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function AnotherName(): JSX.Element import AnotherName</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftdmecFT-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function AnotherName(): JSX.Element import AnotherName</code></pre></div></div><button class=copy-button data-value="// @filename: types.d.ts declare module &#39*.mdx&#39 { export {MDXContent as default} from &#39mdx/types' export function Thing(): JSX.Element; } // @filename: example.js /// <reference types=&#34node&#34 /> // ---cut--- // A namespace import to get everything: import * as everything from &#39./example.mdx&#39 // Assumes an integration is used to compile MDX -> JS. console.log(everything) // {Thing: [Function: Thing], default: [Function: MDXContent]} // Default export shortcut and a named import specifier: import Content, {Thing} from &#39./example.mdx&#39 console.log(Content) // [Function: MDXContent] console.log(Thing) // [Function: Thing] // Import specifier with another local name: import {Thing as AnotherName} from &#39./example.mdx&#39 console.log(AnotherName) // [Function: Thing] "></button></div><h4 id=props><a href=#props 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>Props</h4>In <a href=../what-is-mdx/>§ What is MDX</a>, we showed that JavaScript expressions, inside curly braces, can be used in MDX:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.mdx</div><pre><code class=language-mdx>import {year} from './data.js' export const name = 'world' # Hello {name.toUpperCase()} The current year is {year} </code></pre><button class=copy-button data-value="import {year} from &#39./data.js&#39 export const name = &#39world&#39 # Hello {name.toUpperCase()} The current year is {year} "></button></div>Instead of importing or defining data within MDX, data can also be passed to <code>MDXContent</code>. The passed data is called <code>props</code>. Take for example:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.mdx</div><pre><code class=language-mdx># Hello {props.name.toUpperCase()} The current year is {props.year} </code></pre><button class=copy-button data-value="# Hello {props.name.toUpperCase()} The current year is {props.year} "></button></div>This file could be used as:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.jsx</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">import React from 'react' import Example from './example.mdx' // Assumes an integration is used to compile MDX -> JS. // Use a `createElement` call: console.log(React.createElement(Example, {name: 'Venus', year: 2021})) // Use JSX: console.log(<Example name="Mars" year={2022} />) </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) namespace React import React</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftitJcny-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) namespace React import React</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>function React.createElement<MDXProps>(type: React.FunctionComponent<MDXProps>, props?: (React.Attributes &amp MDXProps) | null | undefined, ...children: React.ReactNode[]): React.FunctionComponentElement&#60...> (+6 overloads)</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftitJcny-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) name: string</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) year: number</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftitJcny-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) name: string</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitJcny-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) year: number</code></pre></div></div><button class=copy-button data-value="// @filename: types.d.ts import type {} from &#39mdx&#39 // @filename: example.jsx /// <reference lib=&#34dom&#34 /> // ---cut--- import React from &#39react&#39 import Example from &#39./example.mdx&#39 // Assumes an integration is used to compile MDX -> JS. // Use a &#96createElement&#96 call: console.log(React.createElement(Example, {name: &#39Venus&#39, year: 2021})) // Use JSX: console.log(<Example name=&#34Mars&#34 year={2022} />) "></button></div><div class="info note">Note: Users of the MDX VS Code extension can add type checking of <code>props</code> with a JSDoc comment. See <a href=//github.com/mdx-js/mdx-analyzer><code>mdx-js/mdx-analyzer</code></a> for more info.</div><h4 id=components><a href=#components 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>Components</h4>There is one special prop: <code>components</code>. It takes an object mapping component names to components. Take this example:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.mdx</div><pre><code class=language-mdx># Hello *<Planet />* </code></pre><button class=copy-button data-value="# Hello *<Planet />* "></button></div>It can be imported from JavaScript and passed components like so:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.jsx</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">import Example from './example.mdx' // Assumes an integration is used to compile MDX -> JS. console.log( <Example components={{ Planet() { return <span style={{color: 'tomato'}}>Pluto&#60/span> } }} /> ) </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitrsst-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftitrsst-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitrsst-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitrsst-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftitrsst-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) MDXProps.components?: MDXComponents</code></pre><div class=rehype-twoslash-popover-description>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-ftitrsst-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Planet(): JSX.Element</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitrsst-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitrsst-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) React.HTMLAttributes<HTMLSpanElement>.style?: React.CSSProperties | undefined</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitrsst-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) StandardLonghandProperties<string | number, string &amp {}>.color?: Property.Color | undefined</code></pre><div class=rehype-twoslash-popover-description>The <code>color</code> CSS property sets the foreground color value of an element's text and text decorations, and sets the <code>currentcolor</code> value. <code>currentcolor</code> may be used as an indirect value on other properties and is the default for other color properties, such as <code>border-color</code>.Syntax: <code>&#60color></code>Initial value: <code>canvastext</code><table><thead><tr><th style=text-align:center>Chrome<th style=text-align:center>Firefox<th style=text-align:center>Safari<th style=text-align:center>Edge<th style=text-align:center>IE<tbody><tr><td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>12<td style=text-align:center>3</table><ul><li>@see <a href=//developer.mozilla.org/docs/Web/CSS/color>https://developer.mozilla.org/docs/Web/CSS/color</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitrsst-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement></code></pre></div></div><button class=copy-button data-value="// @filename: types.d.ts import type {} from &#39mdx&#39 // @filename: example.jsx /// <reference lib=&#34dom&#34 /> /* @jsxImportSource react */ // ---cut--- import Example from &#39./example.mdx&#39 // Assumes an integration is used to compile MDX -> JS. console.log( <Example components={{ Planet() { return Pluto } }} /> ) "></button></div>You don’t have to pass components. You can also define or import them within MDX:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.mdx</div><pre><code class=language-mdx>import {Box, Heading} from 'rebass' MDX using imported components! <Box> <Heading>Here’s a heading&#60/Heading> &#60/Box> </code></pre><button class=copy-button data-value="import {Box, Heading} from &#39rebass&#39 MDX using imported components! <Box> <Heading>Here’s a heading</Heading> </Box> "></button></div>Because MDX files are components, they can also import each other:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.mdx</div><pre><code class=language-mdx>import License from './license.md' // Assumes an integration is used to compile markdown -> JS. import Contributing from './docs/contributing.mdx' # Hello world <License /> --- <Contributing /> </code></pre><button class=copy-button data-value="import License from &#39./license.md&#39 // Assumes an integration is used to compile markdown -> JS. import Contributing from &#39./docs/contributing.mdx&#39 # Hello world <License /> --- <Contributing /> "></button></div>Here are some other examples of passing components:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.jsx</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">console.log( <Example components={{ // Map `h1` (`# heading`) to use `h2`s. h1: 'h2', // Rewrite `em`s (`*like so*`) to `i` with a goldenrod foreground color. em(props) { return <i style={{color: 'goldenrod'}} {...props} /> }, // Pass a layout (using the special `'wrapper'` key). wrapper({components, ...rest}) { return <main {...rest} /> }, // Pass a component. Planet() { return 'Neptune' }, // This nested component can be used as `&#60theme.text>hi&#60/theme.text>` theme: { text(props) { return <span style={{color: 'grey'}} {...props} /> } } }} /> ) </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftitssgp-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) MDXProps.components?: MDXComponents</code></pre><div class=rehype-twoslash-popover-description>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-ftitssgp-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h1?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) em?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.i: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) React.HTMLAttributes<HTMLElement>.style?: React.CSSProperties | undefined</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) StandardLonghandProperties<string | number, string &amp {}>.color?: Property.Color | undefined</code></pre><div class=rehype-twoslash-popover-description>The <code>color</code> CSS property sets the foreground color value of an element's text and text decorations, and sets the <code>currentcolor</code> value. <code>currentcolor</code> may be used as an indirect value on other properties and is the default for other color properties, such as <code>border-color</code>.Syntax: <code>&#60color></code>Initial value: <code>canvastext</code><table><thead><tr><th style=text-align:center>Chrome<th style=text-align:center>Firefox<th style=text-align:center>Safari<th style=text-align:center>Edge<th style=text-align:center>IE<tbody><tr><td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>12<td style=text-align:center>3</table><ul><li>@see <a href=//developer.mozilla.org/docs/Web/CSS/color>https://developer.mozilla.org/docs/Web/CSS/color</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) wrapper?: Component<any></code></pre><div class=rehype-twoslash-popover-description>If a wrapper component is defined, the MDX content will be wrapped inside of it.</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) components: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) rest: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.main: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) rest: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Planet(): string</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-17 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) theme: { text(props: any): JSX.Element; }</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-18 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) text(props: any): JSX.Element</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-19 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-20 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-21 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) React.HTMLAttributes<T>.style?: React.CSSProperties | undefined</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-22 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) StandardLonghandProperties<string | number, string &amp {}>.color?: Property.Color | undefined</code></pre><div class=rehype-twoslash-popover-description>The <code>color</code> CSS property sets the foreground color value of an element's text and text decorations, and sets the <code>currentcolor</code> value. <code>currentcolor</code> may be used as an indirect value on other properties and is the default for other color properties, such as <code>border-color</code>.Syntax: <code>&#60color></code>Initial value: <code>canvastext</code><table><thead><tr><th style=text-align:center>Chrome<th style=text-align:center>Firefox<th style=text-align:center>Safari<th style=text-align:center>Edge<th style=text-align:center>IE<tbody><tr><td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>12<td style=text-align:center>3</table><ul><li>@see <a href=//developer.mozilla.org/docs/Web/CSS/color>https://developer.mozilla.org/docs/Web/CSS/color</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftitssgp-23 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: any</code></pre></div></div><button class=copy-button data-value="// @filename: types.d.ts import type {} from &#39mdx&#39 // @filename: example.jsx /// <reference lib=&#34dom&#34 /> /* @jsxImportSource react */ import Example from &#39./example.mdx&#39 // ---cut--- console.log( <Example components={{ // Map &#96h1&#96 (&#96# heading&#96) to use &#96h2&#96s. h1: &#39h2&#39, // Rewrite &#96em&#96s (&#96*like so*&#96) to &#96i&#96 with a goldenrod foreground color. em(props) { return }, // Pass a layout (using the special &#96&#39wrapper&#39&#96 key). wrapper({components, ...rest}) { return <main {...rest} /> }, // Pass a component. Planet() { return &#39Neptune&#39 }, // This nested component can be used as &#96<theme.text>hi</theme.text>&#96 theme: { text(props) { return } } }} /> ) "></button></div>The following keys can be passed in <code>components</code>:<ul><li>HTML equivalents for the things you write with markdown such as <code>h1</code> for <code># heading</code> (see <a href=/table-of-components/>§ Table of components</a> for examples)<li><code>wrapper</code>, which defines the layout (but a local layout takes precedence)<li>anything else that is a valid JSX identifier (<code>foo</code>, <code>Quote</code>, <code>custom-element</code>, <code>_</code>, <code>$x</code>, <code>a1</code>) for the things you write with JSX (like <code>&#60So /></code> or <code>&#60like.so /></code>, note that locally defined components take precedence)‡</ul>‡ The rules for whether a name in JSX (so <code>x</code> in <code>&#60x></code>) is a literal tag name (like <code>h1</code>) or not (like <code>Component</code>) are as follows:<ul><li>if there’s a dot, it’s a member expression (<code>&#60a.b></code> → <code>h(a.b)</code>), which means a reference to the key <code>b</code> taken from object <code>a</code><li>otherwise, if the name is not a valid JS identifier, it’s a literal (<code>&#60a-b></code> → <code>h('a-b')</code>)<li>otherwise, if it starts with a lowercase, it’s a literal (<code>&#60a></code> → <code>h('a')</code>)<li>otherwise, it’s a reference (<code>&#60A></code> → <code>h(A)</code>)</ul>These keys in <code>components</code> and the difference between literal tag names and references is illustrated as follows. With the following MDX:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.mdx</div><pre><code class=language-mdx>* [markdown syntax](#alpha) * <a href="#bravo">JSX with a lowercase name&#60/a> * <Link to="#charlie">JSX with a capitalized name&#60/Link> </code></pre><button class=copy-button data-value='* [markdown syntax](#alpha) * <a href=&#34#bravo&#34>JSX with a lowercase name</a> * <Link to=&#34#charlie&#34>JSX with a capitalized name</Link> '></button></div>…passed some components:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">example.jsx</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">import Example from './example.mdx' console.log( <Example components={{ a(props) { return <a {...props} style={{borderTop: '1px dotted', color: 'violet'}} /> }, Link(props) { return <a href={props.to} children={props.children} style={{borderTop: '1px dashed', color: 'tomato'}} /> } }} /> ) </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftit1dct-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Example(props: MDXProps): Element import Example</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-ftit1dct-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) MDXProps.components?: MDXComponents</code></pre><div class=rehype-twoslash-popover-description>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-ftit1dct-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) a?: Component<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) React.HTMLAttributes<HTMLAnchorElement>.style?: React.CSSProperties | undefined</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) StandardShorthandProperties<string | number, string &amp {}>.borderTop?: Property.BorderTop<string | number> | undefined</code></pre><div class=rehype-twoslash-popover-description>The <code>border-top</code> shorthand CSS property sets all the properties of an element's top border.Syntax: <code>&#60line-width> || &#60line-style> || &#60color></code><table><thead><tr><th style=text-align:center>Chrome<th style=text-align:center>Firefox<th style=text-align:center>Safari<th style=text-align:center>Edge<th style=text-align:center>IE<tbody><tr><td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>12<td style=text-align:center>4</table><ul><li>@see <a href=//developer.mozilla.org/docs/Web/CSS/border-top>https://developer.mozilla.org/docs/Web/CSS/border-top</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) StandardLonghandProperties<string | number, string &amp {}>.color?: Property.Color | undefined</code></pre><div class=rehype-twoslash-popover-description>The <code>color</code> CSS property sets the foreground color value of an element's text and text decorations, and sets the <code>currentcolor</code> value. <code>currentcolor</code> may be used as an indirect value on other properties and is the default for other color properties, such as <code>border-color</code>.Syntax: <code>&#60color></code>Initial value: <code>canvastext</code><table><thead><tr><th style=text-align:center>Chrome<th style=text-align:center>Firefox<th style=text-align:center>Safari<th style=text-align:center>Edge<th style=text-align:center>IE<tbody><tr><td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>12<td style=text-align:center>3</table><ul><li>@see <a href=//developer.mozilla.org/docs/Web/CSS/color>https://developer.mozilla.org/docs/Web/CSS/color</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Link(props: any): JSX.Element</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) React.AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefined</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-17 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-18 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) React.DOMAttributes<HTMLAnchorElement>.children?: React.ReactNode</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-19 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(parameter) props: any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-20 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>any</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-21 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) React.HTMLAttributes<HTMLAnchorElement>.style?: React.CSSProperties | undefined</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-22 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) StandardShorthandProperties<string | number, string &amp {}>.borderTop?: Property.BorderTop<string | number> | undefined</code></pre><div class=rehype-twoslash-popover-description>The <code>border-top</code> shorthand CSS property sets all the properties of an element's top border.Syntax: <code>&#60line-width> || &#60line-style> || &#60color></code><table><thead><tr><th style=text-align:center>Chrome<th style=text-align:center>Firefox<th style=text-align:center>Safari<th style=text-align:center>Edge<th style=text-align:center>IE<tbody><tr><td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>12<td style=text-align:center>4</table><ul><li>@see <a href=//developer.mozilla.org/docs/Web/CSS/border-top>https://developer.mozilla.org/docs/Web/CSS/border-top</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftit1dct-23 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) StandardLonghandProperties<string | number, string &amp {}>.color?: Property.Color | undefined</code></pre><div class=rehype-twoslash-popover-description>The <code>color</code> CSS property sets the foreground color value of an element's text and text decorations, and sets the <code>currentcolor</code> value. <code>currentcolor</code> may be used as an indirect value on other properties and is the default for other color properties, such as <code>border-color</code>.Syntax: <code>&#60color></code>Initial value: <code>canvastext</code><table><thead><tr><th style=text-align:center>Chrome<th style=text-align:center>Firefox<th style=text-align:center>Safari<th style=text-align:center>Edge<th style=text-align:center>IE<tbody><tr><td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>1<td style=text-align:center>12<td style=text-align:center>3</table><ul><li>@see <a href=//developer.mozilla.org/docs/Web/CSS/color>https://developer.mozilla.org/docs/Web/CSS/color</a></ul></div></div></div><button class=copy-button data-value="// @filename: types.d.ts import type {} from &#39mdx&#39 // @filename: example.jsx /// <reference lib=&#34dom&#34 /> /* @jsxImportSource react */ // ---cut--- import Example from &#39./example.mdx&#39 console.log( <Example components={{ a(props) { return <a {...props} style={{borderTop: '1px dotted&#39, color: &#39violet&#39}} /> }, Link(props) { return <a href={props.to} children={props.children} style={{borderTop: '1px dashed&#39, color: &#39tomato&#39}} /> } }} /> ) "></button></div>…we’d get:<div class=card><ul><li><a href=#alpha style="border-top:1px dotted;color:violet">markdown syntax</a><li><a href=#bravo>JSX with a lowercase name</a><li><a href=#charlie style="border-top:1px dashed;color:tomato">JSX with a capitalized name</a></ul></div>Observe that the first link (<code>#alpha</code>) is dotted and violet. That’s because <code>a</code> is the HTML equivalent for the markdown syntax being used. The second link (<code>#bravo</code>) remains unchanged, because in JSX syntax <code>a</code> is a literal tag name. The third link (<code>#charlie</code>) is dashed and tomato, because in JSX syntax <code>Link</code> is a reference.<h4 id=layout><a href=#layout 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>Layout</h4>There is one special component: the layout. If it is defined, it’s used to wrap all content. A layout can be defined from within MDX using a default export:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">MDX</div><pre><code class=language-mdx>export default function Layout({children}) { return <main>{children}&#60/main>; } All the things. </code></pre><button class=copy-button data-value="export default function Layout({children}) { return <main>{children}</main>; } All the things. "></button></div>The layout can also be imported and then exported with an <code>export … from</code>:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">MDX</div><pre><code class=language-mdx>export {Layout as default} from './components.js' </code></pre><button class=copy-button data-value="export {Layout as default} from &#39./components.js&#39 "></button></div>The layout can also be passed as <code>components.wrapper</code> (but a local one takes precedence).<h3 id=mdx-provider><a href=#mdx-provider 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>MDX provider</h3>You probably don’t need a provider. Passing components is typically fine. Providers often only add extra weight. Take for example this file:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">post.mdx</div><pre><code class=language-mdx># Hello world </code></pre><button class=copy-button data-value="# Hello world "></button></div>Used like so:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">app.jsx</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">import {createRoot} from 'react-dom/client' import {Heading, /* … */ Table} from './components.js' import Post from './post.mdx' // Assumes an integration is used to compile MDX -> JS. const components = { h1: Heading.H1, // … table: Table } const container = document.getElementById('root') if (!container) throw new Error('Expected `root`') const root = createRoot(container) root.render(<Post components={components} />) </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function createRoot(container: Container, options?: RootOptions): Root import createRoot</code></pre><div class=rehype-twoslash-popover-description>createRoot lets you create a root to display React components inside a browser DOM node.<ul><li>@see {@link <a href=//react.dev/reference/react-dom/client/createRoot>https://react.dev/reference/react-dom/client/createRoot</a> API Reference for <code>createRoot</code>}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Heading: { H1: React.ComponentType; } import Heading</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Table: React.ComponentType&#60{}> import Table</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Post(props: MDXProps): Element import Post</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-fciRrcrc-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const components: { h1: React.ComponentType&#60{}>; table: React.ComponentType&#60{}>; }</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h1: React.ComponentType<{}></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Heading: { H1: React.ComponentType; } import Heading</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) H1: React.ComponentType<{}></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) table: React.ComponentType<{}></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Table: React.ComponentType&#60{}> import Table</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const container: HTMLElement | null</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>var document: Document</code></pre><div class=rehype-twoslash-popover-description><a href=//developer.mozilla.org/docs/Web/API/Window/document>MDN Reference</a></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Document.getElementById(elementId: string): HTMLElement | null</code></pre><div class=rehype-twoslash-popover-description>Returns a reference to the first object with the specified value of the ID attribute.<ul><li>@param elementId String that specifies the ID value.</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const container: HTMLElement | null</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>var Error: ErrorConstructor new (message?: string, options?: ErrorOptions) => Error (+1 overload)</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const root: Root</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) createRoot(container: Container, options?: RootOptions): Root import createRoot</code></pre><div class=rehype-twoslash-popover-description>createRoot lets you create a root to display React components inside a browser DOM node.<ul><li>@see {@link <a href=//react.dev/reference/react-dom/client/createRoot>https://react.dev/reference/react-dom/client/createRoot</a> API Reference for <code>createRoot</code>}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-17 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const container: HTMLElement</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-18 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const root: Root</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-19 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Root.render(children: React.ReactNode): void</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-fciRrcrc-20 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function Post(props: MDXProps): Element import Post</code></pre><div class=rehype-twoslash-popover-description>An function component which renders the MDX content using JSX.<ul><li>@param props This value is be available as the named variable <code>props</code> inside the MDX component.<li>@returns 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-fciRrcrc-21 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) MDXProps.components?: MDXComponents</code></pre><div class=rehype-twoslash-popover-description>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-fciRrcrc-22 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>const components: { h1: React.ComponentType&#60{}>; table: React.ComponentType&#60{}>; }</code></pre></div></div><button class=copy-button data-value="// @filename: components.d.ts import React from &#39react&#39 declare const Heading: {H1: React.ComponentType} declare const Table: React.ComponentType // @filename: types.d.ts import type {} from &#39mdx&#39 // @filename: example.jsx /// <reference lib=&#34dom&#34 /> // ---cut--- import {createRoot} from &#39react-dom/client&#39 import {Heading, /* … */ Table} from &#39./components.js&#39 import Post from &#39./post.mdx&#39 // Assumes an integration is used to compile MDX -> JS. const components = { h1: Heading.H1, // … table: Table } const container = document.getElementById(&#39root&#39) if (!container) throw new Error(&#39Expected &#96root&#96&#39) const root = createRoot(container) root.render(<Post components={components} />) "></button></div>That works, those components are used.But when you’re nesting MDX files (importing them into each other) it can become cumbersome. Like so:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">post.mdx</div><pre><code class=language-mdx>import License from './license.md' // Assumes an integration is used to compile markdown -> JS. import Contributing from './docs/contributing.mdx' # Hello world <License components={props.components} /> --- <Contributing components={props.components} /> </code></pre><button class=copy-button data-value="import License from &#39./license.md&#39 // Assumes an integration is used to compile markdown -> JS. import Contributing from &#39./docs/contributing.mdx&#39 # Hello world <License components={props.components} /> --- <Contributing components={props.components} /> "></button></div>To solve this, a <a href=//reactjs.org/docs/context.html>context</a> can be used in React, Preact, and Vue. Context provides a way to pass data through the component tree without having to pass props down manually at every level. Set it up like so:<ol><li>Install either <a href=/packages/react/><code>@mdx-js/react</code></a>, <a href=/packages/preact/><code>@mdx-js/preact</code></a>, or <a href=/packages/vue/><code>@mdx-js/vue</code></a>, depending on what framework you’re using<li>Configure your MDX integration with <a href=/packages/mdx/#processoroptions><code>providerImportSource</code> in <code>ProcessorOptions</code></a> set to that package, so either <code>'@mdx-js/react'</code>, <code>'@mdx-js/preact'</code>, or <code>'@mdx-js/vue'</code><li>Import <code>MDXProvider</code> from that package. Use it to wrap your top-most MDX content component and pass it your <code>components</code> instead:</ol><div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">Diff</div><pre><code class=language-diff>+import {MDXProvider} from '@mdx-js/react' import {createRoot} from 'react-dom/client' import {Heading, /* … */ Table} from './components/index.js' import Post from './post.mdx' // Assumes an integration is used to compile MDX -> JS. @@ -13,4 +14,8 @@ const components = { const container = document.getElementById('root') if (!container) throw new Error('Expected `root`') const root = createRoot(container) -root.render(&#60Post components={components} />) +root.render( + &#60MDXProvider components={components}> + &#60Post /> + &#60/MDXProvider> +) </code></pre><button class=copy-button data-value="+import {MDXProvider} from &#39@mdx-js/react&#39 import {createRoot} from &#39react-dom/client&#39 import {Heading, /* … */ Table} from &#39./components/index.js&#39 import Post from &#39./post.mdx&#39 // Assumes an integration is used to compile MDX -> JS. @@ -13,4 +14,8 @@ const components = { const container = document.getElementById(&#39root&#39) if (!container) throw new Error(&#39Expected &#96root&#96&#39) const root = createRoot(container) -root.render(<Post components={components} />) +root.render( + <MDXProvider components={components}> + <Post /> + </MDXProvider> +) "></button></div>Now you can remove the explicit and verbose component passing:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">Diff</div><pre><code class=language-diff> import License from './license.md' // Assumes an integration is used to compile markdown -> JS. import Contributing from './docs/contributing.mdx' # Hello world -&#60License components={props.components} /> +&#60License /> --- -&#60Contributing components={props.components} /> +&#60Contributing /> </code></pre><button class=copy-button data-value=" import License from &#39./license.md&#39 // Assumes an integration is used to compile markdown -> JS. import Contributing from &#39./docs/contributing.mdx&#39 # Hello world -<License components={props.components} /> +<License /> --- -<Contributing components={props.components} /> +<Contributing /> "></button></div>When <code>MDXProvider</code>s are nested, their components are merged. Take this example:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">JavaScript</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">console.log( <MDXProvider components={{h1: Component1, h2: Component2}}> <MDXProvider components={{h2: Component3, h3: Component4}}> <Content /> &#60/MDXProvider> &#60/MDXProvider> ) </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function MDXProvider(properties: Readonly<Props>): React.ReactElement import MDXProvider</code></pre><div class=rehype-twoslash-popover-description>Provider for MDX context.<ul><li>@param properties Properties.<li>@returns Element.<li>@satisfies {Component}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) components?: Readonly<MDXComponents> | MergeComponents | null | undefined</code></pre><div class=rehype-twoslash-popover-description>Additional components to use or a function that creates them (optional).</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h1?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Component1: React.ComponentType&#60{}> import Component1</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h2?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Component2: React.ComponentType&#60{}> import Component2</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function MDXProvider(properties: Readonly<Props>): React.ReactElement import MDXProvider</code></pre><div class=rehype-twoslash-popover-description>Provider for MDX context.<ul><li>@param properties Properties.<li>@returns Element.<li>@satisfies {Component}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) components?: Readonly<MDXComponents> | MergeComponents | null | undefined</code></pre><div class=rehype-twoslash-popover-description>Additional components to use or a function that creates them (optional).</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h2?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Component3: React.ComponentType&#60{}> import Component3</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h3?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Component4: React.ComponentType&#60{}> import Component4</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Content: MDXContent import Content</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function MDXProvider(properties: Readonly<Props>): React.ReactElement import MDXProvider</code></pre><div class=rehype-twoslash-popover-description>Provider for MDX context.<ul><li>@param properties Properties.<li>@returns Element.<li>@satisfies {Component}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function MDXProvider(properties: Readonly<Props>): React.ReactElement import MDXProvider</code></pre><div class=rehype-twoslash-popover-description>Provider for MDX context.<ul><li>@param properties Properties.<li>@returns Element.<li>@satisfies {Component}</ul></div></div></div><button class=copy-button data-value="// @filename: types.d.ts import React from &#39react&#39 import type {MDXContent} from &#39mdx/types.js&#39 declare const Component1: React.ComponentType declare const Component2: React.ComponentType declare const Component3: React.ComponentType declare const Component4: React.ComponentType declare const Content: MDXContent // @filename: example.jsx /// <reference lib=&#34dom&#34 /> import {MDXProvider} from &#39@mdx-js/react&#39 import React from &#39react&#39 import {Component1, Component2, Component3, Component4, Content} from &#39./types.js&#39 // ---cut--- console.log( <MDXProvider components={{h1: Component1, h2: Component2}}> <MDXProvider components={{h2: Component3, h3: Component4}}> <Content /> </MDXProvider> </MDXProvider> ) "></button></div>…which results in <code>h1</code>s using <code>Component1</code>, <code>h2</code>s using <code>Component3</code>, and <code>h3</code>s using <code>Component4</code>.To merge differently or not at all, pass a function to <code>components</code>. It’s given the current context <code>components</code> and what it returns will be used instead. In this example the current context components are discarded:<div class="code-frame frame"><div class="frame-tab-bar frame-tab-bar-scroll">JavaScript</div><div class="highlight highlight-js"><pre><code class="language-js twoslash">console.log( <MDXProvider components={{h1: Component1, h2: Component2}}> <MDXProvider components={ function () { return {h2: Component3, h3: Component4} } } > <Content /> &#60/MDXProvider> &#60/MDXProvider> ) </code></pre><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-0 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>namespace console var console: Console</code></pre><div class=rehype-twoslash-popover-description>The <code>console</code> module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.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-v20.x/api/process.html#processstdout><code>process.stdout</code></a> and <a href=//nodejs.org/docs/latest-v20.x/api/process.html#processstderr><code>process.stderr</code></a>. The global <code>console</code> can be used without calling <code>require('console')</code>.</ul>Warning: 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-v20.x/api/process.html#a-note-on-process-io><code>note on process I/O</code></a> for more information.Example using the global <code>console</code>:<pre><code class=language-js>console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr </code></pre>Example using the <code>Console</code> class:<pre><code class=language-js>const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err </code></pre><ul><li>@see <a href=//github.com/nodejs/node/blob/v20.11.1/lib/console.js>source</a></ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-1 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)</code></pre><div class=rehype-twoslash-popover-description>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-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a>).<pre><code class=language-js>const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout </code></pre>See <a href=//nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args><code>util.format()</code></a> for more information.<ul><li>@since v0.1.100</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-2 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function MDXProvider(properties: Readonly<Props>): React.ReactElement import MDXProvider</code></pre><div class=rehype-twoslash-popover-description>Provider for MDX context.<ul><li>@param properties Properties.<li>@returns Element.<li>@satisfies {Component}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-3 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) components?: Readonly<MDXComponents> | MergeComponents | null | undefined</code></pre><div class=rehype-twoslash-popover-description>Additional components to use or a function that creates them (optional).</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-4 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h1?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-5 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Component1: React.ComponentType&#60{}> import Component1</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-6 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h2?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-7 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Component2: React.ComponentType&#60{}> import Component2</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-8 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function MDXProvider(properties: Readonly<Props>): React.ReactElement import MDXProvider</code></pre><div class=rehype-twoslash-popover-description>Provider for MDX context.<ul><li>@param properties Properties.<li>@returns Element.<li>@satisfies {Component}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-9 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) components?: Readonly<MDXComponents> | MergeComponents | null | undefined</code></pre><div class=rehype-twoslash-popover-description>Additional components to use or a function that creates them (optional).</div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-10 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h2?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-11 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Component3: React.ComponentType&#60{}> import Component3</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-12 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(property) h3?: Component<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>></code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-13 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Component4: React.ComponentType&#60{}> import Component4</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-14 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) const Content: MDXContent import Content</code></pre></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-15 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function MDXProvider(properties: Readonly<Props>): React.ReactElement import MDXProvider</code></pre><div class=rehype-twoslash-popover-description>Provider for MDX context.<ul><li>@param properties Properties.<li>@returns Element.<li>@satisfies {Component}</ul></div></div><div class="rehype-twoslash-hover rehype-twoslash-popover"id=rehype-twoslash-ftiRCCMM-1-16 popover><pre class=rehype-twoslash-popover-code><code class=language-ts>(alias) function MDXProvider(properties: Readonly<Props>): React.ReactElement import MDXProvider</code></pre><div class=rehype-twoslash-popover-description>Provider for MDX context.<ul><li>@param properties Properties.<li>@returns Element.<li>@satisfies {Component}</ul></div></div></div><button class=copy-button data-value="// @filename: types.d.ts import React from &#39react&#39 import type {MDXContent} from &#39mdx/types.js&#39 declare const Component1: React.ComponentType declare const Component2: React.ComponentType declare const Component3: React.ComponentType declare const Component4: React.ComponentType declare const Content: MDXContent // @filename: example.jsx /// <reference lib=&#34dom&#34 /> import {MDXProvider} from &#39@mdx-js/react&#39 import React from &#39react&#39 import {Component1, Component2, Component3, Component4, Content} from &#39./types.js&#39 // ---cut--- console.log( <MDXProvider components={{h1: Component1, h2: Component2}}> <MDXProvider components={ function () { return {h2: Component3, h3: Component4} } } > <Content /> </MDXProvider> </MDXProvider> ) "></button></div>…which results in <code>h2</code>s using <code>Component3</code> and <code>h3</code>s using <code>Component4</code>. No component is used for <code>h1</code>.If you’re not nesting MDX files, or not nesting them often, don’t use providers: pass components explicitly.</div><footer class=content><div class="block foot-article"><div class="block article-row"><div class=article-row-start><div>Previous: <a href=../getting-started/ rel=prev>Getting started</a></div></div><div class=article-row-end><div>Next: <a href=../extending-mdx/ rel=next>Extending MDX</a></div></div></div><div class="block article-row"><div class=article-row-start><div>Found a typo? Other suggestions? <a href=//github.com/mdx-js/mdx/blob/main/docs/docs/using-mdx.mdx>Edit this page on GitHub</a></div></div><div class=article-row-end><div>Published on <time datetime=2021-09-30T00:00:00.000Z>September 30, 2021</time> Modified on <time datetime=2024-10-18T00:00:00.000Z>October 18, 2024</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>MDX is made with ❤️ in Amsterdam, Boise, and around the 🌏 This site does not track you. MIT © 2017-2024</div><div style=margin-left:auto;text-align:right>Project on <a href=//github.com/mdx-js/mdx/>GitHub</a> Site on <a href=//github.com/mdx-js/mdx/tree/main/docs/>GitHub</a> Updates on <a href=//twitter.com/mdx_js>Twitter</a> Updates as <a href=/rss.xml>RSS feed</a> Sponsor on <a href=//opencollective.com/unified>OpenCollective</a></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=../getting-started/>Getting started</a><li><a href aria-current=page>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=//twitter.com/mdx_js><svg class="icon icon-twitter"height=18 viewBox="0 0 18 14"width=18 aria-label=Twitter role=img><title>Twitter</title><path d="M18 1.684l-1.687 1.684v.28c0 .307-.05.602-.123.886-.04 2.316-.777 5.387-3.816 7.81C6.404 17.115 0 12.907 0 12.907c5.063 0 5.063-1.684 5.063-1.684-1.126 0-3.376-2.243-3.376-2.243.563.56 1.689 0 1.689 0C.56 7.295.56 5.61.56 5.61c.563.561 1.689 0 1.689 0C-.563 3.368 1.124.561 1.124.561 1.687 3.368 9 4.49 9 4.49l.093-.046A6.637 6.637 0 0 1 9 3.368C9 1.353 10.636 0 12.656 0c1.112 0 2.094.506 2.765 1.286l.329-.163L17.437 0l-1.122 2.245L18 1.684z"fill=currentcolor /></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>