adequate

An adequate UI library with minimal size

Package Size   Package 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

Features

Non-goals

Size comparison

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.

42.52kb
42.84kb
4.87kb
5.19kb
0.99kb
1.37kb
React + ReactDOM @ 17.0.1
Preact + Hooks @ 10.5.12
adequate @ latest

Browser support

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.

Resources

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.

Showcases

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.