Kempo lets you build customizable live coding experiences. 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 using CodeSandbox's Sandpack.
I built Kempo because I wanted a way to embed live code examples in my blog.
When I first started my blog, I reached for tools like CodeSandbox and Stackblitz (which are great!), but the challenge was that the examples didn't look so great on smaller screens (e.g. mobile). At the same time, I noticed a few blogs and documentation sites starting to use Sandpack (a lightweight live-code editor built by the CodeSandbox team) to build customized code playgrounds that seamlessly fit into their website (e.g. React docs).
My blog is hosted on Hashnode, so unfortunately I couldn't use Sandpack directly because I don't have control over the code that runs the site. So I did the next best thing I could think of, which was to build an app that lets you configure Sandpack instances. From there, all I had to do was embed these instances into my blog.
At its core, Kempo lets you define different layouts based on the screen size. This lets you give the reader a different experience based on how they view your content. For example, I might show an editor/preview in a vertical orientation on mobile screens and a horizontal orientation on larger screens. Kempo also lets you configure the theme and branding so that your editors blend in with the rest of your site better.
Anyway, this is my first time building/releasing something of my own, so any feedback would be greatly appreciated! Even if you hate it, I'd love to know why!
Hey @Sai! Kempo sounds awesome and just what I've been looking for. Quick question tho - do I need any coding skills to set it up? I'm pretty new to this and just wanna make sure it's user-friendly. Thanks!
Thanks for calling this out @naman_kumar14! I spent a lot of time trying to make the app make sense on smaller screens. It's not perfect but hopefully that shows.
Kempo
Kempo
Kempo