JavaScript web-components

Open-source JavaScript projects categorized as web-components

Top 23 JavaScript web-component Projects

  • web-skills

    A visual overview of useful skills to learn as a web developer

  • relative-time-element

    Web component extensions to the standard <time> element.

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • open-ui

    Maintain an open standard for UI and promote its adherence and adoption.

  • github-elements

    GitHub's Web Component collection.

  • open-wc

    Open Web Components: guides, tools and libraries for developing web components.

    Project mention: Testing Web Components with @web/test-runner | dev.to | 2023-03-16

    npm init @[email protected] Need to install the following packages: @open-wc/[email protected] Ok to proceed? (y) y _.,,,,,,,,,._ .d'' ``b. Open Web Components Recommendations .p' Open `q. .d' Web Components `b. Start or upgrade your web component project with .d' `b. ease. All our recommendations at your fingertips. :: ................. :: `p. .q' `p. open-wc.org .q' `b. @openWc .d' `q.. ..,' See more details at https://open-wc.org/init/ '',,,,,,,,,,'' Note: you can exit any time with Ctrl+C or Esc ✔ What would you like to do today? › Scaffold a new project ✔ What would you like to scaffold? › Web Component ✔ What would you like to add? › Testing (web-test-runner) ✔ Would you like to use typescript? › Yes ✔ What is the tag name of your web component? … testing-components ./ ├── testing-components/ │ ├── .vscode/ │ │ └── extensions.json │ ├── demo/ │ │ └── index.html │ ├── src/ │ │ ├── index.ts │ │ ├── testing-components.ts │ │ └── TestingComponents.ts │ ├── test/ │ │ └── testing-components.test.ts │ ├── .editorconfig │ ├── .gitignore │ ├── LICENSE │ ├── package.json │ ├── README.md │ ├── tsconfig.json │ ├── web-dev-server.config.mjs │ └── web-test-runner.config.mjs ✔ Do you want to write this file structure to disk? › Yes Writing..... done ✔ Do you want to install dependencies? › Yes, with npm

  • vue-custom-element

    Vue Custom Element - Web Components' Custom Elements for Vue.js

  • lion

    Fundamental white label web component features for your design system.

    Project mention: Recommendation Needed: WebComponent UI Library | reddit.com/r/WebComponents | 2023-03-29

    You wanna have look at lion

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

  • fluentui-blazor

    Microsoft Fluent UI Blazor components library. For use with .NET 6.0 or higher Blazor applications

    Project mention: microsoft/fast-blazor 2.0: Blazor component library for FluentUI. Microsoft's official wrapper around the FluentUI Web Components | reddit.com/r/Blazor | 2023-02-09
  • dark-mode-toggle

    A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:

    Project mention: How to quickly Add Dark Mode to your web app in just 3 steps | dev.to | 2022-08-01

    In this post, we are going to learn quick implementation of the dark mode using dark-mode-toggle in our web apps.

  • atomico

    Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

  • emoji-picker-element

    A lightweight emoji picker for the modern web

  • diffhtml

    diffHTML is a web framework that helps you build applications and other interactive content

  • media-chrome

    Custom elements (web components) for making audio and video player controls that look great in your website or app.

    Project mention: Web components for custom video players | reddit.com/r/javascript | 2023-04-28
  • coreui

    Open Source UI Kit built on top of Bootstrap 5 and plain JavaScript without any additional libraries like jQuery

  • remount

    Mount React components to the DOM using custom elements

    Project mention: Is there a plugin that abstracts registering web components with React? | reddit.com/r/reactjs | 2023-03-24

    My favorite from when I looked into this a few months ago is called Remount: https://github.com/rstacruz/remount/

  • vaadin

    An evolving set of open source web components for building mobile and desktop web applications in modern browsers.

  • include-fragment-element

    A client-side includes tag.

  • cookbook

    VueJS + NodeJS Evergreen Cookbook (by ais-one)

  • webrix

    Powerful building blocks for React-based web applications

  • ficusjs

    FicusJS is a set of lightweight functions for developing applications using web components

  • clipboard-copy-element

    Copy element text content or input values to the clipboard.

  • web-components

    A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+

    Project mention: Creating Custom Component for NPS Feedback | dev.to | 2023-04-30

    Component UX. Do you need keyboard navigation? Mouse hover? Shortcuts? I suggest staying safe, combining existing components, and making your custom solutions sparingly.

  • tab-container-element

    An accessible tab container element with keyboard support.

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

JavaScript web-components related posts

Index

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

Project Stars
1 web-skills 6,517
2 relative-time-element 2,744
3 open-ui 2,628
4 github-elements 2,513
5 open-wc 2,034
6 vue-custom-element 1,926
7 lion 1,540
8 fluentui-blazor 1,352
9 dark-mode-toggle 1,065
10 atomico 967
11 emoji-picker-element 962
12 diffhtml 843
13 media-chrome 766
14 coreui 645
15 remount 645
16 vaadin 530
17 include-fragment-element 499
18 cookbook 446
19 webrix 418
20 ficusjs 390
21 clipboard-copy-element 374
22 web-components 329
23 tab-container-element 327
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.
www.sonarsource.com