Oat - pustaka UI HTML·CSS·JS semantik ultra-ringan tanpa dependensi

 (oat.ink)
3 poin oleh GN⁺ 2026-02-16 | 1 komentar | Bagikan ke WhatsApp
  • Pustaka komponen UI ultra-ringan berbasis HTML dan CSS dengan struktur tanpa proses build maupun ketergantungan framework sama sekali
  • Terdiri hanya dari 6KB CSS dan 2.2KB JS (setelah kompresi dan gzip), sehingga elemen UI utama yang dibutuhkan aplikasi web bisa langsung digunakan
  • Menata elemen HTML semantik secara langsung seperti <button>, <input>, <dialog>, sambil meminimalkan penggunaan class agar mengurangi polusi kode
  • Dengan mempertimbangkan aksesibilitas (Accessibility), mendukung peran ARIA dan navigasi keyboard secara bawaan
  • Bertujuan menghadirkan susunan UI sederhana berbasis standar yang layak dipakai jangka panjang, lepas dari ketergantungan ekosistem JS yang kompleks dan overengineering

Ikhtisar Oat

  • Oat adalah pustaka komponen UI semantik ultra-ringan berbasis HTML + CSS tanpa ketergantungan eksternal sama sekali
    • Tidak memerlukan framework, build tool, atau pengaturan lingkungan pengembangan
    • Bisa langsung digunakan hanya dengan menyertakan file CSS dan JS berukuran kecil
  • Berukuran sekitar 8KB (6KB CSS + 2.2KB JS), sehingga UI dasar aplikasi web dapat disusun dengan cepat
  • Komponen utamanya mencakup Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar dan lainnya

HTML semantik dan aksesibilitas

  • Style diterapkan otomatis berdasarkan tag dan atribut semantik, sehingga desain yang konsisten tetap terjaga tanpa perlu menetapkan class
    • Contoh: style diterapkan langsung pada elemen HTML dasar seperti <button>, <input>, <dialog>
    • Atribut semantik seperti role="button" juga dikenali secara otomatis
  • Mendukung peran ARIA dan navigasi keyboard di seluruh komponen
    • Standar aksesibilitas diterapkan secara tegas untuk meningkatkan pengalaman pengguna

Tanpa dependensi dan sederhana

  • Tidak bergantung pada framework atau pustaka JS maupun CSS
    • Kompleksitas ekosistem Node.js dan masalah dependensi yang tidak perlu sepenuhnya dikesampingkan
    • Bisa langsung dipakai tanpa proses build atau pengelolaan paket
  • Beberapa komponen dinamis diimplementasikan dengan WebComponents, sehingga hanya membutuhkan JS seminimal mungkin

Kustomisasi dan tema

  • Penyesuaian warna tema dan style dapat dilakukan dengan mudah melalui variabel CSS
    • Jika atribut data-theme="dark" ditambahkan ke body, tema gelap akan diterapkan secara otomatis
  • Desain keseluruhannya dipengaruhi oleh estetika shadcn

Latar belakang pembuatan

  • Berawal dari ketidakpuasan terhadap kompleksitas berlebihan dan masalah dependensi pada framework UI JavaScript yang sudah ada
    • Bertujuan menghindari masalah “dependency hell” dan “lock-in” di ekosistem Node.js
  • Dibuat agar dapat langsung digunakan sebagai pustaka UI yang sederhana, berbasis standar, dan mudah dipelihara dalam jangka panjang
  • Melalui Oat, pengembang dapat mewujudkan susunan UI yang siap dipakai tanpa proses build yang tidak perlu

Bacaan terkait

