Kempo

Customized Code Playgrounds Powered by Sandpack

70 followers

Customized Code Playgrounds Powered by Sandpack

70 followers

Visit website

Engineering & Development

•

Website builders

•

Code editors

•

UI frameworks

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.

Free Options

Launch tags:SaaS•Software Engineering•Developer Tools

Launch Team / Built With

Render Sandboxes: a computer for every agentGive every agent its own machine. Starts in under a second

Promoted

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!

Report

2yr ago

DepsHub

Congratulations on the launch! What would you say is the biggest difference of this product from its competitors? Thanks.

Report

2yr ago

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!

Report

2yr ago

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!

Report

2yr ago

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.

Report

2yr ago

It's great that you made it compatible with smaller screen sizes too.

Report

2yr ago

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.

Report

2yr ago

@thesshguy It is still good. Nobody makes anything perfect in the first go .

Report

2yr ago

Hi there This tool looks really useful for adding live secret writing to blogs and docs. Can it work with platforms like WordPress?

Report

2yr ago

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.

Report

2yr ago

Congrats on launch of Kempo....

Report

2yr ago

Kempo could revolutionize how we showcase live coding on websites. 🌟

Report

2yr ago

1 2

Reviews