Playground

MDX

Loading playground...

Usage

Basic Usage

import { Playground } from 'nextra/components'
 
# Playground
 
Below is a playground component. It mixes into the rest of your MDX perfectly.
 
<Playground
  source="## Hello world"
  components={{ h2: props => <h2 {...props} className="myClass" /> }}
/>

You may also specify a fallback component like so:

Usage with Fallback

import { Playground } from 'nextra/components'
 
<Playground
  source="## Hello world"
  components={{ h2: props => <h2 {...props} className="myClass" /> }}
  fallback={<div>Loading playground...</div>}
/>

Avoiding Unstyled Outputs

To prevent unstyled elements, import useMDXComponents from your mdx-components file. Call this function and pass the returned components to the components prop. You can also include your custom components as the first argument:

import { Playground } from 'nextra/components'
import { useMDXComponents } from '../path/to/my/mdx-components'
 
<Playground
  source="## Hello world"
  components={useMDXComponents({
    h2: props => <h2 {...props} className="myClass" />
  })}
  fallback={<div>Loading playground...</div>}
/>