TypeScript custom-elements

Open-source TypeScript projects categorized as custom-elements

Top 23 TypeScript custom-element Projects

custom-elements
  1. omi

    Web Components Framework - Web组件框架 (by Tencent)

    Project mention: OMI the surprising Chinese Web Components Framework ✨ | dev.to | 2024-05-01

    Well if you want to check out the project you have here: 🌐 Docs website 📦 Github repo

  2. Nutrient

    Nutrient - The #1 PDF SDK Library. Bad PDFs = bad UX. Slow load times, broken annotations, clunky UX frustrates users. Nutrient’s PDF SDKs gives seamless document experiences, fast rendering, annotations, real-time collaboration, 100+ features. Used by 10K+ devs, serving ~half a billion users worldwide. Explore the SDK for free.

    Nutrient logo
  3. 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: The Caveats of Web Components | dev.to | 2024-12-05

    This works but it's not a good idea to create these manually. Since that creates a lot of maintenance and we can run into out of sync issues with the api. To make this less tedious. Both Lit (see here) and Stencil (see here) provide a cli to create these automatically. However the need to create these wrapper components in the first place is additional overhead. If the framework of your choice properly supports web components you shouldn't have to create wrapper components.

  4. mathlive

    A web component for easy math input

    Project mention: Show HN: I built a math website the internet loved, I'm back with more features | news.ycombinator.com | 2024-05-15
  5. lume

    GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3"> (by lume)

    Project mention: Show HN: Lume – OS Lightweight CLI/API for macOS/Linux VMs on Apple Silicon | news.ycombinator.com | 2025-02-02

    And also this Lume, which is a 3d-HTML library.

    https://lume.io

  6. stylo

    Another kind of rich text editor

  7. minze

    Dead-simple JS framework for native web components.

  8. drab

    Interactivity for You (by rossrobino)

  9. CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  10. api-viewer-element

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

  11. lunchboxjs

    Declarative ThreeJS via web components

  12. image-crop-element

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

  13. file-attachment-element

    Attach files via drag and drop or file input.

  14. element-behaviors

    An entity-component system for HTML elements.

  15. component-elements

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

  16. custom-elements-language-server

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

  17. vue-custom-element-example

    An example on how to define custom elements using Vue 3

  18. svelte-webcomponent-boilerplate

    🏗 Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate

  19. cwco

    Powerful and Fast Web Component Library with a Simple API

  20. filter-input-element

    Display elements in a subtree that match filter input text.

  21. cypress-lit

    Test your Lit elements and native web components in cypress with all the modern browsers

  22. elements-x

    Collection of Customizable Custom Elements

  23. gem-panel

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

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

  25. fornax

    Build Faster, Code Smarter, With Fornax – The 🥖Bun-Powered 🥞Full-Stack 🕸️Web Framework

    Project mention: Fornax – Full-Stack BunJS Web Framework | news.ycombinator.com | 2024-12-29
  26. SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
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).

TypeScript custom-elements discussion

Log in or Post with

TypeScript custom-elements related posts

  • Integrating Stencil Web Components in Angular Project

    3 projects | dev.to | 4 Nov 2024
  • Getting Started with Mitosis: Creating a Cross-Framework Design System

    3 projects | dev.to | 13 Sep 2024
  • Adding Map Based Photo Viewer to .Net Aspire Project with Stencil and OpenStreetMap Tile Server

    4 projects | dev.to | 1 Sep 2024
  • We needed to run maintenance queries (SQL) with user input

    2 projects | dev.to | 15 Aug 2024
  • Using Apache ECharts with Lit and TypeScript

    3 projects | dev.to | 16 Jun 2024
  • Ajout de l'auto-complétion sur les Web Components avec Stencil

    5 projects | dev.to | 14 Mar 2024
  • Plasmic.app – the visual builder for your tech stack

    9 projects | news.ycombinator.com | 19 Dec 2023
  • A note from our sponsor - CodeRabbit
    coderabbit.ai | 13 Feb 2025
    Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR. Learn more →

Index

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

# Project Stars
1 omi 13,120
2 stencil 12,691
3 mathlive 1,653
4 lume 1,381
5 stylo 711
6 minze 556
7 drab 278
8 api-viewer-element 274
9 lunchboxjs 242
10 image-crop-element 186
11 file-attachment-element 121
12 element-behaviors 107
13 component-elements 92
14 custom-elements-language-server 88
15 vue-custom-element-example 63
16 svelte-webcomponent-boilerplate 60
17 cwco 56
18 filter-input-element 51
19 cypress-lit 24
20 elements-x 24
21 gem-panel 17
22 drop-in.js 16
23 fornax 9

Sponsored
Nutrient - The #1 PDF SDK Library
Bad PDFs = bad UX. Slow load times, broken annotations, clunky UX frustrates users. Nutrient’s PDF SDKs gives seamless document experiences, fast rendering, annotations, real-time collaboration, 100+ features. Used by 10K+ devs, serving ~half a billion users worldwide. Explore the SDK for free.
nutrient.io

Did you know that TypeScript is
the 1st most popular programming language
based on number of references?