#27: Web Awesome, the First All-in-One Web Components + CSS Framework, is Finally Here
And it's as fabulous as we could have dared hope for.
Friday, July 11, 2025
I almost titled my blog post Shoelace is Now Officially Web Awesome, and It’s Really Awesome, but I didn’t want to get too corny with the jokes.
Still, it’s undeniable: Web Awesome is an awesome successor to what in my opinion was already the best open source web components library on the market. Now we have the best CSS framework on the market.
Bar none. 👏
Shoelace was originally a play on words (as a subtle reference to “Boostrap”), but the irony now is that Web Awesome is a full replacement for Bootstrap. Or Tailwind or any other CSS framework for that matter.
You can literally just <p>Hello World</p> a brand new web project, drop Web Awesome in, and you have the building blocks for your entire UI. What makes this particularly compelling is you aren’t locked into an onerous build system or any significant frontend architectural decisions.
Web Awesome works with static HTML.
Web Awesome works with PHP.
Web Awesome works with Ruby.
Web Awesome works with Go.
Web Awesome works with Python.
Are you getting it yet??
If you were to pick almost any other modern component framework, you would be required to settle on using React, or Vue, or Svelte, or Solid, or…you get the idea. Not the case here, because all of the CSS is…um…just CSS and all of the components are…um…just web components. Native web APIs across the board. (Yes, Web Awesome uses Lit under the hood as a library to build its web components, but that’s an implementation detail which has little bearing on how you, the author of your individual application, use the framework.)
I should also mention that the reason Web Awesome is named thusly is because Shoelace was acquired by the Font Awesome team back in 2022. Web Awesome is currently in public beta after a long development cycle funded in part by a Kickstarter. Just like Font Awesome, Web Awesome will have extra “pro” features you can buy, but the core system is and will always remain free.
Thanks for being a That HTML Blog subscriber! 🙏🌟
Cheers,
Jared ✌️
🤔🌩️ Things that make you think: 💡😃
I’ve found the use of a global store and custom events to be very effective. It bypasses the “prop drilling” nightmare that is React. Replicating “props” with custom element attributes is a bad idea. Yeah, I know modern React state libraries achieve similar. Why use React to begin with just to work around one of its core design failures?
Dexie (a wrapper of IndexedDB) has a “live query” feature that allows me to dispatch an event when new content is synced. The nature of my web app means that data is mostly static. I don’t need much fine grained reactivity. This is a blessing because DOM manipulation can be tedious.