Oat – Ultra-lightweight, zero dependency, semantic HTML, CSS, JS UI library

[twapi]

https://github.com/knadh/oat

Related: https://nadh.in/blog/javascript-ecosystem-software-developme...

[jamamp]

I think it's valiant to try to do all of this with semantic HTML elements to achieve the right effects, and try to go for a "classless CSS" paradigm to get a nice looking and functional web app (as a fan of classless CSS myself). But scrolling through the component catalog, it unfortunately feels like it's all over the place and inconsistent with semantic vs basic elements, data tags vs aria attributes, and sprinkling some css classes over some of it.

I do very much like that by introducing aria attributes, the CSS reacts to it and styles it appropriately. As opposed to a full-blown react component library which does all of that for you. It would be a good exercise for developers to think aria-first and let the library just help with styling.

Lastly, I think the best part is that this component library has a native sidebar. So many of these I see and they have a nice web page which showcases all the components and I want to replicate their layout and nav/sidebars but they only focus on smaller re-usable components and not the layout. So that's a nice touch, I think. And, as someone who keeps an eye on but doesn't do a lot of frontend, the fact that a sidebar is an aside > nav > ul next to a main just makes so much sense and doesn't have a lot of cruft around it.

[skeledrew]

This site got me going. Almost had whiplash when I tapped a link and the page loaded literally instantly. I've almost forgotten that that's possible on the internet. I'm not a web dev, but I'm inspired to get into it now because of this site.

[thedumbname]

Try uBlock Origin and most of your sites will load instantly (hint: most of the time it is third-party analytics/ads issue)

[darkvertex]

You should try making a site with Astro. Load speed is cray cray.

[1718627440]

I mean you also have HN as a reference.

[swiftcoder]

The motivating blog post[1] linked from the front page is probably going to generate a more interesting discussion than the framework itself.

As someone who has to deal with both angular and nextjs for different (but overlapping) stacks at work, I find myself increasingly sympathetic to this viewpoint.

[1]: https://nadh.in/blog/javascript-ecosystem-software-developme...

[e12e]

Nice link - still relevant IMNHO - even though it's from 2021.

Discussed at the time:

https://news.ycombinator.com/item?id=28892933

[skeledrew]

This website pleases me greatly. 0 time from tap to fully loaded pages.

[xyzzy_plugh]

Previously (2021): https://news.ycombinator.com/item?id=28892933

[JSR_FDED]

This has the simplicity I thought I was going to get from DaisyUI but didn’t. Pairing this with Datastar seems like a super powerful combination that leans on actual web standards, not “ecosystems”.

[potato-peeler]

Thank you testing this on older browsers before releasing. This is truly an ultra minimal library - https://ibb.co/DDGmLYdg, https://ibb.co/h1WQG3GK

[appplication]

Genuine question, do you normally use old browsers as your daily driver for interfacing with the web? I’d be interested in learning why.

[hiyer]

Reminds me of what bootstrap [1] was like around a decade ago. It's gotten quite a bit bloated since then though.

1. https://getbootstrap.com/

[hkt]

This is gorgeous. I hate frontend because of its sheer gratuity, and this is the kind of thing that might get me back into it. The only other contender for interactivity I'd consider is HTMX, and I'm going to boldly assume I'll be able to combine them without too much bother.

Bravo to the author, keep at it. I'll be recommending this to anyone who will listen.

[culi]

<aside> is not the correct semantic element for sidebars. The purpose of <aside> is for content that is indirectly related to the "main" content of the page. Sometimes a sidebar fits that definition but not always

[roxolotl]

There’s a ton of semantic drop in css libraries similar to this. Love seeing new ones. Quality varies wildly but this site shows 50+ drop in stylesheets for those writing semantic html: https://dohliam.github.io/dropin-minimal-css/

[layer8]

I had to read your comment three times before figuring out that you mean “drop-in”. Sometimes hyphens do matter! :)

[neya]

This isn't upvoted enough. This is more interesting than the OP's project! Thanks for sharing!

[sgc]

I love it. You can use the right arrow to cycle through them.

[heyyeah]

do you have any recommendations from the list?

[nkmnz]

I know that guy from listmonk! I always thought the frontend could use some love and planned to spend a couple of days on contributing a couple of ideas, but I never came around. Now I know why things are as they are :)

[synergy20]

https://github.com/fosiao/rclone-webui-oat seems replacing the heavy duty unmaintained react version at https://github.com/rclone/rclone-webui-react

[anton-107]

Why do all the UI component libraries always feature an accordion (something i can build myself in 5 minutes and very rarely need), but always omit a date picker / calendar component (something that is needed almost in every corporate web form and really requires a lot of effort to build)?

