TypeScript custom-elements

Open-source TypeScript projects categorized as custom-elements

Top 20 TypeScript custom-element Projects

  • 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: Stencil | news.ycombinator.com | 2023-03-13
  • lume

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

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

  • mathlive

    A web component for easy math input

    Project mention: I build a formula expression recognition tool myself, hope to get advice~ | reddit.com/r/LaTeX | 2022-10-04

    Maybe you could consider having an editable mathfield so the result can be easily tweaked if needed. I'd recommend https://cortexjs.io/mathlive/ but I'm biased, I'm the author of that library :)

  • 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
  • api-viewer-element

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

    Project mention: A Retrospective of My Year as a Full Stack Developer and Indie Game Developer | dev.to | 2022-12-20

    Documentation generated with api-viewer web component, using my plugin to generate the manifest!

  • calcite-components

    Calcite Design System's web component library. Built with Stencil JS!

    Project mention: HTML with Superpowers: An Introduction to Web Components | news.ycombinator.com | 2023-01-10

    Esri’s Calcite Component library is another.


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

  • image-crop-element

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

  • file-attachment-element

    Attach files via drag and drop or file input.

  • component-elements

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

  • element-behaviors

    An entity-component system for HTML elements.

    Project mention: Show HN: Imperative Reactive Programming in JavaScript | news.ycombinator.com | 2022-12-11

    FWIW, Solid has been for some time under consideration for gradually untangling state in this project. Another library I’ve explored is element-behaviors[1], a Solid/custom element-based Entity Component System, which I think could be a good model for the project.

    Regardless of what tech I pull in, I’m sure I’ll be sharing insights eventually!

    1: https://github.com/lume/element-behaviors

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

  • filter-input-element

    Display elements in a subtree that match filter input text.

    Project mention: Microsoft Middle Finger to GitHub | reddit.com/r/ProgrammerHumor | 2022-12-19
  • gem-panel

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

  • drop-in.js

    Commerce Layer drop-in.js lets you transform any plain HTML page into an enterprise-grade static commerce website, with almost no coding required, thanks to a set of micro frontends that handle the main ecommerce functionalities.

    Project mention: Building an Ecommerce Store with Nextjs and Commerce Layer Demo Store | dev.to | 2023-01-22

    The beauty of the composable commerce architecture is that you can distribute your ecommerce service anywhere your customer wants them (either on mobile, web, smart devices, CLIs, etc.) so long the envisaged sales channel allows API mechanisms. For brands and developers, the options are numerous; for example, you can go as easy as making a static HTML website shoppable using a dropin library to power certain transactional functionalities or building a fully functional ecommerce website with commerce platforms like Commerce Layer and dev tools like the Demo Store project (which we will do in this article!).

  • social-embed

    Utilities and web components for embeddable content (YouTube, Vimeo, Dailymotion)

  • date-time-custom-element

    A custom element in HTML that displays the current date and time

    Project mention: A custom date-time html element | reddit.com/r/coolgithubprojects | 2023-01-07
  • flags

    Uni Flags (by uiwebkit)

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

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-13.

TypeScript custom-elements related posts


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

Project Stars
1 stencil 11,484
2 lume 961
3 mathlive 874
4 stylo 695
5 minze 508
6 api-viewer-element 222
7 calcite-components 206
8 image-crop-element 164
9 file-attachment-element 99
10 component-elements 74
11 element-behaviors 63
12 svelte-webcomponent-boilerplate 59
13 cwco 55
14 vue-custom-element-example 45
15 filter-input-element 40
16 gem-panel 15
17 drop-in.js 6
18 social-embed 5
19 date-time-custom-element 4
20 flags 0
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.