ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5
wcb/README.md
Ayo be9c6b7cf4
Some checks are pending
Tests / Unit (push) Waiting to run
Details
Tests / E2E (push) Waiting to run
Details
chore: update readme
2026-07-19 21:42:41 +02:00

3 KiB
Raw Blame History

Web Component Base

Note

** Quality of Life improvements shipped (v5.1)** — We now have typed props and a CEM Analyzer Plugin that makes developer exerience so much better with code editors and other tooling. Composing stylesheets and a fix for boolean properties behavior is included as well. See the change log for more details. Next up: more improvements to Boolean props and faster templates!

Package information: NPM version Package information: NPM license Package information: NPM downloads Bundle Size

🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive custom elements easily ✨

This is the base class used for web components in Ayo's projects, primarily cozy-games, mcfly, his personal site, his blog, and others.

Next actions:

  1. Read the docs
  2. View a demo on CodePen.

counter example code snippet

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.

Want to get in touch?

There are many ways to get in touch:

  1. Open a GitHub issue or discussion
  2. Submit a ticket via SourceHut todo
  3. Email me: hi@ayo.run

Inspirations and thanks

  1. 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.
  2. fast - When I found that Microsoft has their own base class I thought it was super cool!
  3. lit - lit-html continues to amaze me and I worked to make wcb generic so I (and others) can continue to use it

Size change log

See size-change-log.md for a running record of how each correctness/feature change affects the WebComponent base class bundle size, with the reason and benefit of each.

Just keep building.
A project by Ayo