TLDR: This post is made to rave about repo I found called json-schema-form-element a lit-based component library for form generation that works with all major front-end / metaframeworks, but also to show how I’m betting on Lit for the future of the web._
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.
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.
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.
While I haven’t used Shoelace directly yet, they tout that it’s possible to fully customize the components styles, unlike bootstrap which was expected to be used as is. The overuse of bootstrap ultimately led to the homogenization of web-design, making websites feel “bootstrap”. With things like CSS Variables and custom styles I’m hoping Shoelace doesn’t fall into this trap.
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).
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.
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.
The example repo uses Astro which allows the author to demo all of the usages for the library, check it out here: index.astro. Using Astro for this is just another thing the author got right here.
I’m really excited about all this, and it makes me have some faith in the web again. I think that Lit is a step in the right direction especially the ability to do SSR / SSG and hydrate a web page. Hopefully 🤞 Shoelace can get SSR running, which is currently one hurdle, but I think it is achievable.
Anyway, what do you think of Lit? What do you think of the approach that json-schema-form-element takes at making an interoperable component library? Comment below 👇 and let me know!
Follow me on Mastodon for more thoughts on the future of web-development, web components, and typescript stuff @indieweb.social@thomasreggi.
