Kempo

Kempo lets you build live coding experiences like CodeSandbox or Stackblitz but with additional customization options. You can control the layout based on the viewer’s screen size, theme, and branding so that your code examples seamlessly blend with the rest of your website. Kempo is built on top of Sandpack which is powered by the same bundler used for CodeSandbox.

I built Kempo because I wanted a way to embed code demos in my blog. While there are already solutions for this (e.g. CodeSandbox), I noticed my demos didn't look so great on smaller screens (e.g. mobile devices).

My next thought was that what if I could provide a different experience based on the viewer's screen size. For example, maybe on mobile devices I could show an editor and preview laid out on top of each other, but on larger devices, I could show the same thing but laid out side by side.

At the same time, I started to notice some blogs and documentation websites (e.g. React docs) start to use Sandpack which is a light-weight live code editor built by the CodeSandbox team. The CodeSandbox team released a React package that wraps Sandpack, making it easy to use it in React applications.

Sounds great, but the problem is that my blog is hosted on Hashnode. In other words, I don't have control over the code that powers the blog, which means I can't use Sandpack directly.

So instead of that, I built Kempo, which at its core is an application that lets you build Sandpack instances. From there, all I had to do was embed these instances in my blog and my problem was solved!

If you're curious about how Kempo works, I wrote a blog post introducing Kempo.