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>}
/>