TypeScript Webcomponents

Open-source TypeScript projects categorized as Webcomponents
Edit details
Topics: Stenciljs custom-elements web-components TypeScript JavaScript
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
Sponsored

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: Design Systems with Web Components | dev.to | 2023-12-18

    I was recently able to sit down with some of the core members of Ionic, who also created Stencil a toolchain for building Design Systems and Progressive Web Apps. We talked at great length how typically companies are approaching Ionic from a Design Team and need help building components. As a developer I wanted to talk about the Web Components that are used within the Design System first. There was a decent amount of surprise, so I thought I would break down what a Design System is and why it doesn't matter which end you start with, as long as you have both your Design and Development teams working together to build your Design System.

  • ionicons

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

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • 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: Ajout de l'auto-complétion sur les Web Components avec Stencil | dev.to | 2024-03-14

  • shoelace-css

    A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME. WE ARE LIVE ON KICKSTARTER! 👇👇👇

    Project mention: Htmx and the Rule of Least Power | news.ycombinator.com | 2024-04-12

    HTMX gets all the hype right now, but there are other tools in the same vain, my favorite being Unpoly (https://unpoly.com). Together with Shoelace (https://shoelace.style) you get nice GUIs real fast, without the burden of complicated dependency management and build steps. Also, you don't have to write a lot of JS, just what is needed for small enhancements, as it was meant to be. Some might say the main drawback is the tight coupling to your backend. In my case, this is also the main benefit as it integrates perfectly with the backend framework (Django).

  • wired-elements

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

  • builder

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

    Project mention: Introducing GPT Crawler - Turn Any Site Into a Custom GPT With Just a URL | dev.to | 2023-12-21

    I created my first custom GPT based on the Builder.io docs site, forum, and example projects on github and it can now answer detailed questions with code snippets about integrating Builder.io into your site or app. You can try it here (currently requires a paid ChatGPT plan).

  • model-viewer

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

    Project mention: Would it be possible to implement this 3d model viewer into 3d tavern? | /r/SillyTavernAI | 2023-12-06

    I came across this after finding out about chatvrm https://modelviewer.dev and I was wondering if it would be possible to implement it into silly tavern or if anyone knows of similar extensions? I might try it myself but I really have no idea what I am doing but it would be cool to add any video game character to it with animations for a more realistic rp experience.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • mdui

    Material Design 3(Material You) UI components using Web Components.

  • blocksuite

    🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.

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

  • frontend

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

  • arrow-js

    Reactivity without the framework

  • Blaze UI

    Atoms for Blaze UI (by BlazeUI)

  • spectrum-web-components

    Spectrum Web Components

    Project mention: Making Web Component properties behave closer to the platform | dev.to | 2024-01-21

    For example, all the following design systems can be used without tooling (some of them provide ready-to-use bundles, others can be used through import maps): Google's Material Web, Microsoft's Fluent UI, IBM's Carbon, Adobe's Spectrum, Nordhealth's Nord, Shoelace, etc.

  • resize-observer

    Polyfills the ResizeObserver API.

  • minze

    Dead-simple JS framework for native web components.

  • apollo-elements

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

  • patternfly-elements

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

  • 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 (by kor-ui)

  • custom-elements-language-server

    Custom Elements Language Server provides useful language features for Web Components. Features include code actions, completions, diagnostics and more.

    Project mention: Custom Elements Language Server Alpha Released | dev.to | 2023-04-24

    You can find the project in GitHub: https://github.com/Matsuuu/custom-elements-language-server

  • 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

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

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 2024-04-12.

TypeScript Webcomponents related posts

Index

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

Project Stars
1 Ionic Framework 50,386
2 ionicons 17,347
3 stencil 12,280
4 shoelace-css 11,905
5 wired-elements 9,655
6 builder 6,615
7 model-viewer 6,490
8 mdui 3,848
9 blocksuite 3,688
10 frontend 3,669
11 arrow-js 2,252
12 Blaze UI 1,549
13 spectrum-web-components 1,171
14 resize-observer 940
15 minze 544
16 apollo-elements 414
17 patternfly-elements 373
18 api-viewer-element 258
19 kor 254
20 custom-elements-language-server 78
21 react-webcomponentify 66
22 svelte-webcomponent-boilerplate 61
23 cwco 57

Sponsored
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com