# Kempo: Build Your Own Code Playgrounds Using Sandpack

%%[kempo] 

Hey everyone!

I've been working on a side project called Kempo. It's a tool that lets you create custom coding playgrounds, which you can embed in blogs, documentation, or other teaching resources.

## It's built on top of Sandpack

Kempo is powered by CodeSandbox's [Sandpack](https://sandpack.codesandbox.io/) live coding editor. Here is what it looks like:

<iframe height="500px" width="100%" src="https://kempo.io/view/eyJpZCI6ImtsX253NzFwbGY4NHQ5ZGdtaWV1N3pyazF6MSIsIm5hbWUiOiJNeSBQcm9qZWN0IiwiY29yZSI6eyJmaWxlcyI6eyIvc3R5bGVzLmNzcyI6eyJjb2RlIjoiYm9keSB7XG4gIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xuICBmb250LXNtb290aGluZzogYXV0bztcbiAgdGV4dC1yZW5kZXJpbmc6IG9wdGltaXplTGVnaWJpbGl0eTtcbiAgZm9udC1zbW9vdGg6IGFsd2F5cztcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lO1xufVxuXG5oMSB7XG4gIGZvbnQtc2l6ZTogMS41cmVtO1xufSJ9LCIvQXBwLmpzIjp7ImNvZGUiOiJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiA8aDE+SGVsbG8gS2VtcG8hPC9oMT5cbn1cbiJ9LCIvaW5kZXguanMiOnsiY29kZSI6ImltcG9ydCBSZWFjdCwgeyBTdHJpY3RNb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVSb290IH0gZnJvbSBcInJlYWN0LWRvbS9jbGllbnRcIjtcbmltcG9ydCBcIi4vc3R5bGVzLmNzc1wiO1xuXG5pbXBvcnQgQXBwIGZyb20gXCIuL0FwcFwiO1xuXG5jb25zdCByb290ID0gY3JlYXRlUm9vdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcInJvb3RcIikpO1xucm9vdC5yZW5kZXIoXG4gIDxTdHJpY3RNb2RlPlxuICAgIDxBcHAgLz5cbiAgPC9TdHJpY3RNb2RlPlxuKTsifSwiL3B1YmxpYy9pbmRleC5odG1sIjp7ImNvZGUiOiI8IURPQ1RZUEUgaHRtbD5cbjxodG1sIGxhbmc9XCJlblwiPlxuICA8aGVhZD5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5Eb2N1bWVudDwvdGl0bGU+XG4gIDwvaGVhZD5cbiAgPGJvZHk+XG4gICAgPGRpdiBpZD1cInJvb3RcIj48L2Rpdj5cbiAgPC9ib2R5PlxuPC9odG1sPiJ9LCIvcGFja2FnZS5qc29uIjp7ImNvZGUiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcInJlYWN0XCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3Qtc2NyaXB0c1wiOiBcIl41LjAuMFwiXG4gIH0sXG4gIFwibWFpblwiOiBcIi9pbmRleC5qc1wiLFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7fVxufSJ9fSwidGVtcGxhdGUiOiJyZWFjdCJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjpmYWxzZSwic2hvd1NhbmRwYWNrRXJyb3JPdmVybGF5IjpmYWxzZX19fSwiZ2VuZXJhbCI6eyJ2aXNpYmxlRmlsZXMiOlsiL0FwcC5qcyJdLCJ0aGVtZSI6ImtlbXBvRGFyayJ9LCJsYXlvdXRzIjp7InNtYWxsIjoiJ0VkaXRvcidcbidQcmV2aWV3JyJ9fX0="></iframe>

So why not just use Sandpack or CodeSandbox directly?

For starters, Sandpack is an npm package that exposes a React component that lets you build these custom editors. The problem is that on a blogging platform like Hashnode, you don't have the flexibility to insert your *own* React components in your blogs. Even if you could, you'd have to spend time designing and customizing the editor experience.

On the other hand, while CodeSandbox *does* let you embed code playgrounds, you don't have much flexibility in terms of how your playground *looks*.

## Kempo allows different layouts based on screen size

For example, on desktop screens, you might want to display an editor and a preview panel that are split vertically:

