SaaSHub helps you find the best software and product alternatives Learn more β
Top 23 TypeScript Webcomponent Projects
-
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Ionic Official Website
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
-
shoelace-css
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME πππ
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).
-
Well if you want to check out the project you have here: π Docs website π¦ Github repo
-
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.
This works but it's not a good idea to create these manually. Since that creates a lot of maintenance and we can run into out of sync issues with the api. To make this less tedious. Both Lit (see here) and Stencil (see here) provide a cli to create these automatically. However the need to create these wrapper components in the first place is additional overhead. If the framework of your choice properly supports web components you shouldn't have to create wrapper components.
-
wired-elements
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
-
Fun fact: the actual Builder.io codebase for our Figma to code product does literally the same thing. Yes, we have advanced machine learning, malicious content detection, yada yada.
-
Project mention: <model-viewer>: Easily display interactive 3D models on the web and in AR | news.ycombinator.com | 2024-05-28
-
blocksuite
𧩠Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
-
-
-
-
Adobe's UI library has a Web Component version: https://opensource.adobe.com/spectrum-web-components/
-
On the other hand, direct use of the https://github.com/juggle/resize-observer library used by polyfill.io can reduce dependencies on external services to ensure stability. The library has been maintained steadily until 2022, and it has been proven to be stable by many users, so we decided to introduce it.
-
-
Tini Router is the default way to add routing capability to TiniJS apps. There are also other routers you may use with TiniJS, such as: Vaadin Router and Lit Router.
-
-
patternfly-elements
PatternFly Elements. A set of community-created web components based on PatternFly design.
-
-
api-viewer-element
API documentation and live playground for Web Components. Based on Custom Elements Manifest format
-
custom-elements-language-server
Custom Elements Language Server provides useful language features for Web Components. Features include code actions, completions, diagnostics and more.
-
-
svelte-webcomponent-boilerplate
π Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate
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).
TypeScript Webcomponents discussion
TypeScript Webcomponents related posts
-
Solved: Why ChatGPT Won't Say "Brian Hood" (Blame Regexes)
-
Integrating Stencil Web Components in Angular Project
-
Getting Started with Mitosis: Creating a Cross-Framework Design System
-
Adding Map Based Photo Viewer to .Net Aspire Project with Stencil and OpenStreetMap Tile Server
-
We needed to run maintenance queries (SQL) with user input
-
How to Make AI Suck Less When Building AI Features
-
An SEO aha moment: understanding Core Web Vitals
-
A note from our sponsor - SaaSHub
www.saashub.com | 19 Jan 2025
Index
What are some of the best open-source Webcomponent projects in TypeScript? This list will help you:
| # | Project | Stars |
|---|---|---|
| 1 | Ionic Framework | 51,299 |
| 2 | ionicons | 17,662 |
| 3 | shoelace-css | 13,105 |
| 4 | omi | 13,100 |
| 5 | stencil | 12,655 |
| 6 | wired-elements | 10,549 |
| 7 | builder | 7,731 |
| 8 | model-viewer | 7,116 |
| 9 | blocksuite | 4,687 |
| 10 | frontend | 4,302 |
| 11 | arrow-js | 2,435 |
| 12 | Blaze UI | 1,557 |
| 13 | spectrum-web-components | 1,312 |
| 14 | resize-observer | 966 |
| 15 | minze | 555 |
| 16 | router | 429 |
| 17 | apollo-elements | 417 |
| 18 | patternfly-elements | 381 |
| 19 | kor | 275 |
| 20 | api-viewer-element | 274 |
| 21 | custom-elements-language-server | 88 |
| 22 | react-webcomponentify | 69 |
| 23 | svelte-webcomponent-boilerplate | 60 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com