Recently I've made a frontend framework based on Web Components called Leafjs.

GitHub: https://github.com/samzhangjy/leafjs
Docs: https://leafjs.samzhangjy.com/

What is Leafjs?

Leafjs is a lightweight frontend framework built based on web components.

Using web components allows you to create components natively - supported by most modern browsers. Unlike React and Vue, Leafjs's component system is totally built on top of the web components system, meaning that you can even use your components through native tags inside a plain HTML file as long as importing your bundled code.

And for sure, Leafjs implements a simple reactivity system that allows two-way binding, just like most frameworks do.

Getting Started

Leafjs provides a out-of-the-box bundle tool for you to use. Run the following command in your shell to create a new Leafjs app:

$ npx create-leafjs-app my-app

Then install the dependencies using either Yarn or NPM. After that, run:

$ npm run dev

To start a hot-reloading development server.

Or if you want to play Leafjs online, here's a CodeSandbox:

For more information please refer to the documentation.

How do you think about Leafjs? Tell me and I'll keep improving it!