Oat - Thư viện UI siêu nhẹ, không phụ thuộc, dùng HTML·CSS·JS ngữ nghĩa

 (oat.ink)
3 điểm bởi GN⁺ 2026-02-16 | 1 bình luận | Chia sẻ qua WhatsApp
  • Thư viện component UI siêu nhẹ dựa trên HTML và CSS, với cấu trúc hoàn toàn không cần quy trình build hay phụ thuộc vào framework
  • Chỉ gồm 6KB CSS và 2.2KB JS (đã nén và gzip), cho phép dùng ngay các thành phần UI chính cần thiết cho ứng dụng web
  • Styling trực tiếp các phần tử HTML ngữ nghĩa như <button>, <input>, <dialog>, đồng thời giảm tối đa việc dùng class để hạn chế làm rối mã nguồn
  • Mặc định hỗ trợ vai trò ARIA và điều hướng bằng bàn phím, có tính đến khả năng truy cập (Accessibility)
  • Hướng tới cấu trúc UI đơn giản, dựa trên tiêu chuẩn, có thể dùng lâu dài, thoát khỏi sự phụ thuộc và tình trạng over-engineering của hệ sinh thái JS phức tạp

Tổng quan về Oat

  • Oat là thư viện component UI ngữ nghĩa siêu nhẹ dựa trên HTML + CSS, hoàn toàn không có phụ thuộc bên ngoài
    • Không cần framework, công cụ build hay cấu hình môi trường phát triển
    • Chỉ cần thêm các file CSS và JS nhỏ là có thể dùng ngay
  • Với kích thước khoảng 8KB (6KB CSS + 2.2KB JS), có thể nhanh chóng dựng UI cơ bản cho ứng dụng web
  • Các component chính gồm Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar

HTML ngữ nghĩa và khả năng truy cập

  • Style được áp dụng tự động dựa trên thẻ và thuộc tính ngữ nghĩa, giúp duy trì thiết kế nhất quán ngay cả khi không chỉ định class
    • Ví dụ: áp dụng style trực tiếp cho các phần tử HTML cơ bản như <button>, <input>, <dialog>
    • Tự động nhận diện cả các thuộc tính ngữ nghĩa như role="button"
  • Hỗ trợ vai trò ARIA và điều hướng bằng bàn phím trên toàn bộ thành phần
    • Áp dụng chặt chẽ các tiêu chuẩn accessibility để cải thiện trải nghiệm người dùng

Không phụ thuộc và sự đơn giản

  • Không phụ thuộc vào framework hay thư viện JS/CSS
    • Loại bỏ hoàn toàn sự phức tạp của hệ sinh thái Node.js và các vấn đề phụ thuộc không cần thiết
    • Có thể dùng ngay mà không cần quy trình build hay quản lý package
  • Một số component động được triển khai bằng WebComponents, nên chỉ dùng lượng JS tối thiểu

Tùy biến và theme

  • Có thể dễ dàng điều chỉnh màu theme và style thông qua biến CSS
    • Nếu thêm thuộc tính data-theme="dark" vào body thì dark theme sẽ tự động được áp dụng
  • Thiết kế tổng thể chịu ảnh hưởng từ thẩm mỹ shadcn

Bối cảnh ra đời

  • Bắt nguồn từ sự không hài lòng với độ phức tạp quá mức và vấn đề phụ thuộc của các framework UI JavaScript hiện có
    • Mục tiêu là tránh các vấn đề “dependency hell” và “lock-in” của hệ sinh thái Node.js
  • Được tạo ra để trực tiếp sử dụng một thư viện UI có thể bảo trì lâu dài, đơn giản và dựa trên tiêu chuẩn
  • Nhà phát triển có thể dùng Oat để xây dựng cấu trúc UI có thể dùng ngay mà không cần quy trình build không cần thiết

Bài viết liên quan

