Big List of Web Component Tools and Compilers

Alex Merced - Dec 10 '19 - - Dev Community

Building components in frameworks like React, Angular and Vue are great if future projects will be within the same framework. Standard Web Components allow this to be the case. Below is a list of tools you can use to make standard Web Components you can use in any framework and application.

Hybrids — “Hybrids is a UI library for creating Web Components with a strong declarative and functional approach based on plain objects and pure functions.”

Stencil — “Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components.”

Svelte — “Svelte is a new way to build web applications. It’s a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.”

React Web Component — “Create Web Components with React”

diffHTML — “diffHTML is a library that assists with creating user interfaces using JavaScript. These interfaces can be: applications, games, data visualizations, or anything else that you may want to render in a web browser.”

lit-element — “A base class for creating web components using lit-html”

Litedom — “At ~3.5kb gzip, it allows you to create Web Component/Custom Element easily. Litedom can effortlessy be added into exitsing HTML page, without the need to bring in the bloat of big frameworks.”

zUIx — “A lightweight JavaScript library to support you in creating amazing component-based websites and applications.”

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .