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.
-
-
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 πππ
-
wired-elements
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
-
-
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.
-
-
-
-
-
-
-
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
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
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.
Well if you want to check out the project you have here: π Docs website π¦ Github repo
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).
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: <model-viewer>: Easily display interactive 3D models on the web and in AR | news.ycombinator.com | 2024-05-28
Project mention: BlockSuite is the open-source block-based editor | news.ycombinator.com | 2023-07-26
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).
TypeScript Webcomponents related posts
-
Ajout de l'auto-complΓ©tion sur les Web Components avec Stencil
-
Making Web Component properties behave closer to the platform
-
Shoelace: A forward-thinking library of web components
-
Introducing GPT Crawler - Turn Any Site Into a Custom GPT With Just a URL
-
Plasmic.app β the visual builder for your tech stack
-
Design Systems with Web Components
-
Ask HN: Is there something like shadcn/UI for vanilla HTML and JavaScript?
-
A note from our sponsor - SaaSHub
www.saashub.com | 7 Jun 2024
Index
What are some of the best open-source Webcomponent projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Ionic Framework | 50,560 |
| 2 | ionicons | 17,403 |
| 3 | omi | 12,954 |
| 4 | stencil | 12,350 |
| 5 | shoelace-css | 12,172 |
| 6 | wired-elements | 10,305 |
| 7 | builder | 6,858 |
| 8 | model-viewer | 6,610 |
| 9 | mdui | 3,911 |
| 10 | blocksuite | 3,982 |
| 11 | frontend | 3,748 |
| 12 | arrow-js | 2,295 |
| 13 | Blaze UI | 1,548 |
| 14 | spectrum-web-components | 1,196 |
| 15 | resize-observer | 946 |
| 16 | minze | 545 |
| 17 | apollo-elements | 416 |
| 18 | patternfly-elements | 374 |
| 19 | api-viewer-element | 263 |
| 20 | kor | 265 |
| 21 | custom-elements-language-server | 82 |
| 22 | react-webcomponentify | 67 |
| 23 | svelte-webcomponent-boilerplate | 61 |
Sponsored
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.
surveyjs.io