The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →
Top 23 Webcomponent Open-Source Projects
-
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
-
shoelace-css
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME. WE ARE LIVE ON KICKSTARTER! 👇👇👇
-
wired-elements
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
-
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.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
-
-
-
blocksuite
🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
-
-
-
-
-
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
I was recently able to sit down with some of the core members of Ionic, who also created Stencil a toolchain for building Design Systems and Progressive Web Apps. We talked at great length how typically companies are approaching Ionic from a Design Team and need help building components. As a developer I wanted to talk about the Web Components that are used within the Design System first. There was a decent amount of surprise, so I thought I would break down what a Design System is and why it doesn't matter which end you start with, as long as you have both your Design and Development teams working together to build your Design System.
These articles form a series focusing on RiotJS paired with BeerCSS, designed to guide you through creating components and mastering best practices for building production-ready applications. I assume you have a foundational understanding of Riot; however, feel free to refer to the documentation if needed: https://riot.js.org/documentation/
Project mention: Ajout de l'auto-complétion sur les Web Components avec Stencil | dev.to | 2024-03-14
HTMX gets all the hype right now, but there are other tools in the same vain, my favorite being Unpoly (https://unpoly.com). Together with Shoelace (https://shoelace.style) you get nice GUIs real fast, without the burden of complicated dependency management and build steps. Also, you don't have to write a lot of JS, just what is needed for small enhancements, as it was meant to be. Some might say the main drawback is the tight coupling to your backend. In my case, this is also the main benefit as it integrates perfectly with the backend framework (Django).
Official Website: https://onsen.io/
Project mention: Introducing GPT Crawler - Turn Any Site Into a Custom GPT With Just a URL | dev.to | 2023-12-21I created my first custom GPT based on the Builder.io docs site, forum, and example projects on github and it can now answer detailed questions with code snippets about integrating Builder.io into your site or app. You can try it here (currently requires a paid ChatGPT plan).
Project mention: Would it be possible to implement this 3d model viewer into 3d tavern? | /r/SillyTavernAI | 2023-12-06I came across this after finding out about chatvrm https://modelviewer.dev and I was wondering if it would be possible to implement it into silly tavern or if anyone knows of similar extensions? I might try it myself but I really have no idea what I am doing but it would be cool to add any video game character to it with animations for a more realistic rp experience.
I get what you are trying to do, but it feels a bit insecure. Why not use an OSS passwordless project like https://github.com/supertokens/supertokens-core/ or https://github.com/teamhanko/hanko
Project mention: BlockSuite is the open-source block-based editor | news.ycombinator.com | 2023-07-26
GitHub is one:
https://github.com/github/details-dialog-element
There should be others here:
https://github.com/web-padawan/awesome-web-components#compon...
Actually I was wondering if lwc oss is still a thing. The website lwc.dev looks like it hasn't been updated since the release in 2019. Are many people using it or was it a nice try by Salesforce but can we consider it dead? I know of course it can't compete with react, vue or angular, but has it built a nice user base around it to keep it interesting?
Project mention: Making Web Component properties behave closer to the platform | dev.to | 2024-01-21For example, all the following design systems can be used without tooling (some of them provide ready-to-use bundles, others can be used through import maps): Google's Material Web, Microsoft's Fluent UI, IBM's Carbon, Adobe's Spectrum, Nordhealth's Nord, Shoelace, etc.
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).
Webcomponents related posts
- Router, pages, layouts and async data in TiniJS apps
- Htmx and the Rule of Least Power
- Button Component with RiotJS (Material Design)
- Input Component with RiotJS (Material Design)
- Ajout de l'auto-complétion sur les Web Components avec Stencil
- Streaming HTML out of order without JavaScript
- Making Web Component properties behave closer to the platform
-
A note from our sponsor - WorkOS
workos.com | 28 Apr 2024
Index
What are some of the best open-source Webcomponent projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Ionic Framework | 50,410 |
| 2 | ionicons | 17,371 |
| 3 | riot | 14,830 |
| 4 | stencil | 12,292 |
| 5 | shoelace-css | 12,030 |
| 6 | wired-elements | 9,659 |
| 7 | onsenui | 8,789 |
| 8 | builder | 6,666 |
| 9 | model-viewer | 6,517 |
| 10 | hanko | 5,409 |
| 11 | micro-app | 5,220 |
| 12 | mdui | 3,877 |
| 13 | blocksuite | 3,775 |
| 14 | frontend | 3,688 |
| 15 | ui-buttons | 3,345 |
| 16 | hybrids | 2,964 |
| 17 | awesome-web-components | 2,655 |
| 18 | arrow-js | 2,257 |
| 19 | lwc | 1,561 |
| 20 | Blaze UI | 1,549 |
| 21 | spectrum-web-components | 1,177 |
| 22 | slim.js | 1,003 |
| 23 | resize-observer | 940 |
Sponsored
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com