Playground Component
A built-in component lets you write Nextra-compatible MDX that renders only on the client.
Exported from nextra/components.
Props
| Name | Type | Default |
|---|---|---|
source | stringString with source MDX. | |
fallback | ReactElement<unknown, string | JSXElementConstructor<any>> | nullFallback component for loading. | null |
components | MDXComponentsAn object mapping names to React components. The key used will be the name accessible to MDX. | |
scope | ScopePass-through variables for use in the MDX content. These variables will be available in the MDX scope. |
Example
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>} />