<iframe height="500px" width="100%" src="https://kempo.io/view/eyJpZCI6ImtsX253NzFwbGY4NHQ5ZGdtaWV1N3pyazF6MSIsIm5hbWUiOiJNeSBQcm9qZWN0IiwiY29yZSI6eyJmaWxlcyI6eyIvc3R5bGVzLmNzcyI6eyJjb2RlIjoiYm9keSB7XG4gIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xuICBmb250LXNtb290aGluZzogYXV0bztcbiAgdGV4dC1yZW5kZXJpbmc6IG9wdGltaXplTGVnaWJpbGl0eTtcbiAgZm9udC1zbW9vdGg6IGFsd2F5cztcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lO1xufVxuXG5oMSB7XG4gIGZvbnQtc2l6ZTogMS41cmVtO1xufSJ9LCIvQXBwLmpzIjp7ImNvZGUiOiJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiA8aDE+SSdtIHNwbGl0IHZlcnRpY2FsbHkhPC9oMT5cbn1cbiJ9LCIvaW5kZXguanMiOnsiY29kZSI6ImltcG9ydCBSZWFjdCwgeyBTdHJpY3RNb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVSb290IH0gZnJvbSBcInJlYWN0LWRvbS9jbGllbnRcIjtcbmltcG9ydCBcIi4vc3R5bGVzLmNzc1wiO1xuXG5pbXBvcnQgQXBwIGZyb20gXCIuL0FwcFwiO1xuXG5jb25zdCByb290ID0gY3JlYXRlUm9vdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcInJvb3RcIikpO1xucm9vdC5yZW5kZXIoXG4gIDxTdHJpY3RNb2RlPlxuICAgIDxBcHAgLz5cbiAgPC9TdHJpY3RNb2RlPlxuKTsifSwiL3B1YmxpYy9pbmRleC5odG1sIjp7ImNvZGUiOiI8IURPQ1RZUEUgaHRtbD5cbjxodG1sIGxhbmc9XCJlblwiPlxuICA8aGVhZD5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5Eb2N1bWVudDwvdGl0bGU+XG4gIDwvaGVhZD5cbiAgPGJvZHk+XG4gICAgPGRpdiBpZD1cInJvb3RcIj48L2Rpdj5cbiAgPC9ib2R5PlxuPC9odG1sPiJ9LCIvcGFja2FnZS5qc29uIjp7ImNvZGUiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcInJlYWN0XCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3Qtc2NyaXB0c1wiOiBcIl41LjAuMFwiXG4gIH0sXG4gIFwibWFpblwiOiBcIi9pbmRleC5qc1wiLFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7fVxufSJ9fSwidGVtcGxhdGUiOiJyZWFjdCJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjpmYWxzZSwic2hvd1NhbmRwYWNrRXJyb3JPdmVybGF5IjpmYWxzZX19fSwiZ2VuZXJhbCI6eyJ2aXNpYmxlRmlsZXMiOlsiL0FwcC5qcyJdLCJ0aGVtZSI6ImtlbXBvRGFyayJ9LCJsYXlvdXRzIjp7InNtYWxsIjoiJ0VkaXRvciBQcmV2aWV3JyJ9fX0="></iframe>

However, on a mobile screen, you might want to display the same content, but split it horizontally instead, since there is less screen space available:

