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-14This 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
-
-
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-04stencil.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-14Do 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. 🥾
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?
-
-
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.
-
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.
-
-
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/
-
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.
-
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 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.
-
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
-
-
-
svelte-webcomponent-boilerplate
🏗 Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate
-
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
-
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.
-
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-31The 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.
TypeScript Webcomponents related posts
- UI React Tool
- my employer asked me to code the whole project using pure javascript
- CWCO - Web Components Library
- CWCO - Web Components Library
- CWCO - Web Components Library
- Does anyone know a good alternative to Bootstrap when working with web components ?
- Looking for nodeJS people to help with an open-source, non-profit dating app project!
Index
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 |
Are you hiring? Post a new remote job listing for free.
