TypeScript Webcomponents

Open-source TypeScript projects categorized as Webcomponents

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.

    Project mention: Getting Started with PayloadCMS & Vue JS | dev.to | 2023-09-23

    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.

  • ionicons

    Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

  • 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.

    Project mention: Nue: A React/Vue/Vite/Astro Alternative | news.ycombinator.com | 2023-09-14
  • 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. 🥾

    Project mention: Nue: A React/Vue/Vite/Astro Alternative | news.ycombinator.com | 2023-09-14

    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.

  • model-viewer

    Easily display interactive 3D models on the web and in AR!

    Project mention: Time estimate from a pro | /r/threejs | 2023-06-07

    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.

  • builder

    Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more

    Project mention: 5 Open Source Tools for your Ecommerce Stacks | dev.to | 2023-01-27

    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.

  • frontend

    :lollipop: Frontend for Home Assistant (by home-assistant)

  • blocksuite

    🎨 The toolkit for block-based structral editing.

    Project mention: BlockSuite is the open-source block-based editor | news.ycombinator.com | 2023-07-26
  • hanko

    Open authentication and user management for the passkey era

    Project mention: Who's hiring developer advocates? (September 2023) | dev.to | 2023-09-05

    Link to GitHub -->

  • arrow-js

    Reactivity without the framework

    Project mention: Daily General Discussion - March 29, 2023 | /r/ethfinance | 2023-03-29

    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.

  • deckdeckgo

    The web open source editor for presentations

  • Blaze UI

    Atoms for Blaze UI (by BlazeUI)

  • spectrum-web-components

    Spectrum Web Components

    Project mention: Painless Web Components: Naming is (not too) Hard | dev.to | 2023-02-20

    sp- (Spectrum components from Adobe6)

  • resize-observer

    Polyfills the ResizeObserver API.

  • minze

    Dead-simple JS framework for native web components.

    Project mention: Minze Inside Vue.js | dev.to | 2023-04-01

    Don't forget to read the documentation of Minze to explore the features and APIs that have been provided.

  • apollo-elements

    🚀🌛 Use the Launch Platform 👩‍🚀👨‍🚀

  • patternfly-elements

    PatternFly Elements. A set of community-created web components based on PatternFly design.

  • kor

    User Interface Component Library based on LitElement / lit-html (by kor-ui)

  • 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-20

    Documentation generated with api-viewer web component, using my plugin to generate the manifest!

  • calcite-design-system

    Esri's Calcite Design System

    Project mention: HTML with Superpowers: An Introduction to Web Components | news.ycombinator.com | 2023-01-10

    Esri’s Calcite Component library is another.


  • react-webcomponentify

    Build Web Components with React or Preact (without any extra effort)

  • 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


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.