<iframe height="500px" width="100%" src="https://kempo.io/view/eyJpZCI6ImtsX253NzFwbGY4NHQ5ZGdtaWV1N3pyazF6MSIsIm5hbWUiOiJNeSBQcm9qZWN0IiwiY29yZSI6eyJmaWxlcyI6eyIvc3R5bGVzLmNzcyI6eyJjb2RlIjoiYm9keSB7XG4gIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xuICBmb250LXNtb290aGluZzogYXV0bztcbiAgdGV4dC1yZW5kZXJpbmc6IG9wdGltaXplTGVnaWJpbGl0eTtcbiAgZm9udC1zbW9vdGg6IGFsd2F5cztcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lO1xufVxuXG5oMSB7XG4gIGZvbnQtc2l6ZTogMS41cmVtO1xufSJ9LCIvQXBwLmpzIjp7ImNvZGUiOiJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiA8aDE+SSdtIHNwbGl0IGhvcml6b250YWxseSE8L2gxPlxufVxuIn0sIi9pbmRleC5qcyI6eyJjb2RlIjoiaW1wb3J0IFJlYWN0LCB7IFN0cmljdE1vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNyZWF0ZVJvb3QgfSBmcm9tIFwicmVhY3QtZG9tL2NsaWVudFwiO1xuaW1wb3J0IFwiLi9zdHlsZXMuY3NzXCI7XG5cbmltcG9ydCBBcHAgZnJvbSBcIi4vQXBwXCI7XG5cbmNvbnN0IHJvb3QgPSBjcmVhdGVSb290KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwicm9vdFwiKSk7XG5yb290LnJlbmRlcihcbiAgPFN0cmljdE1vZGU+XG4gICAgPEFwcCAvPlxuICA8L1N0cmljdE1vZGU+XG4pOyJ9LCIvcHVibGljL2luZGV4Lmh0bWwiOnsiY29kZSI6IjwhRE9DVFlQRSBodG1sPlxuPGh0bWwgbGFuZz1cImVuXCI+XG4gIDxoZWFkPlxuICAgIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiPlxuICAgIDxtZXRhIG5hbWU9XCJ2aWV3cG9ydFwiIGNvbnRlbnQ9XCJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wXCI+XG4gICAgPHRpdGxlPkRvY3VtZW50PC90aXRsZT5cbiAgPC9oZWFkPlxuICA8Ym9keT5cbiAgICA8ZGl2IGlkPVwicm9vdFwiPjwvZGl2PlxuICA8L2JvZHk+XG48L2h0bWw+In0sIi9wYWNrYWdlLmpzb24iOnsiY29kZSI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwicmVhY3RcIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1kb21cIjogXCJeMTguMC4wXCIsXG4gICAgXCJyZWFjdC1zY3JpcHRzXCI6IFwiXjUuMC4wXCJcbiAgfSxcbiAgXCJtYWluXCI6IFwiL2luZGV4LmpzXCIsXG4gIFwiZGV2RGVwZW5kZW5jaWVzXCI6IHt9XG59In19LCJ0ZW1wbGF0ZSI6InJlYWN0In0sImRpc3BsYXkiOnsiY29tcG9uZW50cyI6eyJFZGl0b3IiOnsidHlwZSI6ImVkaXRvciIsImRhdGEiOnsic2hvd1RhYnMiOnRydWUsInNob3dMaW5lTnVtYmVycyI6dHJ1ZSwic2hvd0lubGluZUVycm9ycyI6ZmFsc2UsInNob3dSdW5CdXR0b24iOnRydWUsIndyYXBDb250ZW50Ijp0cnVlLCJjbG9zYWJsZVRhYnMiOnRydWUsInJlYWRPbmx5IjpmYWxzZSwic2hvd1JlYWRPbmx5IjpmYWxzZX19LCJQcmV2aWV3Ijp7InR5cGUiOiJwcmV2aWV3IiwiZGF0YSI6eyJzaG93TmF2aWdhdG9yIjpmYWxzZSwic2hvd09wZW5JbkNvZGVTYW5kYm94IjpmYWxzZSwic2hvd1JlZnJlc2hCdXR0b24iOmZhbHNlLCJzaG93U2FuZHBhY2tFcnJvck92ZXJsYXkiOmZhbHNlfX19LCJnZW5lcmFsIjp7InZpc2libGVGaWxlcyI6WyIvQXBwLmpzIl0sInRoZW1lIjoia2VtcG9EYXJrIn0sImxheW91dHMiOnsic21hbGwiOiInRWRpdG9yJ1xuJ1ByZXZpZXcnIn19fQ=="></iframe>

> Note: The examples above are designed to show different layout views and do not change based on screen size.

With Kempo, this is easy to do using Kempo's ***Layout Editor***:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715666715826/84604ff4-0830-4fa7-9d5f-960b802c28c7.png align="center")

You can define different layouts for three screen sizes (`small`, `medium`, and `large`).

You can also use this feature to highlight different parts of your playground. For example, you might want to show the preview first, which you can do by setting it first in the ***Layout Editor***:

