Karagöz

Karagöz Sandbox

Boost your interactive code demos with the power of WebContainers.

Karagöz Puppeteer

Take your coding tutorials to the next level with a comprehensive UI.

A bit of history...

The name Karagöz refers to Karagöz and Hacivat, the lead characters of the traditional Turkish shadow play, popularized during the Ottoman period and then spread to most nation states of the Ottoman Empire.

Karagöz and Hacivat - Source: Wikipedia
Karagöz and Hacivat - Source: Wikipedia

It seemed fitting as a name considering that:

  • I'm Syrian and this art is part of my heritage.
  • The function of this toolset is for the curator to use the provided components to tell a story with code.

Besides, naming things is hard. I was happy to find a unique name and an available domain name 😅

But, why Vue.js?

My initial thought was to create a bunch of Web Components that can be used in any context. However, I quickly ran into the hurdles of my limited experience with the technology and high level or required interactivity and reactivity.

For that reason, as well as, Vue.js being my preferred framework, I opted to create the components specifically for it (at least for the time being).

A Web Component build using Vue and Vite is still possible, but it might have introduced challenges that I'm not ready to tackle at the moment.

So, give it a try & happy coding!