An adequate UI library with minimal size
customElements.define('x-counter', element(() => {
const [value, setValue] = useState(0);
return html`
<div>Counter: ${value}</div>
<button onclick="${() => setValue(value + 1)}">Increment</button>
<button onclick="${() => setValue(value - 1)}">Decrement</button>
`;
}));
document.body.innerHTML = '<x-counter></x-counter>';
Head to the REPL for interactive examples
adequate is a perfect fit when size is important, such as when dealing with limited bandwidth or storage capacity restrictions. The following compares the sizes of adequate, React and Preact on their own and together with a simplified todo list. This comparison is exclusively concerned with size, not with functionalities or render performance. The numbers demonstrate the key advantage of adequate. Even when bundled with a basic todo list, the size is still multiple times smaller than Preact itself.
adequate works in most of the latest major browsers, both on desktop and mobile. For browsers without support for the :scope pseudo query selector, a polyfill can be used.
The following list is a collection of concepts and technologies that are related to adequate. Some of them served as inspiration for the library, others merely share similar ideas.
As the library is relatively new, there are currently no known showcase projects. If you use adequate in one of your projects, please let me know and I'll add it to this page.