Introducing Custom Elements Runtime

Blazing Fast: Minimal runtime, instant updates, zero dependencies.
JIT CSS: On-demand, utility-first styling directly in your HTML at runtime.
No Build Necessary: Instant development feedback, no bundling required.
TypeScript First: Strict types, intellisense, and safety everywhere.
Functional API: No classes, no boilerplate—just pure functions.
SSR &amp; HMR Ready: Universal rendering and instant hot reloads.
Extensible: Directives, event bus, store, and more for advanced use cases.
Developer Friendly: Clean docs, examples, and made to “just work”.

#webdev #webcomponents #tailwindcss #vue

For years, I dreamed of a magical open source tool that would let me build Custom Elements as easily as you can build proprietary components in Vue, Svelte, or React.

But that dream? Yeah, it never really showed up. 😅

Tools like Lit and Skate exist—but they’re a bit... clunky. Build steps, lots of boilerplate, class-based syntax, no built-in styling, and don’t even get me started on trying to use Tailwind CSS inside the Shadow DOM. It’s like doing origami with oven mitts. And those decorators? My brain just nopes out every time.

What I really wanted was something:

Functional, not class-based
No dependencies
Dead simple to use
Tailwind-style utility classes baked right in
Friendly to SSR, routing, and component communication (hello, event bus & global store)
And of course — CDN-ready for instant use, no bundlers needed

So... I stopped waiting and just built it. 💥

Say hello to the Custom Elements Runtime — a lightweight, powerful little tool that mixes the best parts of Vue, Tailwind CSS, and Web Components into one delicious, no-frills package.

import { component, html } from '@jasonshimmy/custom-elements-runtime';

component('my-counter', (ctx) => html`
  <button
    class=“px-2 py-1 bg-blue-600 hover:bg-blue-500 text-white”
    @click="increment"
  >Count: ${ctx.count}</button>
`, {
  state: { count: 0 },
  increment: (ctx) => ctx.count++
});