1 komentar

 
GN⁺ 2026-02-16
Komentar Hacker News

  • Saya rasa upaya untuk menghasilkan efek web app yang tepat hanya dengan elemen HTML semantik itu keren.
    Saya juga suka bahwa pendekatannya mengarah ke paradigma “classless CSS”. Namun, ketika melihat katalog komponennya, elemen semantik dan elemen dasar, tag data dan atribut aria, serta kelas CSS tampak tercampur, jadi terasa kurang konsisten.
    Meski begitu, fakta bahwa CSS merespons atribut aria untuk styling cukup mengesankan. Ini tampaknya bisa menjadi latihan yang bagus untuk membiasakan diri berpikir dengan pendekatan aria-first, alih-alih memakai library komponen berat seperti React.
    Saya terutama suka bahwa library komponen ini menyertakan sidebar native. Kebanyakan library hanya fokus pada komponen kecil yang bisa dipakai ulang, tetapi yang ini ditempatkan secara alami di samping main dengan struktur aside > nav > ul, sehingga terasa rapi.

  • Saya kaget saat melihat situs ini. Begitu mengetuk tautan, halamannya langsung dimuat, terasa hampir secepat cambuk.
    Saya sudah lupa ada kecepatan seperti ini di internet, dan sekarang jadi ingin mencoba web development.

    • Kalau mau membuat situs, saya sarankan mencobanya dengan Astro. Kecepatan loading-nya benar-benar gila.
    • Sebagai referensi, Hacker News juga contoh bagus yang memberi sensasi kecepatan serupa.

  • Proyek ini terasa seperti benar-benar mewujudkan kesederhanaan yang saya harapkan dari DaisyUI.
    Jika dipadukan dengan Datastar, ini tampaknya bisa menjadi kombinasi kuat yang bertumpu pada web standard. Pendekatannya mengandalkan teknologi web yang nyata, bukan “ekosistem”.

  • fosiao/rclone-webui-oat tampaknya
    menggantikan rclone-webui-react yang lama, berat, dan tidak terawat.

  • Tulisan blog yang ditautkan di halaman depan tampaknya akan memicu diskusi yang lebih menarik daripada framework-nya sendiri.
    Dalam pekerjaan saya, saya menangani Angular dan Next.js, dan saya makin merasa sejalan dengan sudut pandang tulisan itu.
    Artikel terkait: JavaScript ecosystem is a hot mess

    • Tautannya bagus. Meski tulisan tahun 2021, masih banyak wawasan yang tetap relevan.
      Diskusi saat itu: thread HN
    • Saya sangat suka situs ini. Dari klik sampai benar-benar termuat, latensinya 0 detik.
    • Sebagai referensi, topik yang sama juga dibahas di sini pada 2021.

  • <aside> tidak selalu merupakan elemen semantik yang tepat untuk sidebar.
    Tujuan aslinya adalah untuk konten yang terkait tidak langsung dengan isi utama. Kadang sidebar cocok dengan definisi itu, tetapi tidak selalu.

  • Ada sangat banyak library CSS semantik drop-in seperti ini. Melihat proyek baru selalu menyenangkan.
    Kualitasnya beragam, tetapi situs ini merangkum lebih dari 50 stylesheet drop-in untuk HTML semantik.
    Tautan: Kumpulan Drop-in Minimal CSS

    • Oh, jadi maksudmu “drop-in”. Satu tanda hubung ternyata sepenting itu :)
    • Ini seharusnya mendapat lebih banyak perhatian. Jujur saja, ini lebih menarik daripada tulisan aslinya.
    • Saya sangat suka. Dengan panah kanan, kita bisa menelusuri stylesheet secara berputar.
    • Saya penasaran apakah ada stylesheet yang layak direkomendasikan dari daftar itu.

  • Proyek ini mengingatkan saya pada versi awal Bootstrap sekitar 10 tahun lalu.
    Bootstrap sekarang memang sudah jauh lebih membengkak, tetapi saya masih merasakan kesederhanaan masa itu.
    Referensi: Situs resmi Bootstrap

  • Terima kasih sudah mengujinya juga di browser lama. Ini benar-benar library super minimalis.
    Tangkapan layar: gambar1, gambar2

    • Saya penasaran, apakah ada alasan tertentu Anda biasanya memakai browser lama sebagai browser utama?

  • Saya juga pernah mencoba hal serupa di aplikasi saya, lalu sadar bahwa beberapa tag semantik/fungsional masih belum didukung dengan baik di browser.
    Misalnya, saat memakai showModal pada tag dialog di Safari, seluruh layout halaman dihitung ulang sehingga 59 kali lebih lambat daripada Chromium.
    Meski begitu, saya tetap menyukai pendekatan seperti ini.