Why I Built My Custom Code Sandbox

I was initially content with my code blocks. The aesthetics were in line with my expectations, and they worked. But something bothered me. I've consumed a staggering amount of development content, tutorials, and tell-alls, but around 10% stuck with me.

The difference came down to interactivity. Sure, I can copy and paste with the best of them. Make a few tweaks, change a handful of variable names and types to fit my needs, and then pat myself on the back for a job well done. The feature works, so I move on. But returning to a handful of these snippets, I realized I had no idea why they work.

So, I decided to build a custom code sandbox using the lovely Sandpack dependency. This package was crafted by the equally lovely minds behind Codesandbox.io, and I have to say. They really laid it all out there. I mean all of it. You have access to a simple-to-use vanilla setup through Sandpack, but it also exposes a lot of lower-level components that give you complete control over the styling and functionality of your little environment.

This piece isn't exactly a tutorial, but rather, dissects the benefits of a code sandbox and the interactivity it provides. Rest assured, we'll cover Sandpack in depth in a future article.

That said, let's explore its basic capabilities.

What's a Code Sandbox?

import React, { useState } from 'react';
  import './styles.css';

  const TestButton = () => {
    const [count, setCount] = React.useState(0);

    return (
      <div style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
        }}
      >
        <button 
          onClick={() => setCount(count + 1)}
        >
          Count: {count}
        </button>
      </div>
    );
  };
  export default TestButton;

That amazes me. Obviously, not the counter. That's about as average as they come, but the sandbox itself. MDX is already incredibly modular and offers the best developer experience I've come across. Sandpack makes it feel complete.

A Brief Introduction to Sandpack

Now that it's been praised, let's dive into how it works. First, the <Sandpack /> component. This is your baseline, vanilla setup, which looks and works well out of the box.

It accepts four primary arguments:

• files, or the code displayed in each tab.
• template, or the language used. I commonly use react-ts, react, and javascript.
• theme, or style.
• options, which houses sub-arguments like customSetup.

1    import React from "react";
2    import Sandpack from "@codesandbox/sandpack-react";
3                 
4     const App = () => {
5         let files = {};
6 
7         return (
8           <Sandpack 
9             template="react-ts"
10             theme="dark"
11             files={{
12               // Note: All files must start with a backslash
13               "/App.tsx": `
14                 export default App () => {
15                   return <div>Hello World</div>;
16                 `
17               }
18             }}
19           />
20         );
21     };
22     
23     export default App;
24 

The above returns a default "Hello World" but also highlights the limitations of static code blocks. Both have their place, but some problems call for more engaging solutions.

Some Things Are Better Left Visual

This is particularly true for both CSS and IKEA furniture. In the below, try uncommenting out border-radius in styles.css. Like the great stonemasons of old, we chiseled off the rough edges to create a circle. Tinker with that border-radius value.

It doesn't need to be in pixels. Em, rem, and percentages work as well.

import Box from "./Box";
import React from "react";
import "./styles.css";

export default function App () {
  return (
    <div>
      <Box />
    </div>
  );
};

A Whimsical Floating Circle

Now, we have a nice circle. It's a bit red for my taste, but all the same. What if we wanted to make it "float"? We don't need fancy Javascript, as CSS does the trick. Go ahead and uncomment animation.

And... there it goes! Like a butterfly, our square emerged as a magnificent, floating circle. But let's break down what we did to get there.

• We crafted a circular div using border-radius. We chose a 100px radius or half of the element's height and width. For a math-free approach, use border-radius: 50%.
• Animation has a few moving parts. First, hoverEffect assigns a label to our animation.
• The animation lasts two seconds (2s), continuing infinitely (infinite) and alternating from top to bottom (alternate).
• Leaving us with: animation: hoverEffect 2s infinite alternate.

Again, play with these values and see how the animation morphs. The last piece of the puzzle is CSS @keyframes. These provide waypoints for our CSS to follow throughout the life-cycle of an animation. Above, you'll see I've added two intervals to our keyframes: 0% and 100%. In essence, a start and a stop.

Note that you can add as many intervals with additional animation logic as required. You're certainly not limited to zero and 100.

Earlier, we set the name hoverEffect in our animation. This allows us to use it as our aforementioned waypoint, ensuring our keyframes affect only the expected element.

Conclusion

An interactive sandbox is critical for tech-centric educational content. That's not to say nothing can be learned from static code blocks, but rather, a sandbox shows what a code block can only tell. We learn by doing, and a sandbox lets you do just that.

It's already becoming a staple in my method, and I don't see that changing anytime soon.

We'll dive deeper into animations in a complete guide, as it truly has too many variations for the scope of this piece. That said, hopefully, you learned something new or appreciated the approach!

This blog and I are works-in-progress, but we'll get there one interactive post at a time. Thanks for reading, scoffing, or just stopping by!