Parse and render MDX in a runtime environment

Usage no npm install needed!

<script type="module">
  import mdxJsRuntime from 'https://cdn.skypack.dev/@mdx-js/runtime';



Build Status lerna Chat

Parse and render MDX in a runtime environment.

:warning: warning: this is not the preferred way to use MDX since it introduces a substantial amount of overhead and dramatically increases bundle sizes. It should also not be used with user input that isn’t sandboxed.



npm i -S @mdx-js/runtime



The MDX Runtime component accepts two props:

Name Description
components Globally available components for the runtime
scope Variables that are accessible in the JSX portion of the document
remarkPlugins Array of remark plugins

Example code

import React from 'react'
import MDX from '@mdx-js/runtime'

// Provide custom components for markdown elements
const components = {
  h1: props => <h1 style={{color: 'tomato'}} {...props} />,
  Demo: props => <h1>This is a demo component</h1>

// Provide variables that might be referenced by JSX
const scope = {
  some: 'value'

const mdx = `
# Hello, world!

<Demo />

<div>Here is the scope variable: {some}</div>

export default () => (
  <MDX components={components} scope={scope}>


See the Support and Contributing guidelines on the MDX website for ways to (get) help.

This project has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.


MIT © Compositor and Vercel