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

You may also specify a fallback component like so:

Usage with Fallback
import { Playground } from 'nextra/components'
 
<Playground
  source="## Hello world"
  fallback={<div>Loading playground...</div>}
/>
Remote ContentBuilt-ins