Kempo
Customized Code Playgrounds Powered by Sandpack
Start new thread
Sai

Kempo - Customized code playgrounds

by
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.

Add a comment

Replies

Best
Sai
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
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
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
Congratulations on the launch! What would you say is the biggest difference of this product from its competitors? Thanks.
Sai
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. 🌟
Luther Westover
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
Toshit Garg
Congrats on launch of Kempo....
Susan R. Pruitt
I really like the idea of personalized code playgrounds. It seems like a great way to test and learn. Good luck with it!
Sai
Maker
Thank you for the kind words @susan_r_pruitt!
Ill Robyn
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.
Sai
Maker
Thanks @ill_robyn! Glad you liked it! Was there anything you felt that was confusing or could be made better?
Mather Marker
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.
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
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.
Enyi Bassey
Congrats on the launch! I like that you can match the code examples to your website’s look.
Sai
Maker
Thanks for checking out Kempo @enyi_bassey!