Skip to content
MDX logoMDX v1.3.0
GitHub logo


Build Status lerna Join the community on Spectrum

Parse and render MDX in a runtime environment.

⚠️ 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


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 />
export default () => (
<MDX components={components} scope={scope}>{mdx}</MDX>


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 ZEIT

Edit this page on GitHub
Getting Started