Create a Dynamic Code Playground with SandPack + React!

In this article, we will explore SandPack, a popular playground framework by CodeSandbox, and discuss how you can use it to create a more dynamic and interactive environment for your users.

This article covers pretty much all of the basic things you need to know about SandPack. However, more advanced features such as hooks and custom components as well as cool customization options are discussed in detail on my blog.

Check out the detailed version of this article

What is SandPack

SandPack is a component toolkit for building live code editors for your blogs and technical docs. In this article, we will focus on sandpack-react rather than sandpack-client, which is a lightweight JavaScript bundler.

What makes SandPack stand out is the wide range of customization options available. Plus, it's really easy to get started with. The most useful features of sandpack-react include:

• Pre-built templates for popular languages and frameworks
• A larger number of pre-built themes for the editor as well as the option to create custom themes.
• Support for all npm dependencies and major JavaScript frameworks.
• Options to customize the UI and almost every aspect of the playground.
• You can create a completely custom playground using the pre-build composable components.
• Providers and custom hooks are available to create custom components.

Overview of The PlayGround

To get started with sandpack-react, run this npm or yarn command:

npm i @codesandbox/sandpack-react

or
yarn add @codesandbox/sandpack-react

Next, import the Sandpack playground and render it using the following code:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

The <Sandpack /> component sets up an empty playground for you to jump right in. By default, the playground contains a basic React template. Let's look at basic props to customize the templates, themes, and more:

• template: This property accepts a predefined list of templates. By default, vanilla is set.
• files: This is a very useful property. You can create multiple files with custom code, similar to a regular folder structure. The files object contains a value (the relative file path) and the key (file content). The files in this object are then automatically shown in the tabs as well.
• options: You can customize several features using the options object. You can view the full list here. Some of the most useful ones include:
  • showLineNumbers: Toggle the visibility of line numbers.
  • showTabs: Toggle the visibility of the tabs.
  • classes: You can assign custom class names to existing template classes for further customization.
• dependencies: The dependencies object can contain any NPM package needed by the app. The format and syntax are similar to those of a package.json file.
• theme: You can chose a pre-built theme or assign a completely custom theme.

Customizing the PlayGround

Let's tweak the default playground to fit our style and create a fun example to play around with. Customizing the editor to match your site theme can make it blend seamlessly and not feel like a third-party embed. First, let's use the files prop to create a simple counter button. Besides the App.js file, we'll also create the App.css file.

Have a look at the example and code below:

In this example, a counter component is rendered in the playground. The files object contains the code for both App.js and App.css. We've chosen a theme from the pre-built list mentioned earlier, sourced from sandpack-themes, adding a touch of style. Line numbers have been set to true as well.

Additionally, you can easily customize the layout of the playground. This can be done by either applying custom classes or utilizing the pre-built options that SandPack provides. For instance, you can use custom classes like this:

<Sandpack
  theme={theme}
  template="react"
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

You can then tweak the appearance and layout using CSS, giving you much more control over the visual design.

Another useful feature is the ability to switch between different layout modes. SandPack offers three modes: preview, tests, and console. The default mode is preview, while the tests mode provides a suite for running tests and the console mode renders a terminal/console component instead of a preview window. The console mode is useful for displaying outputs of server side logic. You can also switch the layout direction using the rtl (Right to left layout) option.

Customizing the Output

Besides the editor itself, the output display can be customized as well. For instance, you can choose to show or hide the console, change the layout, or even modify the appearance of the preview window. Pretty cool right!. Code editors often have heavily customized editing windows, but the actual output is not paid attention to as much.

The console displays all sorts of errors and console logs. Depending on the type of code snippet being showcased, you'd either want to show or hide the console. You can also toggle the visibility of the show console button. By default, the console is hidden. As with all the SandPack components, the styling can be individually modified using custom CSS classes.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showConsole: true,
    showConsoleButton: true,
  }}
/>;

Besides the console, the display window itself can be customized as well. For example, you can turn the navigator bar on or off with the showNavigator option and decide if you want the panels to be resizable with the resizablePanels option.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showLineNumbers: true,
    showNavigator: true,
    resizablePanels: true,
  }}
/>

The result will look somewhat like this:

Conclusion

Sandpack isn't just easy to use—it's also super customizable. This makes it a great choice for blogs, documentation, or any platform where live code editing adds value, while still allowing developers to customize it based on their sites.

You can check the detailed version of this article here

Thanks for reading!