TypeScript Webcomponents

Open-source TypeScript projects categorized as Webcomponents Edit details

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: Working With Remix-Router In React JS - A Look at New Data APIs in DataBrowserRouter | dev.to | 2022-06-14

    This application also shows an approach for getting input in a modal and submitting it to a route's action function. I have added Ionic Framework as my user interface component, but what is shown here can work with any React application

  • ionicons

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

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • 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: web components... why aren't there large popular libraries of them? | reddit.com/r/webdev | 2022-06-04

    stencil.js addresses most if not all of this

  • wired-elements

    Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

    Project mention: Rough.js – Create graphics with a hand-drawn, sketchy, appearance | news.ycombinator.com | 2021-12-14

    Do also check out the other cool roughjs creations (https://github.com/rough-stuff), such as annotations (rough-notation: https://github.com/rough-stuff/rough-notation) and html elements (wired-elements: https://github.com/rough-stuff/wired-elements).

    Shameless plug: I also created a dataviz library that uses roughjs under-the-hood: https://github.com/jwilber/roughViz

  • 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: Should one use a UI Component library in 2022? | dev.to | 2022-06-20

    If you are looking for a component library for your next project, there are tons of options for you like Material UI, Chakra UI.etc. I have used CSS frameworks like Bootstrap, shoelace.js.etc. But, the real question is, should you need a CSS framework in 2022?

  • rendertron

    A Headless Chrome rendering solution

    Project mention: The balance has shifted away from SPAs | reddit.com/r/web_design | 2022-05-26
  • model-viewer

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

    Project mention: It's dangerous to go alone! Take this Sword of Rocket Power. Gold Edition - 741 total | reddit.com/r/loopringartists | 2022-06-15

    The other file is a glTF 3D model and GameStop's wallet appears to use this model viewer: https://modelviewer.dev/

  • JetBrains

    Developer Ecosystem Survey 2022. Take part in the Developer Ecosystem Survey 2022 by JetBrains and get a chance to win a Macbook, a Nvidia graphics card, or other prizes. We’ll create an infographic full of stats, and you’ll get personalized results so you can compare yourself with other developers.

  • builder

    Drag and drop page builder and CMS for React, Vue, Angular, and more

    Project mention: UI React Tool | reddit.com/r/react | 2022-06-29

    Personally, I would reach for builderIO's React SDK. It's pretty simple to set up and allows you to specify a selection of your own components.

  • frontend

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

  • Blaze UI

    Atoms for Blaze UI (by BlazeUI)

    Project mention: Does anyone know a good alternative to Bootstrap when working with web components ? | reddit.com/r/WebComponents | 2022-06-15

    https://crayons.freshworks.com/ https://shoelace.style/ https://www.blazeui.com/ https://developer.salesforce.com/docs/component-library/documentation/en/lwc https://docs.microsoft.com/en-us/fluent-ui/web-components/ https://component.kitchen/elix https://nordhealth.design/web-components/

  • deckdeckgo

    The web open source editor for presentations

    Project mention: Internet Computer: Web App Decentralized Database Architecture | dev.to | 2021-08-17

    We are developing a proof of concept to port our web app, DeckDeckGo, to DFINITY's Internet Computer.

  • spectrum-web-components

    Spectrum Web Components

    Project mention: Exploring The F# Frontend Landscape | dev.to | 2022-05-23

    In Fable.Lit rather than building an F# DSL (we tried) we use a string-based alternative which is closed to the HTML you know and love, this also helps a lot when you have to consume web components like those from shoelace.style, fast.design, adobe spectrum components, and more, this will be a very important and big point over the next few years now that web components have taken off finally with major companies like Microsoft, Salesforce, Github, Adobe and more are using them.

  • minze

    Dead-simple JS framework for native web components.

    Project mention: Introduction to Minze | dev.to | 2022-03-14

    Minze was invented in order to reduce this stress. With Minze, you can write a component that is native anywhere. If your team is using React and Vue and HTML, Minze allows your component to behave natively in all of them.

  • apollo-elements

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

    Project mention: GraphQL - Diving Deep | dev.to | 2021-07-29

    Using vanilla JS or TS or using web components and want to have a framework-independent way of doing things? You can stick to the GraphQL codegen itself since it takes care of almost everything underneath. Or if you want, you can also use Apollo Client’s vanilla version @apollo/client/core. Apollo Elements does come with support for a lot of webcomponent libraries like Lit, Fast and Gluon or even without any of it and hence is quite flexible.

  • api-viewer-element

    API documentation and live playground for Web Components. Based on Custom Elements Manifest format

  • kor

    User Interface Component Library based on LitElement / lit-html

  • 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

  • cwco

    Powerful and Fast Web Component Library with a Simple API

    Project mention: my employer asked me to code the whole project using pure javascript | reddit.com/r/learnjavascript | 2022-06-22

    You can try using https://cwco.io

  • js-uprtcl

    Libraries, tools and modules to create _Prtcl web apps

    Project mention: Weekly Discussion for Jul 05, 2021 - Jul 12, 2021 | reddit.com/r/holohost | 2021-07-05
  • nent

    Functional elements to add routing, data-binding, dynamic HTML, declarative actions, audio, video, and so much more. Supercharge static HTML files into web apps without script or builds.

    Project mention: Can HTML Make JavaScript Obsolete? | news.ycombinator.com | 2022-06-02
  • Web-React-UIKit

    A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code.

    Project mention: Adding Video Chat or Live Streaming to Your Website in 5 lines of Code Using the Agora Web UIKit | dev.to | 2022-01-31

    The Agora Web UIKit is built on React. If your website uses plain JavaScript or a different framework like Svelte, Vue, or Angular, you can use the UIKit as a web component! You can skip to the last section to learn more.

  • gem-panel

    A custom element <gem-panel>, let you easily create layout similar to Adobe After Effects.

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 2022-06-29.

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 47,573
2 ionicons 16,139
3 stencil 10,811
4 wired-elements 9,049
5 shoelace-css 6,801
6 rendertron 5,784
7 model-viewer 4,444
8 builder 3,417
9 frontend 2,429
10 Blaze UI 1,513
11 deckdeckgo 1,470
12 spectrum-web-components 640
13 minze 447
14 apollo-elements 364
15 api-viewer-element 197
16 kor 193
17 react-webcomponentify 65
18 svelte-webcomponent-boilerplate 50
19 cwco 35
20 js-uprtcl 33
21 nent 19
22 Web-React-UIKit 15
23 gem-panel 13
Find remote jobs at our new job board 99remotejobs.com. There are 3 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Static code analysis for 29 languages.
Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.