Playground
MDX
Playground components allow you to write Nextra compatible MDX that renders only on the client. It's modeled after the functionality found in [MDX Playground](https://mdxjs.com/playground).
In some instances where remote loading MDX is not an option, this may work as a great alternative.
Here's an example of a codeblock.
```ts
console.log("Hello world, this is a playground component!");
```
## Caveats
Due to the purely client-side nature of this component, features "Table of Contents" and "Frontmatter" will not work.
## Mermaid Example
```mermaid
graph TD
subgraph AA [Consumers]
A[Mobile App]
B[Web App]
C[Node.js Client]
end
subgraph BB [Services]
E[REST API]
F[GraphQL API]
G[SOAP API]
end
Z[GraphQL API]
A --> Z
B --> Z
C --> Z
Z --> E
Z --> F
Z --> G
```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>}
/>Last updated on