Using Sandpack, your custom CodeSandbox

For a while I wanted to embed code with previews in a good way in this website. I finally spent a couple of hours adding Sandpack ↗︎ to it.

export default function App() { 
  return (
    <>
      <h1>VANCOUVER</h1>
      <h2>CANADA</h2>
    </>
  );
};

Sandpack is the playground used by CodeSandbox ↗︎. It uses different templates (react, react-ts, vue, vanilla, etc) and it supports different themes (I'm a big fan of the GitHub light theme).

I am not going to write a tutorial about adding Sandpack in a React app because Joshua Comeau ↗︎ and Chris Nicholas ↗︎ already did a great job showing how to interact with the components. Their posts were very helpful to add to the good documentation of the project. Despite not writing a tutorial, I can still show what I did if you check this website repository. Or you can read the Pull Request.

I initially thought in creating something more elaborated with resizable panels ↗︎ and custom toolbars like Joshua did but I ended up with something smaller.