<iframe height="500px" width="100%" src="https://kempo.io/view/eyJpZCI6ImtsX253NzFwbGY4NHQ5ZGdtaWV1N3pyazF6MSIsIm5hbWUiOiJNeSBQcm9qZWN0IiwiY29yZSI6eyJmaWxlcyI6eyIvc3R5bGVzLmNzcyI6eyJjb2RlIjoiYm9keSB7XG4gIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xuICBmb250LXNtb290aGluZzogYXV0bztcbiAgdGV4dC1yZW5kZXJpbmc6IG9wdGltaXplTGVnaWJpbGl0eTtcbiAgZm9udC1zbW9vdGg6IGFsd2F5cztcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lO1xufVxuXG5oMSB7XG4gIGZvbnQtc2l6ZTogMS41cmVtO1xufSJ9LCIvQXBwLmpzIjp7ImNvZGUiOiJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiA8aDE+UHJldmlldyBvbiB0b3AhPC9oMT5cbn1cbiJ9LCIvaW5kZXguanMiOnsiY29kZSI6ImltcG9ydCBSZWFjdCwgeyBTdHJpY3RNb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVSb290IH0gZnJvbSBcInJlYWN0LWRvbS9jbGllbnRcIjtcbmltcG9ydCBcIi4vc3R5bGVzLmNzc1wiO1xuXG5pbXBvcnQgQXBwIGZyb20gXCIuL0FwcFwiO1xuXG5jb25zdCByb290ID0gY3JlYXRlUm9vdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcInJvb3RcIikpO1xucm9vdC5yZW5kZXIoXG4gIDxTdHJpY3RNb2RlPlxuICAgIDxBcHAgLz5cbiAgPC9TdHJpY3RNb2RlPlxuKTsifSwiL3B1YmxpYy9pbmRleC5odG1sIjp7ImNvZGUiOiI8IURPQ1RZUEUgaHRtbD5cbjxodG1sIGxhbmc9XCJlblwiPlxuICA8aGVhZD5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5Eb2N1bWVudDwvdGl0bGU+XG4gIDwvaGVhZD5cbiAgPGJvZHk+XG4gICAgPGRpdiBpZD1cInJvb3RcIj48L2Rpdj5cbiAgPC9ib2R5PlxuPC9odG1sPiJ9LCIvcGFja2FnZS5qc29uIjp7ImNvZGUiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcInJlYWN0XCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3Qtc2NyaXB0c1wiOiBcIl41LjAuMFwiXG4gIH0sXG4gIFwibWFpblwiOiBcIi9pbmRleC5qc1wiLFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7fVxufSJ9fSwidGVtcGxhdGUiOiJyZWFjdCJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjpmYWxzZSwic2hvd1NhbmRwYWNrRXJyb3JPdmVybGF5IjpmYWxzZX19fSwiZ2VuZXJhbCI6eyJ2aXNpYmxlRmlsZXMiOlsiL0FwcC5qcyJdLCJ0aGVtZSI6ImtlbXBvRGFyayJ9LCJsYXlvdXRzIjp7InNtYWxsIjoiJ1ByZXZpZXcnXG4nRWRpdG9yJyJ9fX0="></iframe>

## Kempo supports different components

For now, Kempo supports the following Sandpack components:

