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.
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!
I’m looking forward to using this platform to create more engaging and interactive coding content. It seems like a great way to support both developers and learners
Congrats on your launch! I love how I can embed live code examples in my blog with ease. It’s a fantastic solution for developers who want to provide interactive content.
Great work! I’m excited about the ability to control the theme and branding of the live coding playgrounds. It ensures that the embedded code examples blend seamlessly with my website.
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.
Replies
Kempo
Kempo
Kempo
DepsHub
Kempo
Kempo
Kempo
Kempo
Kempo