An open-source platform that helps developers build backends without spending time on boilerplate & repetitive coding. Including production-ready GraphQL & REST APIs, DB schema, DTOs, filtering, pagination, RBAC, & more. 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 Framework UI Components are used to build a website and then a mobile application is built using Ionic Capacitor. Ionic UI components are not required but are used for UX. The vue js code presented here will work fine in a separate application.
-
-
SurveyJS
A Non-Cloud Alternative to Google Forms that has it all.. SurveyJS JavaScript libraries allow you to easily set up a robust form management system fully integrated into your IT infrastructure where users can create and edit multiple dynamic JSON-based forms in a no-code form builder. Learn more now.
-
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.
-
wired-elements
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
-
shoelace-css
A collection of professionally designed, every day UI components built on Web standards. Works with all framework as well as regular HTML/CSS/JS. 🥾
After trying out and reviewing the code of https://shoelace.style/ I began asking the question: Do we still need libraries like Vue? Haven't native web components reached the point where we can let go of the component "polyfills" we've been using?
This crossover is bound to happen, like it happened with jQuery. The question is when.
-
That said, maybe in your case, if it's a really minimal 3D viewer, it could be that the modelviewer.dev could what you need. You can use it like any other html element and just link it to a 3D model you export from blender as a .glb file. I think it also allows you to add labels.
-
Check out Builder.io’s GitHub repository for more details about its features and community.
-
Amplication
Amplication: open-source Node.js backend code generator. An open-source platform that helps developers build backends without spending time on boilerplate & repetitive coding. Including production-ready GraphQL & REST APIs, DB schema, DTOs, filtering, pagination, RBAC, & more.
-
-
Project mention: BlockSuite is the open-source block-based editor | news.ycombinator.com | 2023-07-26
-
Link to GitHub -->
-
In the mean time, here's a partial re-write I've been working on for fun that's framework-less (wanted the experience). Uses a new library called ArrowJS (arrow-js.com) that's just 3 functions to add reactivity to otherwise native JavaScript as opposed to a large framework like Vue or React.
-
-
-
sp- (Spectrum components from Adobe6)
-
-
Don't forget to read the documentation of Minze to explore the features and APIs that have been provided.
-
-
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
Project mention: A Retrospective of My Year as a Full Stack Developer and Indie Game Developer | dev.to | 2022-12-20Documentation generated with api-viewer web component, using my plugin to generate the manifest!
-
Project mention: HTML with Superpowers: An Introduction to Web Components | news.ycombinator.com | 2023-01-10
Esri’s Calcite Component library is another.
-
-
svelte-webcomponent-boilerplate
🏗 Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate
-
Appwrite
Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!
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-09-23.
TypeScript Webcomponents related posts
- Shoelace: A forward-thinking library of web components
- If Web Components are so great, why am I not using them?
- World Wide Web Wars
- What front-end would you chose for Spring Boot apps?
- best stable free (framework agnostic*) ui library?
- React Component in vue/angular
- Minze Inside Vue.js
-
A note from our sponsor - Amplication
amplication.com | 28 Sep 2023
Index
What are some of the best open-source Webcomponent projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Ionic Framework | 49,487 |
| 2 | ionicons | 17,083 |
| 3 | stencil | 11,929 |
| 4 | wired-elements | 9,497 |
| 5 | shoelace-css | 9,321 |
| 6 | model-viewer | 6,006 |
| 7 | builder | 5,630 |
| 8 | frontend | 3,248 |
| 9 | blocksuite | 2,871 |
| 10 | hanko | 2,277 |
| 11 | arrow-js | 1,947 |
| 12 | deckdeckgo | 1,603 |
| 13 | Blaze UI | 1,550 |
| 14 | spectrum-web-components | 956 |
| 15 | resize-observer | 910 |
| 16 | minze | 529 |
| 17 | apollo-elements | 400 |
| 18 | patternfly-elements | 350 |
| 19 | kor | 245 |
| 20 | api-viewer-element | 238 |
| 21 | calcite-design-system | 232 |
| 22 | react-webcomponentify | 66 |
| 23 | svelte-webcomponent-boilerplate | 59 |
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