JavaScript Webcomponents

Open-source JavaScript projects categorized as Webcomponents

Top 23 JavaScript Webcomponent Projects

  • riot

    Simple and elegant component-based UI library

    Project mention: Using Riot.js, a component-based UI library | | 2023-01-31

    Riot.js is designed to be lightweight and easy to learn, making it a good choice for developers who are familiar with HTML and JavaScript — without requiring them to learn the rigors of coding with a specific framework. Riot.js emphasizes simplicity, performance, and modularity, its ecosystem allows for easy integration of third-party libraries and components, making it suitable for both small-scale and large-scale projects.

  • onsenui

    Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

    Project mention: 12 Frameworks for Hybrid Mobile Apps | | 2022-08-24

    Onsen UI has quickly grown in adoption since its release in 2013. It is an open-source framework under the Apache v2 license. Onsen UI is framework-agnostic UI components, you can choose and switch among the frameworks: AngularJS, Angular, React, and Vue.js or go pure JavaScript to build your hybrid apps.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • micro-app

    A lightweight, efficient and powerful micro front-end framework. 一款轻量、高效、功能强大的微前端框架

    Project mention: LowCode table of solutions Drip-Table open source! | | 2022-10-11

    Micro-App official website link:

  • hybrids

    Extraordinary JavaScript UI framework with unique declarative and functional architecture

    Project mention: Why we chose WebComponents for our Design System | | 2022-05-05


  • lwc

    :zap: LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation

    Project mention: The Journey to Becoming a Rockstar Salesforce Developer | | 2023-01-12

    Now in Alba’s role, she and her team use Lightning Web Components (LWC) to create custom user interfaces, a framework based on Web Components standards. With LWC, Alba creates components using modern, standard JavaScript. This means the skills that she learned previously are transferable to other JavaScript-based technologies. She pointed out that on top of this transferability, LWC is open source, and developers can use it outside of the Salesforce platform. Components can be used in Lightning App Builder and published on the AppExchange for other customers to use them.

  • Odoo

    Javascript and SVG odometer effect library with motion blur

  • reactive-elements

    Allows to use React.js component as HTML element (web component)

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  • react-svg-pan-zoom

    :eyes: A React component that adds pan and zoom features to SVG

    Project mention: Skill Tree Update 4/11/2022 | | 2022-04-11

    One of the goals of this week was to add statefulness to the skill tree app. Fortunately, pan and zoom works perfectly fine out of the box. Event listeners for keyboard shortcuts were actually pretty easy to add. One portion that I struggled with was experimenting with PUT, PATCH, and POST methods using RTK Query on the frontend. Despite understanding how it all works, there's that nagging feeling in the back my head that's like, there's no way this is going to work. But it did work. I have CRUD functionality now!

  • vaadin

    An evolving set of open source web components for building mobile and desktop web applications in modern browsers.

  • jTools - Javascript web components

    jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms.

  • snuggsi

    snuggsi ツ - Easy Custom Elements in ~1kB

  • web-components

    A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+

    Project mention: Is this UI doable with only using Java Swing? | | 2022-12-24

    Components are ready made, code is in pure java. Do check this out

  • zero-md

    Ridiculously simple zero-config markdown displayer

  • lrnwebcomponents

    HAXTheWeb monorepo of elements and apis

    Project mention: How we automated storybook documentation for our web components | | 2022-08-25

    utils.makeElementFromClass(GitCorner, { source: '', alt: "Our monorepo of all the things you see here", corner: true, size: "large" })

  • custom-elements-manifest

    Custom Elements Manifest is a file format that describes custom elements in your project. (by open-wc)

  • patterns-library

    AXA CH UI component library. Please share, comment, create issues and work with us!

  • github-wc-polyfill

    Ensure that all GitHub and GitLab scripts required for UXP and SeaMonkey are loaded correctly

    Project mention: Argh.. GitHub is broken again | | 2022-02-17
  • webcomponent-instagram-widget

    🖼 Simple Instagram Widget: Photos Box of your Instagram Profile for your blog or website with this WebComponent.

  • greenwood

    Greenwood is your full-stack workbench for the web, focused on supporting modern web standards and development to help you create your next project.

    Project mention: Server-Side Includes (SSI) - Porkbun static web hosting | | 2023-01-03

    My project Greenwood might be able to help here, depending on what your current setup looks like. Inspired by the old HTML Includes spec, I created a plugin for replicating this sort of edge side include behavior.

  • gatsby-remark-highlight-code

    Adds stylish cards and syntax highlighting to code blocks in markdown files

  • event-driven-web-components-realworld-example-app

    Exemplary real world application built with Vanilla JS Web Components in an Event Driven Architecture

  • exalt

    A JavaScript framework for building universal apps.

    Project mention: Selecting 3rd Party Web Components | | 2022-12-12

    There are several lightweight libraries I might expect to see as dependencies (like Alpine.js or WC-specific utilities like Exalt and slimjs). A full front end framework, like React, for a component is wholly unnecessary.

  • palefill

    Inject Polyfills for various web technologies into pages requiring them

    Project mention: How bad will the scope of *privacy* on the web be if firefox dies? | | 2023-01-13

    Weird. Those all work fine for me. PaleFill might help for YT though (

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-01-31.

JavaScript Webcomponents related posts


What are some of the best open-source Webcomponent projects in JavaScript? This list will help you:

Project Stars
1 riot 14,749
2 onsenui 8,676
3 micro-app 3,811
4 hybrids 2,756
5 lwc 1,357
6 Odoo 795
7 reactive-elements 700
8 react-svg-pan-zoom 644
9 vaadin 520
10 jTools - Javascript web components 451
11 snuggsi 369
12 web-components 286
13 zero-md 241
14 lrnwebcomponents 214
15 custom-elements-manifest 137
16 patterns-library 103
17 github-wc-polyfill 92
18 webcomponent-instagram-widget 76
19 greenwood 74
20 gatsby-remark-highlight-code 63
21 event-driven-web-components-realworld-example-app 59
22 exalt 57
23 palefill 53
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.