is a live coding environment that runs on the browser. It is made by the team behind . The main objective here is to provide interactive examples to play around with, to users. I see it being widely used in things like blog posts and documentation (in fact the, work in progress, is using Sandpack). In this article, we are going to look at how to add Sandpack to a React Application and then we will look at integrating it with in a NextJS Application. Sandpack CodeSandbox new React Docs Next MDX Remote Adding Sandpack to our Project We are going to be adding Sandpack to a react application (made with ) though the process should be quite the same for NextJS or Gatsby. create react app Create a starter react project and navigate into it npx create-react-app sandpack-demo
cd sandpack-demo Note: Feel free to use the Yarn package manager if that is what you prefer. Now, let us install Sandpack npm install @codesandbox/sandpack-react That is it for dependencies, now let us move on to adding Sandpack to the application. Go ahead and delete , , , and . Also remove all the boilerplate code in . It should look like this - App.css App.test.js setupTests.js logo.svg App.js function App() {
  return <div></div>;
}

export default App; Now, let us import Sandpack in - App.js import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css"; Here, we are also importing a CSS file that contains the styles for the editor and preview. We should also add the Sandpack component - <Sandpack /> That is it!!! Now let us start the dev server by running . Navigate to and this is what you should see - npm start http://localhost:3000/ Custom Templates The default template that Sandpack uses is vanilla js but we can also use other templates like react, vue, angular, etc. Let us see the react template in action. Just add the attribute and specify the value as - template react <Sandpack template="react" /> Feel free to go through the for more templates and information on how to add your custom code. Sandpack Custom Content documentation Custom Theme We can also customize the theme. Let us look at adding a pre-built theme - <Sandpack template="react" theme="sandpack-dark" /> This is how the editor should look like - Feel free to go through the for more themes and information on building your theme. Sandpack Custom UI documentation At last, this is how our looks like - App.js import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

function App() {
  return (
    <div>
      <Sandpack template="react" theme="sandpack-dark" />
    </div>
  );
}

export default App; Now, that was just getting started with Sandpack but now let us look at it being used in a more real-world example. Feel free to go through the for more detailed guides and an API reference. Sandpack documentation Using Sandpack with Next MDX Remote is a library that parses MDX content (markdown but with support for JSX as well) and helps load them via or in NextJS. It is mainly used for documentation and blog posts. Today, we are going to be adding Next MDX Remote to a NextJS application and customize the code component by replacing it with Sandpack. First of all, let us make a new NextJS application and navigate into it - Next MDX Remote getStaticProps getServersideProps npx create-next-app sandpack-next-mdx-remote
cd sandpack-next-mdx-remote Now, let us delete under the directory and remove the boilerplate code in under the directory. This is how it should look like - Home.module.css styles index.js pages export default function Home() {
  return <div></div>;
} Adding Next MDX Remote The next step is to add and setup Next MDX Remote so let us do that - npm install next-mdx-remote Now, let us go to and add the following code - index.js import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";

export default function Home({ source }) {
  return (
    <div>
      <MDXRemote {...source} />
    </div>
  );
}

export const getStaticProps = async () => {
  const source = "```html\n<h1>Hello World</h1>\n```";

  const mdxSource = await serialize(source);

  return { props: { source: mdxSource } };
}; Note that I am just writing down some basic markdown with a code block. Usually, this markdown is sourced from external files and paired with frontmatter but that is not something I am going to go over in this article. Now let us start the development server by running . Upon navigating to , this is what our page should look like - npm run dev http://localhost:3000/ Note that a simple HTML element is being rendered now code Now, I could add syntax highlighting to this using but as we are anyways going to use Sandpack, let us move onto that instead. remark prism Adding Sandpack to Next MDX Remote First of all, let us install the Sandpack package - npm install @codesandbox/sandpack-react Now let us create a directory called and add a file named in there. Add the following code to that file - components CustomMDXCode.js import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

const CustomMDXCode = props => {
  return (
    <Sandpack
      template={props.template}
      files={{ [`/${props.filename}`]: props.children }}
    />
  );
};

export default CustomMDXCode; Here, we are importing Sandpack, making a custom component, which is passed in some props. These props will contain the filename of the file, the template to use, and of course, the code. Note that we are adding a to the beginning of the filename through string interpolation as it is required by Sandpack. / Now, let us go back to our file and make some changes to leverage the use of the new component - index.js import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import CustomMDXCode from "../components/CustomMDXCode";

export default function Home({ source }) {
  return (
    <div>
      <MDXRemote
        components={{ code: props => <CustomMDXCode {...props} /> }}
        {...source}
      />
    </div>
  );
}

export const getStaticProps = async () => {
  const source =
    "```js template=react filename=App.js\nexport default function App() {\n  return <h1>Just some text...</h1>\n}\n```";

  const mdxSource = await serialize(source);

  return { props: { source: mdxSource } };
}; Here, we are adding a custom component for the code attribute (reference for all mdx components - ), which is nothing but the Sandpack component we created earlier. We have also changed the markdown source to , added a attribute and pointed that to , added a attribute and named the file , and wrote a simple function that displays some text for the code part. https://mdxjs.com/table-of-components/ javascript template react filename App.js This is what our page should look like now: Conclusion That is it for this article. I hope you enjoyed it and learned how to add Sandpack to your react application. Feel free to comment on this post or reach out to me via in case you have any questions. Twitter Links Sandpack - https://sandpack.codesandbox.io/ Sanpack Documentation - https://sandpack.codesandbox.io/docs/ Sandpack GitHub - https://github.com/codesandbox/sandpack Next MDX Remote - https://github.com/hashicorp/next-mdx-remote All MDX Component - https://mdxjs.com/table-of-components/ First published here

Facebook

Twitter

2022 - HackerNoon Contributor of the Year - Firebase

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Embed an In-browser Code Preview into Your React Application with Sandpack

Too Long; Didn't Read

Companies Mentioned

Anish De

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Embed an In-browser Code Preview into Your React Application with Sandpack

Too Long; Didn't Read

Companies Mentioned

Anish De

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES