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.
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.