Top 23 TypeScript web-component Projects
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
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
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!
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)
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.
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
https://github.com/capricorn86/happy-dom/issues/618. Looks like some work was merged recently.
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.
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:
Create 3D web applications with HTML. Bring a new depth to your DOM! (by lume)
Another kind of rich text editorProject 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.
🎹 Play and display MIDI files on the webProject 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).
A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User ExperienceProject mention: Open source web component recommendation to use inside React app? | reddit.com/r/reactjs | 2023-03-11
A custom element for cropping a square image. Returns x, y, width, and height.
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?
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 - 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.
Attach files via drag and drop or file input.
A Designer for HTML Components or Pages in a WebComponent
Create a custom element from any component with these tiny functions (2KB GZipped, ~1KB Brotli). Preact and React currently supported
Powerful and Fast Web Component Library with a Simple APIProject mention: Simplest Way to Create Web Component | reddit.com/r/WebComponents | 2023-02-21
There are more info at https://cwco.io/
An example on how to define custom elements using Vue 3
Capture the feel of the early web with A2k, the Windows2000 inspired web component libraryProject 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.
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.
TypeScript web-components related posts
Need some help on build process.
2 projects | reddit.com/r/sveltejs | 9 Mar 2023
Simplest Way to Create Web Component
1 project | reddit.com/r/WebComponents | 21 Feb 2023
Adding cmd-k for Quick Navigation
1 project | dev.to | 7 Feb 2023
Simplest Way to Create Web Component
1 project | reddit.com/r/beforesemicolon | 27 Oct 2022
Why web components are not popular?
1 project | reddit.com/r/WebComponents | 17 Sep 2022
Lit - a simple library for building fast, lightweight web components. At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive
Web Component Intellisense for Available Slots and Attributes? (VS Code?)
2 projects | reddit.com/r/WebComponents | 23 Jul 2022
A note from our sponsor - Sonar
www.sonarsource.com | 27 Mar 2023
What are some of the best open-source web-component projects in TypeScript? This list will help you: