TypeScript web-components

Open-source TypeScript projects categorized as web-components
Edit details
Topics: #TypeScript #JavaScript #custom-elements #React #Components
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!
appwrite.io
Sponsored

Top 23 TypeScript web-component Projects

  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

    Project mention: 16 React Tools to Help You Keep Your Sanity in a Crazy World | dev.to | 2023-03-19

    Website: https://storybook.js.org/

  • wired-elements

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

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

  • fast

    The adaptive interface system for modern web experiences.

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

    fast- (Fast components from Microsoft8)

  • haunted

    React's Hooks API implemented for web components 👻

    Project mention: The benefits of Web Component Libraries | dev.to | 2023-02-27

    Web component browser APIs aren't that many, and not that hard to grasp (if you don't know about them, have a look at Google's Learn HTML section and MDN's Web Components guide); but creating a web component actually requires taking care of many small things. This is where web component libraries come in very handy, freeing us of having to think about some of those things by taking care of them for us. Most of the things I'll mention here are handled one way of another by other libraries (GitHub's Catalyst, Haunted, Hybrids, Salesforce's LWC, Slim.JS, Ionic's Stencil) but I'll focus on Google's Lit and Microsoft's FAST here as they probably are the most used web component libraries out there (ok, I lied, Lit definitely is, FAST not that much, far behind Lit and Stencil; but Lit and FAST have many things in common, starting with the fact that they are just native web components, contrary to Stencil that compiles to a web component). Both Lit and FAST leverage TypeScript decorators to simplify the code even further so I'll use that in examples, even though they can also be used in pure JS (decorators are coming to JS soon BTW). I'll also leave the most apparent yet most complex aspect for the end.

  • vime

    Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...

    Project mention: How to create a video streaming app using React and Vime | dev.to | 2022-12-20

    Vime is a simple React framework that provides a flexible, expandable media player that can be used with a variety of Javascript frameworks like React, Vue, Angular, and Svelte. This project will utilize a sample clip from the Vime documentation.

  • happy-dom

    Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.

    Project mention: A question on testing a <select> element with Vitest / vue-test-utils | reddit.com/r/vuejs | 2023-01-16

    https://github.com/capricorn86/happy-dom/issues/618. Looks like some work was merged recently.

  • ninja-keys

    Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.

    Project mention: Adding cmd-k for Quick Navigation | dev.to | 2023-02-07

    Don't forget to check out the Ninja-key documentation to learn more about the customization options.

  • Sonar

    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.

  • ui5-webcomponents

    UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.

    Project mention: Need some help on build process. | reddit.com/r/sveltejs | 2023-03-09

    With the node adapter, I'm able to build successfully but when I do npm run preview It breaks, because I'm using a web components library UI5 web components and for some reason, I get this error:

  • lume

    Create 3D web applications with HTML. Bring a new depth to your DOM! (by lume)

  • stylo

    Another kind of rich text editor

    Project mention: todolist-cl: a nice looking todolist with a web UI, written in Common Lisp [and by a newcomer to CL, to add credit] | reddit.com/r/Common_Lisp | 2022-11-30

    I recently integrated Stylo: https://stylojs.com/ It was simple and the editor looks simple, I like it.

  • minze

    Dead-simple JS framework for native web components.

    Project mention: Minze – JavaScript framework for native web components | news.ycombinator.com | 2022-12-31

  • html-midi-player

    🎹 Play and display MIDI files on the web

    Project mention: Property of element returns undefined but the value exists | reddit.com/r/webdev | 2022-12-22

    OP made another comment on the thread (which I think he may have deleted) which made it clear he was trying to create an instance of this web component - https://github.com/cifkao/html-midi-player - and interact with it's API (get and set config).

  • ui5-webcomponents-react

    A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience

    Project mention: Open source web component recommendation to use inside React app? | reddit.com/r/reactjs | 2023-03-11

  • image-crop-element

    A custom element for cropping a square image. Returns x, y, width, and height.

  • giscus-component

    Component library for giscus, a comment system powered by GitHub Discussions.

    Project mention: How to handle cors for incoming request in sveltekit? | reddit.com/r/sveltejs | 2022-04-18

    Have you tried using the official component library by giscus for svelte?

  • pwa-lit-template

    A template for building Progressive Web Applications using Lit and Vaadin Router.

    Project mention: [AskJS] web component frameworks | reddit.com/r/javascript | 2022-08-21

    take a look at this starter project from IBM for an entire site pwa that is seo friendly and built with Lit. I've used this as a guide on a few projects and it has been great. Also take a look at this component library that is framework agnostic and built with web components.

  • crayons

    🖍️ Crayons - A UI Kit comprising of web components for building Freshworks Apps! (by freshworks)

    Project mention: JetBrains Ring UI | news.ycombinator.com | 2022-10-07

    The main reason you would want to pick such a proprietary library is to achieve a homogeneous look and feel (often behavioral UX as well) when your app must work within another product - this product/organization is usually the one that also provides the library in question, and more often than not, uses the same design system if not the library itself.

    We built https://github.com/freshworks/crayons for the same reason - apps published to the Freshworks Marketplace can be built using Crayons. We also ended up building our own user facing SaaS applications using Crayons.

  • file-attachment-element

    Attach files via drag and drop or file input.

  • web-component-designer

    A Designer for HTML Components or Pages in a WebComponent

  • component-elements

    Create a custom element from any component with these tiny functions (2KB GZipped, ~1KB Brotli). Preact and React currently supported

  • cwco

    Powerful and Fast Web Component Library with a Simple API

    Project mention: Simplest Way to Create Web Component | reddit.com/r/WebComponents | 2023-02-21

    There are more info at https://cwco.io/

  • vue-custom-element-example

    An example on how to define custom elements using Vue 3

  • a2k

    Capture the feel of the early web with A2k, the Windows2000 inspired web component library

    Project mention: Introducing a2k - A UI library designed to capture that retro 2000s feeling | dev.to | 2022-12-01

    a2k is still a work in progress, so any feedback is welcome. If you run into any problems while following the set-up guides, please open a GitHub issue.

  • InfluxDB

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

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-03-19.

TypeScript web-components related posts

Index

What are some of the best open-source web-component projects in TypeScript? This list will help you:

Project Stars
1 storybook 77,628
2 wired-elements 9,329
3 fast 8,111
4 haunted 2,485
5 vime 2,460
6 happy-dom 1,800
7 ninja-keys 1,366
8 ui5-webcomponents 1,279
9 lume 965
10 stylo 695
11 minze 507
12 html-midi-player 383
13 ui5-webcomponents-react 354
14 image-crop-element 164
15 giscus-component 164
16 pwa-lit-template 160
17 crayons 134
18 file-attachment-element 99
19 web-component-designer 76
20 component-elements 74
21 cwco 55
22 vue-custom-element-example 45
23 a2k 41

Sponsored
Access the most powerful time series database as a service
Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.
www.influxdata.com