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! Learn more →
Top 23 JavaScript Webcomponent Projects
-
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.
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 official website link: https://github.com/micro-zoe/micro-app
-
Hybrids
-
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.
-
-
-
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.
-
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.
-
-
web-components
A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
Components are ready made, code is in pure java. Do check this out https://vaadin.com/docs/latest/components
-
-
Project mention: How we automated storybook documentation for our web components | dev.to | 2022-08-25
utils.makeElementFromClass(GitCorner, { source: 'https://github.com/elmsln/lrnwebcomponents', 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
-
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 | reddit.com/r/web_design | 2023-01-03My 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
-
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.
-
Project mention: How bad will the scope of *privacy* on the web be if firefox dies? | reddit.com/r/browsers | 2023-01-13
Weird. Those all work fine for me. PaleFill might help for YT though (https://martok.github.io/palefill/).
-
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
- Using Riot.js, a component-based UI library
- Symbiote.js - Simple, light and very powerful library to create embedded components for any purpose, with a data flow management included
- Simple, light and powerful library to create embedded components
- Palefill – A Web Technologies Polyfill Add-On for Pale Moon
- Server-Side Includes (SSI) - Porkbun static web hosting
- Do people build websites with just html/css/vanilla js anymore or is learning react almost mandatory?
- I'm not convinced that "modern" web dev is also "better"
-
A note from our sponsor - Appwrite
appwrite.io | 1 Feb 2023
Index
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.
www.sonarsource.com