Framework Interoperable Component Libraries Using Lit Web Components.

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • shoelace-css

    A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME. WE ARE LIVE ON KICKSTARTER! ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡

  • Enter Shoelace an undoubtedly witty pin on "Bootstrap", that aims at bringing back direct usable components but by offering web-components by default, but it also offers web-components wrapped in a react component as well. This is at the core of building a framework interoperable component library, 1) use web-components, 2) wrap them in that specific language's syntax.

  • jsfe

    A Custom Element that auto-generates forms, declaratively. Works with Lit, Solid, Vue, Svelte, React, Astro, vanillaโ€ฆ

  • The other day I stumbled upon my dream project the other day json-schema-form-element (github, editor) which is heavily inspired by the react counterpart. It's exactly what I wanted to make. This project, json-schema-form-element is a masterclass in how to make a modern web-component-first / "authored" library which is also interoperable with all other frameworks.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • Component libraries, love them or hate them it's how web developers quickly cobble together bits of code to form a semi-usable website. From Bootstrap to things like Material UI and more recently Radix UI and Tailwind. With the way that front-end frameworks have been proliferating there are a lot of frameworks out there React, Angular, Solid, Vue, Astro and Lit. How are we able to write framework agnostic component libraries? That way you don't need to re-learn and find alternatives to the things you love to use if you want to build an app in a different framework.

  • react-jsonschema-form

    A React component for building Web forms from JSON Schema.

  • I've been very passionate about a project called react-jsonschema-form (github, editor). I personally hate writing forms, and love the idea of serializable components, schema, validation all in one. I've always wanted an alternative to this project that offered an alternative to react, and possibly the ability to render a schema form to static HTML (like ssg).

  • Preact

    โš›๏ธ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

  • I've thought about this a lot while using other frameworks like Deno Fresh which uses Preact under the hood, mainly for JSX templating, but also for islands functionality. Within that framework you can't really use React component libraries. You start to think more about generating static HTML like this example from the Deno blog [A Whole Website in a Single JavaScript File, cont'd](https://deno.com/blog/a-whole-website-in-a-single-js-file-continued, which shows building a simple webpage with routes all in one typescript file, a site that serves no Javascript to the browser.

  • lit

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

  • Lit is having a moment, one would say it's on fire ๐Ÿ”ฅ๐Ÿคฃ. It's being used everywhere from the web version of Photoshop to Microsoft's new windows app store. I think something clicked for me recently as to why lit is the major choice when it comes to the future of the web, and web components overall.

  • fresh

    The next-gen web framework.

  • I've thought about this a lot while using other frameworks like Deno Fresh which uses Preact under the hood, mainly for JSX templating, but also for islands functionality. Within that framework you can't really use React component libraries. You start to think more about generating static HTML like this example from the Deno blog [A Whole Website in a Single JavaScript File, cont'd](https://deno.com/blog/a-whole-website-in-a-single-js-file-continued, which shows building a simple webpage with routes all in one typescript file, a site that serves no Javascript to the browser.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts