Showcase: Oat CSS as the foundation for an A2UI renderer

[MisterTK]

Hi @knadh — just wanted to share a project built on Oat.

a2ui-oat is a community renderer for Google's A2UI protocol that uses Oat CSS + JS as its styling and component foundation. It maps 37 A2UI catalog components to semantic HTML, which Oat then styles automatically — no utility classes, no custom CSS required.

It also uses your companion libraries:

• tinyrouter.js — backs the navigateTo registered function for client-side SPA routing
• floatype.js — backs the Autocomplete component
• oat.js — Web Components for Tabs, Dropdown, and Toast

The total client footprint is ~13KB (all Oat ecosystem libraries combined, minified + gzipped).

Why Oat was the right fit

A2UI renderers need to turn structured JSON into styled UI with no framework dependency. Oat's semantic styling approach — where <table>, <progress>, <details>, <dialog> etc. look good with zero classes — made it possible to build a renderer that outputs plain HTML and gets production-quality styling for free. The ~8KB size also makes it the lightest option in the A2UI renderer ecosystem.

Links

• GitHub: https://github.com/MisterTK/a2ui-oat
• npm: https://www.npmjs.com/package/a2ui-oat
• Live demo: https://mistertk.github.io/a2ui-oat/
• A2UI registry PR: Add a2ui-oat: framework-free web renderer (v0.9) google/A2UI#1032

No action needed — just wanted you to know Oat is being used in this context. Thanks for building such a clean set of libraries.

[knadh]

Cheers. TIL: A2UI