[anton-107]

I must appoligize - it is there, hidden under "Form elements" in the left menu. Kudos to the authors!

[rohitpaulk]

Surprised that none of the comments here are comparing this to Bootstrap.

[weiliddat]

Yeah reminds me of early Bootstrap

[JCattheATM]

Wouldn't a comparison to Bulma be more apt?

[kitd]

Great work! PicoCSS feels a bit too minimalist at times. This looks like a better balance of lightweight and functional.

[gaigalas]

The form component:

https://oat.ink/components/#form

Looks a lot like a raw HTML+CSS framework I made in 2009:

https://alganet.github.io/ghiaweb/ (it has some small glitches, browser widgets changed a lot since 2009).

Particularly the use of the label, fieldset and legend elements as native accessible solutions instead of instrumenting divs. Even the styling and the example resembles it a bit!

https://oat.ink/components/#grid

This is where it falls from grace IMHO. Grid classes are fundamentally non-semantic. I know they're popular and useful, but there must be a better (semantic) way of doing this. I haven't found it yet, but there must be.

[Nelkins]

Don't know about anyone else, but the first thing I do with these types of libraries to check out the Accordion component and see if it slides out with a nice animation. This has become my litmus test for how well designed a component library is.

[jlg23]

My initial reaction was that I have to use this just because of the buzzword density in the title. But after reading up, it looks like the author was pretty successful in moving the bloat from code to announcement title. I'll give this a try!

[eddd-ddde]

The "preview" and "code" buttons in the components break the "alt+arrow" bindings to go back to the previous page. Instead it just alternates between "preview" and "code".

[superkuh]

No, this is "Oat - Ultra-lightweight, semantic, zero-dependency Javascript UI component library". If it doesn't work without javascript it is not an HTML UI component library.

[recursive]

If it doesn't work without HTML, it's not a JS library.

[mega-tux]

I like it. Currently I'm using BeerCSS and I'm pretty satisfied with it. This library is smaller. Any other selling aspect vs BeerCSS? Thanks!

[mkl]

Seems pretty unresponsive to me. I'm getting at least half a second of delay before the accordion, drop-down, or switch do anything. Chrome on Windows.

[skeledrew]

I have 0 delay for all parts of it. Everything loads and works instantaneously. Firefox on Android.

[recursive]

My first guess is that one of your add-ons is interacting badly.

[temporallobe]

This is of special interest to me, because man do I hate UI frameworks with tons of external dependencies. Looking at you, Bootstrap.

[mxuribe]

I used to think bootstrap was bloated too...and then i had heard - now, i don't know if its true - that bootstrap was originally intended *ONLY* as an internal prototype building tool, and any bloat did not matter...because expected audience, usage would be totally fine for a bloated framework...When i heard, i gave boostrap more of a pass...but, then again, i stopped using it, and began using other, lighter weight frameworks...and nowadays, i so rarely touch any web stuff...and when i do its only for me so then use zero frameworks, and merely display whatever default the browser shows with zero CSS, javascript...then again, my private web page needs are so basic anyway.

[wsaryoo]

I am building thing similar

https://jingz.github.io/farga/site/index.html

[wsaryoo]

Focusing on using it for admin application or data density site

[jitbit]

I tried doing something like that in my app, and quickly discovered that some modern semantic/functional tags are STILL not supported in some browsers. Or work badly.

