gitmyhub

vue-lit

JavaScript ★ 1.1k updated 5y ago

Proof of concept custom elements "framework"

This is a tiny framework for building web components — the browser's native way of creating custom, reusable HTML elements. Instead of learning a heavy framework, you get a minimal setup that weighs about 6 kilobytes and lets you write interactive UI with a familiar JavaScript syntax.

The core idea is simple: you define a custom element (like ``) by writing a function that describes what should appear on screen and how it should behave. When the component's data changes, the page automatically updates. The framework handles all the plumbing needed to make this work — tracking state changes, re-rendering efficiently, and hooking into the component's lifecycle (when it mounts, updates, or unmounts). Because it uses the browser's built-in custom elements standard, your components work everywhere and can talk to other frameworks or vanilla JavaScript without friction.

The syntax feels very similar to Vue if you've used that framework, but produces native web components instead. You write reactive state (data that triggers updates when it changes), bind event listeners to buttons and inputs, and use a template language to describe your HTML. The README example shows a component with a text input, a toggle button, and a child component — all updating instantly as you interact with them.

Who would use this? Frontend developers building lightweight applications, component libraries, or browser extensions where bundle size matters. Anyone embedding interactive widgets in static websites. Teams that want the productivity of a modern framework but need their code to work without build tools or complicated bundling. It's especially useful if you're already committed to the web standards ecosystem and want to avoid framework lock-in — since these are real custom elements, they're portable across projects and compatible with any environment that runs JavaScript.