Sandpack with NextJS

2 min read


In this post, I will explain how to use the Sandpack editor with MDX files in NextJS app.


I'm using next-mdx-remote to render MDX files and @codesandbox/sandpack-react package to add Sandpack editor. To install them run

npm i next-mdx-remote @codesandbox/sandpack-react


Custom MDX component to render Sandpack editor Write a custom Sandpack component with the pre-configured theme, Sandpack options etc, Following is the CustomSandpack component I built to use in MDX content

import { Sandpack } from "@codesandbox/sandpack-react";
import { useTheme } from "@mui/material";
type CustomSandpackProps = {
template: any;
filename: string;
children: string;
const CustomSandpack = (props: CustomSandpackProps) => {
const theme = useTheme();
const { children, filename } = props;
return (
[filename]: { code: children, active: true },
showLineNumbers: true,
showInlineErrors: true,
showTabs: false,
closableTabs: false,
export default CustomSandpack;

Inject the CustomSandpack component to the MDX context Next, import the CustomSandpack component to the [slug].tsx where the NextJS dynamic routing happens and pass the CustomSandpack component to the MDXRemote via the components prop.

const components: any = {
// It also works with dynamically-imported components, which is especially
// useful for conditionally loading components for certain routes.
// See the notes in for more details.
Spack: dynamic(import("../../src/components/blog/CustomSandpack")),
<MDXRemote {...mdxSource} components={components} />

Use the <Sandpack> element in MDX

Finally, You can use the Sandpack custom component in MDX content as below

<Spack filename="/App.js">
{`export default function App() {
return <h1>Hello Sandpack from Knnect</h1>


Try editing the code below and see the result

Try out Dark vs Light modes
export default function App() {
  return <h1>Hello Sandpack from Knnect</h1>