1 bình luận

 
GN⁺ 2026-02-16
Ý kiến trên Hacker News

  • Tôi thấy nỗ lực tạo ra hiệu ứng đúng cho web app chỉ bằng semantic HTML elements thật tuyệt
    Tôi cũng thích việc theo đuổi mô hình “classless CSS”. Tuy vậy, khi xem catalog component thì thấy các semantic element, element cơ bản, thẻ data và thuộc tính aria, cùng với các lớp CSS bị trộn lẫn với nhau nên có vẻ thiếu nhất quán
    Dù vậy, việc CSS phản ứng với các thuộc tính aria để tạo kiểu vẫn rất ấn tượng. Có vẻ đây sẽ là một bài tập tốt để rèn tư duy theo cách tiếp cận aria-first thay vì dùng các thư viện component nặng như React
    Tôi đặc biệt thích việc thư viện component này có cả sidebar native. Phần lớn thư viện chỉ tập trung vào các component nhỏ có thể tái sử dụng, còn cái này được đặt tự nhiên cạnh main với cấu trúc aside > nav > ul nên rất gọn gàng

  • Tôi thực sự bất ngờ khi xem site này. Ngay khi chạm vào liên kết, trang đã tải tức thì, cảm giác nhanh gần như vụt qua như roi quất
    Tôi đã quên mất internet có thể nhanh như vậy, giờ lại muốn thử làm web dev

    • Nếu định làm site thì tôi khuyên nên thử với Astro. Tốc độ tải thật sự điên rồ
    • Tham khảo thêm thì Hacker News cũng là một ví dụ tốt cho cảm giác tốc độ tương tự

  • Dự án này mang lại cảm giác như thứ tôi từng kỳ vọng ở DaisyUI đã được hiện thực hóa đúng nghĩa
    Nếu kết hợp thêm Datastar thì có lẽ sẽ thành một tổ hợp rất mạnh dựa trên web standards. Đây là cách tiếp cận dựa vào công nghệ web thực sự hơn là dựa vào “ecosystem”

  • fosiao/rclone-webui-oat có vẻ đang
    thay thế rclone-webui-react vốn nặng nề và không còn được bảo trì

  • Bài blog được link ở trang chủ có lẽ sẽ khơi ra cuộc thảo luận thú vị hơn cả chính framework này
    Trong công việc tôi đều dùng cả Angular và Next.js, và ngày càng thấy đồng cảm với góc nhìn trong bài viết đó
    Bài liên quan: JavaScript ecosystem is a hot mess

    • Link hay đấy. Dù là bài viết từ năm 2021 nhưng vẫn còn nhiều nhận định còn nguyên giá trị
      Thảo luận khi đó: HN thread
    • Tôi thực sự thích website này. Từ lúc bấm đến khi tải xong hoàn toàn, độ trễ là 0 giây
    • Tham khảo thêm thì cùng chủ đề này cũng đã được thảo luận ở đây vào năm 2021

  • <aside> không phải lúc nào cũng là semantic element phù hợp cho sidebar
    Mục đích gốc của nó là dành cho nội dung có liên quan gián tiếp tới phần chính. Có lúc sidebar phù hợp với định nghĩa đó, nhưng không phải lúc nào cũng vậy

  • Có rất nhiều thư viện CSS semantic kiểu drop-in như thế này. Xem một dự án mới luôn là điều thú vị
    Chất lượng thì rất khác nhau, nhưng site này có tổng hợp hơn 50 stylesheet drop-in dành cho semantic HTML
    Link: Bộ sưu tập Drop-in Minimal CSS

    • À, ý bạn là “drop-in”. Tôi không ngờ chỉ một dấu gạch nối lại quan trọng đến vậy :)
    • Cái này đáng được chú ý nhiều hơn. Thành thật mà nói, nó còn thú vị hơn cả bài gốc
    • Tôi cực kỳ thích nó. Có thể duyệt xoay vòng các stylesheet bằng mũi tên bên phải
    • Không biết trong danh sách đó có stylesheet nào đáng khuyên dùng không

  • Dự án này làm tôi nhớ tới các phiên bản đầu của Bootstrap cách đây 10 năm
    Bootstrap bây giờ đã phình to hơn nhiều, nhưng ở đây vẫn có cảm giác đơn giản của thời đó
    Tham khảo: Trang chính thức của Bootstrap

  • Cảm ơn vì đã test cả trên trình duyệt cũ. Đây đúng là một thư viện siêu tối giản
    Ảnh chụp màn hình: ảnh 1, ảnh 2

    • Tôi tò mò không biết có lý do gì khiến bạn thường dùng trình duyệt cũ làm trình duyệt chính không

  • Tôi cũng từng thử điều gì đó tương tự trong app của mình, và nhận ra một số thẻ semantic/functional đến giờ vẫn chưa được trình duyệt hỗ trợ đúng cách
    Ví dụ, nếu dùng showModal của thẻ dialog trên Safari thì nó sẽ tính toán lại layout của toàn bộ trang và chậm hơn Chromium 59 lần
    Dù vậy, tôi vẫn thích bản thân cách tiếp cận này