HTML Web Components

1. cami.js

   1 8 399 6.4 HTML

   Cami.js is a simple yet powerful toolkit for interactive islands in web applications. No build step required.

   

   Preact requires a build step otherwise you don't get JSX and you have to build applications a la mithril.js mode:

   > const app = h('h1', null, 'Hello World!');

   With Web Components no build step is required and you're still able to build JSX'ish code. See the code below this section: https://github.com/kennyfrc/cami.js#key-concepts--api

2. CodeRabbit

   coderabbit.ai featured

   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.

   

3. htm

   2 44 8,769 0.0 JavaScript

   Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

   

   You can use the htm library as a pure client-side jsx: https://github.com/developit/htm

   It is not completely the same, but far better than that h function madness.

4. supercomponent

   3 2 10 3.1 HTML

   Give your Web Components modern-day superpowers.

   

   For me, that's the beauty of Web Components. You can find (or build) a base class that works the way you need it. I like a React class component style class with an XState-inspired state machine built in.

   https://github.com/codewithkyle/supercomponent/blob/master/s...

5. select2

   4 30 25,966 5.1 JavaScript

   Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

   

   Most people using react aren't building SPAs. Vue/React can be used the same way as jquery, which is to add enhanced UI functionality that server-side HTML views simply can't offer.

   The best example is a multi-select box, or a searchable select box with autocomplete (what W3 calls the combobox pattern https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) which in jquery was usually via https://select2.org/

   For example, on my company website there's a timezone select box with are 151 options. Asking a user to simply scroll through 100+ to find theirs is annoying vs typing a few characters and hitting enter.

   There's many examples of select boxes like that and there really is no static server-side way to solve this problem (I tried hard to think of one)... without creating a multi-page Wizard for what should be a single field on a larger form.

   If you're building a SaaS product there are many highly-interactive components that demand JS and there's really no better mainstream solution atm than static-first sites with small "islands" of Vue/React style components (ideally with hydration) where interactivity is required.

   People still abuse React/Vue of course, but the trend is 100% moving back to "mostly static" rather than slow SPAs and IMO JS-powered components are not never going away unless browsers start offering these complex components built-in.

6. htmx

   5 640 43,975 9.7 JavaScript

   </> htmx - high power tools for HTML

   

   Am I misreading this or is it what https://htmx.org/ provides?

7. marimo

   6 29 11,689 9.9 Python

   A reactive notebook for Python — run reproducible experiments, query with SQL, execute as a script, deploy as an app, and version with git. All in a modern, AI-native editor.

   

   We use web components in our project (a reactive Python notebook that, among other things, lets users build simple web apps [1]) to make it easy for the user to instantiate and compose our UI elements. Users can easily interpolate these elements into markdown, for example, since their representation is just HTML.

   [1] https://github.com/marimo-team/marimo

8. lit

   7 173 19,396 8.6 TypeScript

   Lit is a simple library for building fast, lightweight web components.

   

   I am more a fan of the augmented style because it doesn't entrap you in dev lock-in to platforms.

   The problem with frameworks, especially web frameworks, is they reimplement many items that are standard now (shadowdom, components, storage, templating, base libraries, class/async, network/realtime etc).

   If you like the component style of other frameworks but want to use Web Components, Google Lit is quite nice.

   Google Lit is like a combination of HTML Web Components and React/Vue style components. The great part is it is build on Web Components underneath.

   [1] https://lit.dev/

9. SaaSHub

   www.saashub.com featured

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

   

10. webcomponents

    8 47 4,427 5.4 HTML

    Web Components specifications

    

    I've recently just started playing with Web Components without a build environment. Meaning, no npm, no bun, no webpack, etc, and no dependencies; in typescript. Intellij can autocompile down to js and the browser view injects a small onchange handler for live updates when developing. So far no problems.

    The only thing holding web components back seems to be HTML Modules; being able to link to a .html file instead of a .js file to import a web component. Because of this if you want to use templates or anything more complicated you need to do the ugly inject of .innerHtml = `...`, which I thought would be a problem but the IDE parses the template string very nicely. It would be great to make a component in HTML and any javascript you would put in a tag. It seems like there a lot of bureaucracy involved in getting HTML Modules out the door since its been eight years.<p><a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md#high-level-summary">https://github.com/WICG/webcomponents/blob/gh-pages/proposal...</a>

11. chat-app

    9 5 0 4.0 HTML

    A contact us demo widget built using Saasufy. (by Saasufy)

    

    Web Components are extremely powerful. I built a chat app with authentication with 2 different blockchains, GitHub OAuth login and access control using only 120 lines of HTML on a single page with no framework:

    https://github.com/Saasufy/chat-app/blob/main/index.html#L23...

    You can try the app here (if you have GitHub): https://saasufy.github.io/chat-app/

    The backend is serverless built using Saasufy.com - The platform/startup I'm working on currently: https://saasufy.com/

12. webcomponents-blog-examples

    10 1 0 5.3 JavaScript

    

13. Filestash

    11 116 11,002 9.6 JavaScript

    :file_folder: A file manager / web client for SFTP, S3, FTP, WebDAV, Git, Minio, LDAP, CalDAV, CardDAV, Mysql, Backblaze, ...

    

    I do use them on my OSS work (https://github.com/mickael-kerjean/filestash/tree/master/pub...) which is used by many thousands of people

14. custom-elements

    12 2 248 3.5 JavaScript

    All inclusive customElements polyfill for every browser

    

    There is a polyfill for customiziing built-ins on Safari.

    https://github.com/ungap/custom-elements

Suggest a related project