For example, in Safari showModal for a dialog tag causes recalculating layout for EVERY element on a page, it’s up to 59x slower than chromium…. :(

But I love the idea

[mrbluecoat]

Nice solution. Reminds me of https://semantic-ui.com/ and https://fomantic-ui.com/

[masklinn]

It’s a bit odd that the accordion uses details but the dropdowns require a custom element.

[vpribish]

how do you contrast this with https://picocss.com/ ?

I like your presentation of the components, but i'm having trouble finding the essential distinctions

[leejoramo]

I often use Pico CSS, and a comparison would be nice.

[gormen]

The appeal of libraries like this is not minimalism for its own sake, but the reduction of long‑term operational risk.

[saila]

Looks neat. Assuming the site is built using the framework, I ran a couple of the component pages (e.g., accordion) through Lighthouse and there are a number of accessibility issues. Just a heads up.

[elseleigh]

This is a very nice library. At a first reading it seems complete (but did I see summary/detail - I don't remember). Bookmarked for further investigation. Congratulations and thank you.

[bpev]

Amazing! I recently started building something similar for the same reasons, but more out of frustration rather than out of desire. I'll have to give this one a try and see if it fills the need.

[mixmastamyk]

Looks good and like the lightweight aspect. As always, what do I have to do get tabs that look like tabs? What do people have against tabs that look like tabs, instead of buttons?

[neon_me]

Nice job! Clicked tru my obscure mobile firefox and all worked well!

[Xeoncross]

Thank you for sharing, I would like to see a navigation/menu component added though as that's required for most websites.

[bitbasher]

Confusing name, conflicts with Oat++?

https://oatpp.io/

[scandox]

Was looking at the spinner component for a few seconds thinking "that's a bit slow"...

[Maxion]

This looks very very cool. Will definitely look in to using this for more static internal tools!

[TrevorFSmith]

If nothing else, it's refreshing to see nicely modern CSS and JS formatted and laid out in a legible manner. https://github.com/knadh/oat/tree/master/src

[intrasight]

What's with variable names starting with "#" as first character?

[afishhh]

If you are referring to class members in the JavaScript then those are private fields[1]

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

[animal_spirits]

That's just markdown headers. Some people like to include # as part of the header aesthetic

[andrei_says_]

Thank you for this, can’t wait to use. Minimalism at its best.

[mgaunard]

The code example doesn't render for me.

[freeopinion]

Ditto, if you mean the codeblock in the Typography section.

edit: clarification, focus

[scirob]

ultra-lightweight, these dev's probably go hiking. I like : )

[dankobgd]

People need to stop with these stupid 12 column grids and learn how grid and flex work. Other elements are ok but this is just stupid

[pphysch]

It's a 12 column grid system built with CSS Grid. 12 column grids are a common design pattern. What would you propose instead?

[yoz-y]

Claims no classes but uses data- attributes and also classes (just look at the button example…)

Looks okay, but I don’t see why to use this over something like Marx if all you need is to not have bare browser default styling.

[kitd]

The claim is "no classes for native elements". Ie you don't need classes just to create a button etc.

[mcknz]

should call it oatmilk for max exposure

[scandinavian]

5 day old repo, 2000 stars on GitHub, 400 total weekly downloads on npm. Frontpage of hacker news with a bunch of weird comments. Moderation has been lacking recently.

[codegeek]

You are jumping to conclusions. The author is the CTO of the largest online brokerage in India but more importantly, they have created many open source software of good quality. His website and blog are of great quality. Whether you think this library deserves more attention or not is your personal preference but it is far from spam. I havr no affiliation with them but like their work.

[ssiddharth]

The author is the CTO of Zerodha, India’s largest online brokerage. Not that it matters, just an observation.

[dang]

I'm not sure which comments you're finding weird, but I spot checked a bunch and didn't see anything that looked particularly bogus, other than https://news.ycombinator.com/item?id=47026348 and some trollish ephemera.

The upvotes on the submission look legit to me, as does the submission itself.

[sschueller]

Sad that HN is now also getting boted by LLMs. People are just shameless. HN is one of the few places left where you can post / self promote something you have made only for people to take advantage of it.

[BoneShard]

AI Slop, basically a couple of LLM prompts will generate similar shit now.

[koakuma-chan]

This is kind of misleading. It says it's an HTML UI library, then it says HTML + CSS, and then it says it also includes JavaScript. Why is this better than, say, DaisyUI?

[villgax]

I just want something that's as easy to use as DaisyUI or even Bulma with one good set of components & themeing(beyond just palletes, like rounding, blur, transparency etc) & I'm good. For all the self-hosting model afficianados surely needing a build platform to create a blackhole of npm modules & internet connectivity for even a single build surely negates the entire point of a coding LLM if we still force it to deal with frontend

[httpsterio]

Iirc there's a few web components in there which would require js.

[dang]

(Submitted title was "Oat – Ultra-lightweight, semantic, zero-dependency HTML UI component library" - we've replaced it now)

[boston_clone]

Generated comments and bots aren't allowed here, see: https://news.ycombinator.com/item?id=46888857

[akrauss]

No Datepicker?

[bdcravens]

As pointed out in another comment, it's under the form elements, not listed as a top-level component as many UI libraries do

https://oat.ink/components/#form

Which actually makes sense: Oat's driving philosophy seems to be to use and enhance native controls as much as possible, and the date picker is already a native type on the input element.

[bartvk]

I'm not a web dev, but doesn't HTML come with a date picker?

[visarga]

This does not even need a LLM skill, just load the whole code up in context, so efficient.

[recursive]

Doesn't even need a context either.

[deafpolygon]

I love it. We need to see more of this.

[bartvk]

I'm not a web dev, what do you love about it?