Skip to content
Switch branches/tags

hybrids - the web components

npm version build status coverage status

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 and this 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 '^6';
  function increaseCount(host) {
    host.count += 1;

    tag: "simple-counter",
    count: 0,
    render: ({ count }) => html`
      <button onclick="${increaseCount}">
        Count: ${count}

<simple-counter count="10"></simple-counter>

Edit <simple-counter> web component built with hybrids library


The project documentation is available at the site.



hybrids is released under the MIT License.