Kempo

Kempo

Customized Code Playgrounds Powered by Sandpack

70 followers

Visit website
•
•
•
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.
Kempo gallery image
Kempo gallery image
Kempo gallery image
Kempo gallery image
Kempo gallery image
Free Options
Launch tags:SaaS•Software Engineering•Developer Tools
Launch Team / Built With
Anima Playground
AI with an Eye for Design
Promoted

What do you think? …

Sai
Kempo
Maker
📌
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!
Linda Robinson
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!
Sai
Kempo
Maker
Hey @lindarobinson2! You don't need any coding skills to get set up. You can try it out without having to sign up directly from Kempo's homepage.
Naman Kumar
It's great that you made it compatible with smaller screen sizes too.
Sai
Kempo
Maker
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.
Naman Kumar
@thesshguy It is still good. Nobody makes anything perfect in the first go .
Andriy Semenets
DepsHub
Congratulations on the launch! What would you say is the biggest difference of this product from its competitors? Thanks.
Sai
Kempo
Maker
Hey @semanser! Thanks for the kind words. I'd say the biggest difference is being able to customize your layout in whichever configuration you want. Here are a few examples: - You might want to show a code Editor in read-only mode without a Preview to explain a piece of code - You might want to emphasize your demo's console output, so you put an Editor/Preview on the top half of your layout and a Console on the entire bottom half of your layout - You might want to show 2 different pages in the same demo, so you use 2 Preview components in your layout that start up with different URLs for each of the pages - You might want to make your Editor/Preview laid out top to bottom on small screens and laid out side to side on large screens because there's less screen real estate on small screens Hope this helps!
Rithik Gireesh
Kempo could revolutionize how we showcase live coding on websites. 🌟
Toshit Garg
Congrats on launch of Kempo....
Ishaq Oyiza
Hi there This tool looks really useful for adding live secret writing to blogs and docs. Can it work with platforms like WordPress?
Sai
Kempo
Maker
Hey @ishaq_oyiza! In theory, it should work on WordPress. You should be able to paste something like the following in your blog and things should work: "" That said, I tried to create a free WordPress account to demo it, but it looks like you need a paid plan to embed iframes in your blog, so while I think it should work, I can't confirm it.
12
Next
Last