Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @mdx-js/runtime with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var runtime = require("@mdx-js/runtime")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@mdx-js/runtime v1.5.8

Parse and render MDX in a runtime environment

@mdx-js/runtime

Build Status lerna Join the community on Spectrum

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.

Installation

npm:

npm i -S @mdx-js/runtime

Usage

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>
)

Contribute

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.

License

MIT © Compositor and ZEIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free