Wondering what’s next for npm?Check out our public roadmap! »

hybridsTypeScript icon, indicating that this package has built-in type declarations

4.3.4 • Public • Published

hybrids - the web components

npm version bundle size types build status coverage status npm gitter twitter Conventional Commits code style: prettier GitHub

🏅One of the four nominated projects to the "Breakthrough of the year" category of Open Source Award in 2019

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

Add the hybrids npm package to your application, import required features, and define your custom element:

import { html, define } from 'hybrids';

export function increaseCount(host) {
  host.count += 1;

export const SimpleCounter = {
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}

define('simple-counter', SimpleCounter);

Use the custom element in HTML document:

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

Click and play with <simple-counter> example:

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


The project documentation is available at the hybrids.js.org site.


hybrids is released under the MIT License.


npm i hybrids

DownloadsWeekly Downloads






Unpacked Size

1.06 MB

Total Files


Last publish


  • avatar
  • avatar