Kempo: Build Your Own Code Playgrounds Using Sandpack

Hey everyone!

I've been working on a side project called Kempo. It's a tool that lets you create custom coding playgrounds, which you can embed in blogs, documentation, or other teaching resources.

It's built on top of Sandpack

Kempo is powered by CodeSandbox's Sandpack live coding editor. Here is what it looks like:

So why not just use Sandpack or CodeSandbox directly?

For starters, Sandpack is an npm package that exposes a React component that lets you build these custom editors. The problem is that on a blogging platform like Hashnode, you don't have the flexibility to insert your own React components in your blogs. Even if you could, you'd have to spend time designing and customizing the editor experience.

On the other hand, while CodeSandbox does let you embed code playgrounds, you don't have much flexibility in terms of how your playground looks.

Kempo allows different layouts based on screen size

For example, on desktop screens, you might want to display an editor and a preview panel that are split vertically:

However, on a mobile screen, you might want to display the same content, but split it horizontally instead, since there is less screen space available:

Note: The examples above are designed to show different layout views and do not change based on screen size.

With Kempo, this is easy to do using Kempo's Layout Editor:

You can define different layouts for three screen sizes (small, medium, and large).

You can also use this feature to highlight different parts of your playground. For example, you might want to show the preview first, which you can do by setting it first in the Layout Editor:

Kempo supports different components

For now, Kempo supports the following Sandpack components:

1. Editor

2. Preview

3. Console

You've already seen the Editor and Preview components in the examples above. The Console is a lightweight version of the browser console that lets you print logs from your editor:

Try changing the log statement above to see how the logs update.

Kempo supports different themes

Kempo offers four built-in themes that let you customize your playgrounds to better suit your needs. You can choose your theme on the project settings page:

Here's an example of the Dracula theme:

And here's one with the Gruvbox (Dark) Theme:

Next Steps

While Kempo is still a work in progress, I plan to use it for my blog. I also plan to keep building in public and share more updates about the technical details behind its features and the challenges I encounter.

If you're interested in checking it out, you can get started at Kempo.io.