Live Coding with Sandpack

Jun 23, 2025 — MDX

This theme allows you to use a <Playground> MDX component that is powered by Sandpack (opens in a new window).

You can author it like so:

<Playground template="react">

```js name=App.js active
import { NAME } from './constants.js'

export default function App() {
  return <h1>Hello {NAME}</h1>
}
```

```js name=constants.js readOnly
export const NAME = 'World'
```

</Playground>

The end result will be:

import { NAME } from './constants.js'

export default function App() {
  return <h1>Hello {NAME}</h1>
}

Open Sandbox