hybrids is a UI library for creating web components with unique declarative and functional approach based on plain objects and pure functions.
- The simplest definition β just plain objects and pure functions - no
class
andthis
syntax - No global lifecycle β independent properties with own simplified lifecycle methods
- Composition over inheritance β easy re-use, merge or split property descriptors
- Super fast recalculation β smart cache and change detection mechanisms
- Global state management - model definitions with support for external storages
- Templates without external tooling β template engine based on tagged template literals
- Developer tools included β HMR support out of the box for a fast and pleasant development
Quick Look
<script type="module">
import { html, define } from 'https://unpkg.com/hybrids@^6';
function increaseCount(host) {
host.count += 1;
}
define({
tag: "simple-counter",
count: 0,
render: ({ count }) => html`
<button onclick="${increaseCount}">
Count: ${count}
</button>
`,
});
</script>
<simple-counter count="10"></simple-counter>
Documentation
The project documentation is available at the hybrids.js.org site.
Community
License
hybrids
is released under the MIT License.