https://github.com/ayo-run/wcb

Web Components in Easy Mode
https://github.com/ayo-run/wcb

webcomponent webcomponents

Last synced: 2 days ago
JSON representation

Web Components in Easy Mode

• Host: GitHub
• URL: https://github.com/ayo-run/wcb
• Owner: ayo-run
• License: mit
• Created: 2023-09-25T07:20:37.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2026-03-18T10:35:28.000Z (19 days ago)
• Last Synced: 2026-03-30T20:41:25.619Z (6 days ago)
• Topics: webcomponent, webcomponents
• Language: JavaScript
• Homepage: https://WebComponent.io
• Size: 2.3 MB
• Stars: 80
• Watchers: 0
• Forks: 2
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Web Component Base

[![Package information: NPM version](https://img.shields.io/npm/v/web-component-base)](https://www.npmjs.com/package/web-component-base)

[![Package information: NPM license](https://img.shields.io/npm/l/web-component-base)](https://www.npmjs.com/package/web-component-base)

[![Package information: NPM downloads](https://img.shields.io/npm/dt/web-component-base)](https://www.npmjs.com/package/web-component-base)

[![Bundle Size](https://img.shields.io/bundlephobia/minzip/web-component-base)](#library-size)

🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements) easily ✨

![counter example code snippet](https://git.sr.ht/~ayoayco/wcb/blob/main/assets/IMG_0682.png)

When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render.

The result is a reactive UI on property changes.

## Links

- [Documentation](https://webcomponent.io)

- [Read a blog explaining the reactivity](https://ayos.blog/reactive-custom-elements-with-html-dataset/)

- [View demo on CodePen](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)

## Want to get in touch?

There are many ways to get in touch:

1. Open a [GitHub issue](https://github.com/ayoayco/wcb/issues/new) or [discussion](https://github.com/ayoayco/wcb/discussions)

1. Submit a ticket via [SourceHut todo](https://todo.sr.ht/~ayoayco/wcb)

1. Email me: [hi@ayo.run](mailto:hi@ayo.run)

## Inspirations and thanks

1. [htm](https://github.com/developit/htm) - I use it for the `html` function for tagged templates, and take a lot of inspiration in building the rendering implementation. It is highly likely that I will go for what Preact is doing... but we'll see.

1. [fast](https://github.com/microsoft/fast) - When I found that Microsoft has their own base class I thought it was super cool!

1. [lit](https://github.com/lit/lit) - `lit-html` continues to amaze me and I worked to make `wcb` generic so I (and others) can continue to use it

---

_Just keep building._


_A project by [Ayo](https://ayo.ayco.io)_