1. [Editor](https://sandpack.codesandbox.io/docs/advanced-usage/components#code-editor)
    
2. [Preview](https://sandpack.codesandbox.io/docs/advanced-usage/components#preview)
    
3. [Console](https://sandpack.codesandbox.io/docs/advanced-usage/components#console)
    

You've already seen the **Editor** and **Preview** components in the examples above. The **Console** is a lightweight version of the browser console that lets you print logs from your editor:

<iframe height="500px" width="100%" src="https://kempo.io/view/eyJpZCI6ImtsX2hjdzVpM3ZycGYyMTN0cXludWttcDh6OCIsIm5hbWUiOiJUZXN0IFRTIiwiY29yZSI6eyJmaWxlcyI6eyIvc3R5bGVzLmNzcyI6eyJjb2RlIjoiYm9keSB7XG4gIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xuICBmb250LXNtb290aGluZzogYXV0bztcbiAgdGV4dC1yZW5kZXJpbmc6IG9wdGltaXplTGVnaWJpbGl0eTtcbiAgZm9udC1zbW9vdGg6IGFsd2F5cztcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lO1xufVxuXG5oMSB7XG4gIGZvbnQtc2l6ZTogMS41cmVtO1xufSJ9LCIvdHNjb25maWcuanNvbiI6eyJjb2RlIjoie1xuICBcImNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJzdHJpY3RcIjogdHJ1ZSxcbiAgICBcIm1vZHVsZVwiOiBcImNvbW1vbmpzXCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwiZXNNb2R1bGVJbnRlcm9wXCI6IHRydWUsXG4gICAgXCJzb3VyY2VNYXBcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImxpYlwiOiBbXG4gICAgICBcImVzNlwiLFxuICAgICAgXCJkb21cIlxuICAgIF0sXG4gICAgXCJyb290RGlyXCI6IFwic3JjXCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwibm9kZVwiXG4gIH1cbn0ifSwiL2luZGV4LnRzIjp7ImNvZGUiOiJpbXBvcnQgXCIuL3N0eWxlcy5jc3NcIjtcblxuY29uc29sZS5sb2coXCJJIGFtIGEgbG9nXCIpO1xuXG5kb2N1bWVudC5nZXRFbGVtZW50QnlJZChcImFwcFwiKS5pbm5lckhUTUwgPSBgXG48aDE+Q2hlY2sgdGhlIGNvbnNvbGU8L2gxPlxuYDtcbiJ9LCIvaW5kZXguaHRtbCI6eyJjb2RlIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbD5cblxuPGhlYWQ+XG4gIDx0aXRsZT5QYXJjZWwgU2FuZGJveDwvdGl0bGU+XG4gIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiIC8+XG48L2hlYWQ+XG5cbjxib2R5PlxuICA8ZGl2IGlkPVwiYXBwXCI+PC9kaXY+XG5cbiAgPHNjcmlwdCBzcmM9XCJpbmRleC50c1wiPlxuICA8L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPiJ9LCIvcGFja2FnZS5qc29uIjp7ImNvZGUiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHt9LFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJ0eXBlc2NyaXB0XCI6IFwiXjQuMC4wXCJcbiAgfSxcbiAgXCJtYWluXCI6IFwiL2luZGV4LnRzXCJcbn0ifX0sInRlbXBsYXRlIjoidmFuaWxsYS10cyJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjpmYWxzZSwic2hvd1NhbmRwYWNrRXJyb3JPdmVybGF5IjpmYWxzZX19LCJDb25zb2xlIjp7InR5cGUiOiJjb25zb2xlIiwiZGF0YSI6eyJzaG93SGVhZGVyIjpmYWxzZSwic2hvd1N5bnRheEVycm9yIjpmYWxzZSwic2hvd1NldHVwUHJvZ3Jlc3MiOmZhbHNlLCJtYXhNZXNzYWdlQ291bnQiOjEsInJlc2V0T25QcmV2aWV3UmVzdGFydCI6ZmFsc2UsInN0YW5kYWxvbmUiOmZhbHNlfX19LCJnZW5lcmFsIjp7InZpc2libGVGaWxlcyI6WyIvaW5kZXgudHMiXSwidGhlbWUiOiJrZW1wb0RhcmsifSwibGF5b3V0cyI6eyJzbWFsbCI6IidFZGl0b3IgRWRpdG9yJ1xuJ1ByZXZpZXcgQ29uc29sZScifX19"></iframe>

Try changing the log statement above to see how the logs update.

## Kempo supports different themes

Kempo offers four built-in themes that let you customize your playgrounds to better suit your needs. You can choose your theme on the project settings page:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715705906161/2557398f-4db3-427a-9c61-2b0db6a50e6d.png align="center")

Here's an example of the Dracula theme:

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX253NzFwbGY4NHQ5ZGdtaWV1N3pyazF6MSIsIm5hbWUiOiJNeSBQcm9qZWN0IiwiY29yZSI6eyJmaWxlcyI6eyIvc3R5bGVzLmNzcyI6eyJjb2RlIjoiYm9keSB7XG4gIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xuICBmb250LXNtb290aGluZzogYXV0bztcbiAgdGV4dC1yZW5kZXJpbmc6IG9wdGltaXplTGVnaWJpbGl0eTtcbiAgZm9udC1zbW9vdGg6IGFsd2F5cztcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lO1xufVxuXG5oMSB7XG4gIGZvbnQtc2l6ZTogMS41cmVtO1xufSJ9LCIvQXBwLmpzIjp7ImNvZGUiOiJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiA8aDE+RHJhY3VsYSBUaGVtZSE8L2gxPjtcbn1cbiJ9LCIvaW5kZXguanMiOnsiY29kZSI6ImltcG9ydCBSZWFjdCwgeyBTdHJpY3RNb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVSb290IH0gZnJvbSBcInJlYWN0LWRvbS9jbGllbnRcIjtcbmltcG9ydCBcIi4vc3R5bGVzLmNzc1wiO1xuXG5pbXBvcnQgQXBwIGZyb20gXCIuL0FwcFwiO1xuXG5jb25zdCByb290ID0gY3JlYXRlUm9vdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcInJvb3RcIikpO1xucm9vdC5yZW5kZXIoXG4gIDxTdHJpY3RNb2RlPlxuICAgIDxBcHAgLz5cbiAgPC9TdHJpY3RNb2RlPlxuKTsifSwiL3B1YmxpYy9pbmRleC5odG1sIjp7ImNvZGUiOiI8IURPQ1RZUEUgaHRtbD5cbjxodG1sIGxhbmc9XCJlblwiPlxuICA8aGVhZD5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5Eb2N1bWVudDwvdGl0bGU+XG4gIDwvaGVhZD5cbiAgPGJvZHk+XG4gICAgPGRpdiBpZD1cInJvb3RcIj48L2Rpdj5cbiAgPC9ib2R5PlxuPC9odG1sPiJ9LCIvcGFja2FnZS5qc29uIjp7ImNvZGUiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcInJlYWN0XCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3Qtc2NyaXB0c1wiOiBcIl41LjAuMFwiXG4gIH0sXG4gIFwibWFpblwiOiBcIi9pbmRleC5qc1wiLFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7fVxufSJ9fSwidGVtcGxhdGUiOiJyZWFjdCJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjpmYWxzZSwic2hvd1NhbmRwYWNrRXJyb3JPdmVybGF5IjpmYWxzZX19LCJDb25zb2xlIjp7InR5cGUiOiJjb25zb2xlIiwiZGF0YSI6eyJzaG93SGVhZGVyIjpmYWxzZSwic2hvd1N5bnRheEVycm9yIjpmYWxzZSwic2hvd1NldHVwUHJvZ3Jlc3MiOmZhbHNlLCJtYXhNZXNzYWdlQ291bnQiOjEsInJlc2V0T25QcmV2aWV3UmVzdGFydCI6ZmFsc2UsInN0YW5kYWxvbmUiOmZhbHNlfX19LCJnZW5lcmFsIjp7InZpc2libGVGaWxlcyI6WyIvQXBwLmpzIl0sInRoZW1lIjoiZHJhY3VsYSJ9LCJsYXlvdXRzIjp7InNtYWxsIjoiJ0VkaXRvcidcbidQcmV2aWV3JyJ9fX0=" height="500px" width="100%"></iframe>

And here's one with the Gruvbox (Dark) Theme:

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX253NzFwbGY4NHQ5ZGdtaWV1N3pyazF6MSIsIm5hbWUiOiJNeSBQcm9qZWN0IiwiY29yZSI6eyJmaWxlcyI6eyIvc3R5bGVzLmNzcyI6eyJjb2RlIjoiYm9keSB7XG4gIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xuICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LWZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xuICBmb250LXNtb290aGluZzogYXV0bztcbiAgdGV4dC1yZW5kZXJpbmc6IG9wdGltaXplTGVnaWJpbGl0eTtcbiAgZm9udC1zbW9vdGg6IGFsd2F5cztcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lO1xufVxuXG5oMSB7XG4gIGZvbnQtc2l6ZTogMS41cmVtO1xufSJ9LCIvQXBwLmpzIjp7ImNvZGUiOiJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiA8aDE+R3J1dmJveCAoRGFyaykgVGhlbWUhPC9oMT47XG59XG4ifSwiL2luZGV4LmpzIjp7ImNvZGUiOiJpbXBvcnQgUmVhY3QsIHsgU3RyaWN0TW9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gXCJyZWFjdC1kb20vY2xpZW50XCI7XG5pbXBvcnQgXCIuL3N0eWxlcy5jc3NcIjtcblxuaW1wb3J0IEFwcCBmcm9tIFwiLi9BcHBcIjtcblxuY29uc3Qgcm9vdCA9IGNyZWF0ZVJvb3QoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJyb290XCIpKTtcbnJvb3QucmVuZGVyKFxuICA8U3RyaWN0TW9kZT5cbiAgICA8QXBwIC8+XG4gIDwvU3RyaWN0TW9kZT5cbik7In0sIi9wdWJsaWMvaW5kZXguaHRtbCI6eyJjb2RlIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbCBsYW5nPVwiZW5cIj5cbiAgPGhlYWQ+XG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI+XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPlxuICA8L2hlYWQ+XG4gIDxib2R5PlxuICAgIDxkaXYgaWQ9XCJyb290XCI+PC9kaXY+XG4gIDwvYm9keT5cbjwvaHRtbD4ifSwiL3BhY2thZ2UuanNvbiI6eyJjb2RlIjoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LXNjcmlwdHNcIjogXCJeNS4wLjBcIlxuICB9LFxuICBcIm1haW5cIjogXCIvaW5kZXguanNcIixcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge31cbn0ifX0sInRlbXBsYXRlIjoicmVhY3QifSwiZGlzcGxheSI6eyJjb21wb25lbnRzIjp7IkVkaXRvciI6eyJ0eXBlIjoiZWRpdG9yIiwiZGF0YSI6eyJzaG93VGFicyI6dHJ1ZSwic2hvd0xpbmVOdW1iZXJzIjp0cnVlLCJzaG93SW5saW5lRXJyb3JzIjpmYWxzZSwic2hvd1J1bkJ1dHRvbiI6dHJ1ZSwid3JhcENvbnRlbnQiOnRydWUsImNsb3NhYmxlVGFicyI6dHJ1ZSwicmVhZE9ubHkiOmZhbHNlLCJzaG93UmVhZE9ubHkiOmZhbHNlfX0sIlByZXZpZXciOnsidHlwZSI6InByZXZpZXciLCJkYXRhIjp7InNob3dOYXZpZ2F0b3IiOmZhbHNlLCJzaG93T3BlbkluQ29kZVNhbmRib3giOmZhbHNlLCJzaG93UmVmcmVzaEJ1dHRvbiI6ZmFsc2UsInNob3dTYW5kcGFja0Vycm9yT3ZlcmxheSI6ZmFsc2V9fSwiQ29uc29sZSI6eyJ0eXBlIjoiY29uc29sZSIsImRhdGEiOnsic2hvd0hlYWRlciI6ZmFsc2UsInNob3dTeW50YXhFcnJvciI6ZmFsc2UsInNob3dTZXR1cFByb2dyZXNzIjpmYWxzZSwibWF4TWVzc2FnZUNvdW50IjoxLCJyZXNldE9uUHJldmlld1Jlc3RhcnQiOmZhbHNlLCJzdGFuZGFsb25lIjpmYWxzZX19fSwiZ2VuZXJhbCI6eyJ2aXNpYmxlRmlsZXMiOlsiL0FwcC5qcyJdLCJ0aGVtZSI6ImdydXZib3hEYXJrIn0sImxheW91dHMiOnsic21hbGwiOiInRWRpdG9yJ1xuJ1ByZXZpZXcnIn19fQ==" height="500px" width="100%"></iframe>

## Next Steps

While Kempo is still a work in progress, I plan to use it for my blog. I also plan to keep building in public and share more updates about the technical details behind its features and the challenges I encounter.

If you're interested in checking it out, you can get started at [Kempo.io](https://kempo.io).