JavaScript Webcomponents

Open-source JavaScript projects categorized as Webcomponents | Edit details

Top 23 JavaScript Webcomponent Projects

  • GitHub repo riot

    Simple and elegant component-based UI library

    Project mention: [AskJS] Looking for "forgotten" framework/MVC | reddit.com/r/javascript | 2021-12-17
  • GitHub repo onsenui

    Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

    Project mention: Native-like Navigation of Web apps | news.ycombinator.com | 2021-11-21
  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  • GitHub repo hybrids

    Extraordinary JavaScript framework with unique declarative and functional architecture

    Project mention: Intro to Web Components - Full Walkthrough | reddit.com/r/css | 2021-08-16

    Another project, hybrids does a great work on allowing it to be functional instead of class.

  • GitHub repo lwc

    :zap: LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation

    Project mention: Which frontend framework is based on Web Components the most? | reddit.com/r/Frontend | 2021-09-15

    Biased but https://lwc.dev/

  • GitHub repo Odoo

    Javascript and SVG odometer effect library with motion blur

    Project mention: Web Effect | dev.to | 2021-03-01

    bounty - Javascript and SVG odometer effect library with motion blur

  • GitHub repo reactive-elements

    Allows to use React.js component as HTML element (web component)

  • GitHub repo react-svg-pan-zoom

    :eyes: A React component that adds pan and zoom features to SVG

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo vaadin

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

    Project mention: List of Web Component libraries and systems | dev.to | 2021-03-31

    vaadin

  • GitHub repo snuggsi

    snuggsi ツ - Easy Custom Elements in ~1kB

    Project mention: Snuggsi — Easy Custom Elements in ~1kiloByte | reddit.com/r/webdev | 2021-04-30
  • GitHub repo lrnwebcomponents

    @lrnwebcomponents Monorepo for NPM based element definitions

    Project mention: Carded, but with Flashes | dev.to | 2021-12-12

    We implemented Simple Colors. This allows us to implement a simple dark mode, and the library was specifically created by the ELMSLN to be compliant with contrast ratios for accessibility standards.

  • GitHub repo zero-md

    Ridiculously simple zero-config markdown displayer

    Project mention: Favorite self-rendering Markdown tool in JavaScript | news.ycombinator.com | 2021-12-12
  • GitHub repo github-wc-polyfill

    Ensure that all GitHub and GitLab scripts required for UXP and SeaMonkey are loaded correctly

    Project mention: Pale Moon extension compatibility is being restored :) | reddit.com/r/palemoon | 2021-12-14
  • GitHub repo patterns-library

    AXA CH UI component library. Please share, comment, create issues and work with us!

    Project mention: List of Web Component libraries and systems | dev.to | 2021-03-31

    Patterns (AXA)

  • GitHub repo webcomponent-instagram-widget

    🖼 Simple Instagram Widget: Photos Box of your Instagram Profile for your blog or website with this WebComponent.

    Project mention: My Collection of Svelte Boilerplates | dev.to | 2021-04-05
  • GitHub repo custom-elements-manifest

    Custom Elements Manifest is a file format that describes custom elements in your project. (by open-wc)

    Project mention: Reactifying Custom Elements using a Custom Elements Manifest | dev.to | 2021-06-23

    You can read more about @custom-elements-manifest/analyzers rich plugin system here: Plugin Authoring Handbook, and be sure to check out the cem-plugin-template repository.

  • GitHub repo gatsby-remark-highlight-code

    Adds stylish cards and syntax highlighting to code blocks in markdown files

    Project mention: A blogpost about Gatsby and D3 / Some problems with DeckDeckGo Highlighting | reddit.com/r/gatsbyjs | 2021-11-08

    Besides showing the blogpost, I also want to ask about a problem I've been having with DeckDeckGo code highlighting. I have to refresh the website a couple of times to make the code highlighting work, as it randomly throws some errors. This seems to be something discussed by this issue last year. I tried its fix, but it didn't work. The blog is open source and built with a heavy inspiration on LekoArts' blog template, and you can find it here.

  • GitHub repo greenwood

    A modern and performant static site generator supporting Web Component based development.

    Project mention: Do we need another framework? Or a better understood framework for using native javascript? | reddit.com/r/webdev | 2021-11-26

    I've come to realize a lot of what makes modern development great is things like scaffolding, dev servers and live reloading, and simple commands to bundle and package the site, but without all the overhead of a full client side library or framework if all I want to do is write and ship modern and vanilla HTML / CSS / JS, starting with a simple index.html if that's all I needed. That is why I created GreenwoodJS, which yes is admittedly another "framework", but I'm consciously not trying to reinvent any client side wheels (Web Components ftw!), and only trying streamline the local development side, so if you want to stay vanilla, you can!

  • GitHub repo event-driven-web-components-realworld-example-app

    Exemplary real world application built with Vanilla JS Web Components in an Event Driven Architecture

    Project mention: Build an Event Driven TodoMVC App with 8 lightweight VanillaJS Web Components | dev.to | 2021-07-03

    Note about Browser compatibility: This example uses the attribute "is", which is not yet supported by IOS. It is possible to simply avoid this problem by wrapping elements with web components. As can be seen at our Real World Example.

  • GitHub repo Cue

    Cue.js - Data driven Custom Elements (by monokee)

    Project mention: I made a PWA for Color Matching | reddit.com/r/webdev | 2021-05-16

    I sketched the design in figma and built the frontend with Cue.js (my own reactive wrapper around custom elements). The image processing is done in WebGL. I tried to recreate the image drag & zoom behaviour from iOS.

  • GitHub repo jl-coloringbook

    Open Source coloring book implemented as a webcomponent

    Project mention: Released a new version of my coloring book self contained web component. Demo and code | reddit.com/r/javascript | 2021-09-07

    Demo: https://github.com/collinph/jl-coloringbook All the docs and detailed descriptions are over on github. It's a tool that only requires jquery (removing that dependency soon). You can simply include the script on any page, and literally include a jlcolorbook tag-- it will draw the coloring book on your page, using whatever images you like. It allows saving, printing, and other functions. 18K uncompressed, unminified.

  • GitHub repo simple-to-do

    Forked from dfinity/examples/simple-to-do

    Project mention: AMA: We are Anna, Alexa, Elizabeth, Igor, Lomesh, Matthias, and Michael from the Growth team Ask Us Anything about growing the Internet Computer Ecosystem | reddit.com/r/dfinity | 2021-07-07

    Here is an example of a demo app I built using native Web Components, as another reference: https://github.com/krpeacock/simple-to-do

  • GitHub repo twitch-gameboy-css

    Realistic GameBoy console with CSS / WebComponents

    Project mention: Nintendo GameBoy with vanilla CSS/Javascript | reddit.com/r/webdev | 2022-01-08
  • GitHub repo twitch-nintendo-nes

    NaNtendo: A visual Nintendo NES console with pure HTML/CSS/Javascript (WebComponents)

    Project mention: CSS Nintendo NES without images | reddit.com/r/webdev | 2021-11-13

    🐱 Repo: https://github.com/ManzDev/twitch-nintendo-nes

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 2022-01-08.

JavaScript Webcomponents related posts

Index

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

Project Stars
1 riot 14,622
2 onsenui 8,536
3 hybrids 2,536
4 lwc 1,148
5 Odoo 769
6 reactive-elements 694
7 react-svg-pan-zoom 610
8 vaadin 477
9 snuggsi 334
10 lrnwebcomponents 188
11 zero-md 159
12 github-wc-polyfill 77
13 patterns-library 75
14 webcomponent-instagram-widget 75
15 custom-elements-manifest 64
16 gatsby-remark-highlight-code 47
17 greenwood 41
18 event-driven-web-components-realworld-example-app 36
19 Cue 30
20 jl-coloringbook 14
21 simple-to-do 12
22 twitch-gameboy-css 8
23 twitch-nintendo-nes 6
Find remote jobs at our new job board 99remotejobs.com. There are 29 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Static code analysis for 29 languages.
Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
www.sonarqube.org