Datastar - framework hypermedia ringan untuk membangun aplikasi web interaktif

• Datastar adalah framework ringan yang dapat digunakan untuk membangun mulai dari situs web statis sederhana hingga aplikasi web kolaboratif real-time, dan dapat langsung dimulai hanya dengan menambahkan satu tag skrip ke HTML
• Mengadopsi pendekatan hypermedia-first yang memperluas HTML agar dapat membuat UI interaktif yang berpusat pada backend
• Seperti htmx, Datastar menyediakan reaktivitas backend, sekaligus mendukung reaktivitas frontend seperti Alpine.js, dan berjalan tanpa paket npm atau dependensi
• Di frontend, perilaku reaktif diimplementasikan dengan atribut standar data-*, sementara di backend, modifikasi DOM dan perubahan state dilakukan melalui event
• Bertujuan menyederhanakan pengembangan aplikasi web reaktif yang digerakkan backend melalui pembaruan real-time berbasis SSE(Server-Sent Events) dan penyediaan SDK untuk berbagai bahasa

---

Gambaran umum Datastar

• Datastar adalah framework berbasis hypermedia yang memperluas HTML, dengan struktur yang memungkinkan backend memanipulasi DOM secara langsung untuk mewujudkan aplikasi web interaktif real-time
• Di sisi browser, semua fitur aktif hanya dengan memuat skrip berukuran 10.7KB, tanpa perlu alat build atau instalasi framework
• Mewarisi prinsip Hypermedia Systems, server memegang kendali atas state UI dan klien merefleksikannya secara reaktif
• Dengan menangani pembaruan data, perubahan state, dan patching DOM melalui event backend, logika frontend dapat diminimalkan

Cara instalasi

• Cara paling sederhana adalah menambahkan skrip berikut melalui CDN
  • <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js"></script>
• Atau Anda dapat mengunduh file secara langsung atau menggunakan Datastar bundler untuk membuat bundle sendiri
• Sama sekali tidak memerlukan instalasi npm maupun konfigurasi environment Node

Atribut data-* dan reaktivitas

• Intinya adalah mendefinisikan perilaku secara deklaratif melalui atribut data-* di HTML
  • Contoh: data-on-click="alert('Hello!')"
• Atribut data-on menentukan ekspresi Datastar yang dijalankan saat event tertentu terjadi, dan JavaScript biasa juga dapat digunakan di sini
• Menyediakan fitur autocomplete dan dukungan sintaks melalui ekstensi VSCode khusus dan plugin IntelliJ

Patching DOM yang digerakkan backend

• Datastar bekerja dengan pendekatan server mengendalikan frontend
  • Saat server mengirim fragmen HTML, Datastar menggabungkannya ke DOM dengan strategi morphing
  • Morphing hanya memperbarui bagian yang berubah untuk mempertahankan state dan meningkatkan performa
• Contoh:

  <button data-on-click="@get('/endpoint')">Open the pod bay doors, HAL.</button>  
  <div id="hal"></div>  
  

  Jika server merespons dengan fragmen HTML, Datastar akan otomatis mengganti elemen id="hal"

Streaming berbasis Server-Sent Events (SSE)

• Server dapat mengirim event datastar-patch-elements untuk memperbarui DOM secara real-time

• Contoh berikut menampilkan dialog HAL lalu menginisialisasinya kembali setelah 1 detik

  event: datastar-patch-elements  
  data: elements <div id="hal">I’m sorry, Dave. I’m afraid I can’t do that.</div>  
  
  event: datastar-patch-elements  
  data: elements <div id="hal">Waiting for an order...</div>  
  

• Untuk mendukung hal ini, Datastar menyediakan SDK untuk berbagai bahasa:

  • Clojure, C#, Go, Java, Kotlin, PHP, Python, Ruby, Rust, Node.js
  • Setiap SDK mengirim event patching DOM melalui kelas seperti PatchElements atau ServerSentEventGenerator

Datastar Inspector dan alat bantu

• Selain developer tools browser, Datastar Inspector dapat digunakan untuk memeriksa event SSE secara visual
• Selain dokumentasi resmi, tersedia pula materi yang kaya seperti DeepWiki buatan AI, contoh kode untuk LLM, dan dokumentasi satu halaman

Kesimpulan

• Datastar adalah pendekatan modern yang menyederhanakan pengembangan aplikasi hypermedia yang berpusat pada HTML
• Lebih ringan daripada framework SPA tradisional, serta menawarkan pengalaman pengembangan reaktif yang seimbang antara backend dan frontend
• Cocok untuk proyek yang membutuhkan streaming real-time, kontrol UI yang berpusat pada server, dan deployment tanpa dependensi

[GN⁺]

Opini Hacker News

• Pengelola Datastar adalah orang-orang hebat dengan keyakinan dan filosofi yang jelas, dan mereka juga meluangkan waktu dengan murah hati bahkan untuk pendatang baru. Hal itu terlupakan di tengah kontroversi seputar versi Pro, tetapi ini sama sekali bukan strategi monetisasi, dan perusahaannya terdaftar sebagai nirlaba. Hanya fitur yang dibutuhkan segelintir orang saja yang dipisahkan ke Pro, sebagai cara untuk mengendalikan secara efisien beban dukungan yang membesar karena kelompok kecil yang menginginkan fitur itu sering menghubungi mereka. Ini justru pendekatan yang inovatif dan adil karena (a) memberi sinyal bahwa fitur tersebut adalah fitur yang perlu diwaspadai karena bisa "menjegal", (b) membuat pengguna yang membutuhkan dukungan paling banyak atau menikmati banyak nilai dari Datastar membayar sedikit biaya, dan (c) memberi efek positif karena tim bisa mencurahkan lebih banyak waktu untuk seluruh komunitas

  • Jika fitur seperti data-animate, data-on-resize, data-scroll-into-view adalah fitur yang "menjegal", berarti desainnya tidak tepat. Saya juga tidak merasa fitur seperti itu hanya dibutuhkan segelintir orang. Saya tidak masalah jika mereka ingin menjadikannya berbayar, tetapi menurut saya tidak perlu sampai membuat alasan seperti itu

  • Saya penasaran apakah fitur copy-to-clipboard benar-benar fitur dengan beban dukungan yang besar. Jika kualitas Datastar memang seburuk itu sampai fitur sederhana pun butuh banyak dukungan agar bisa berfungsi dengan baik, saya sulit setuju

• Jika Anda merasa Datastar tidak cukup untuk kebutuhan realtime/kolaboratif/multiplayer atau merasa fitur Pro itu mutlak diperlukan, lihat 3 demo yang berjalan di VPS 5 dolar dan tetap bertahan di halaman utama HN tanpa fitur Pro; dari situ terlihat bahwa Datastar adalah engineering yang benar-benar hebat

  • https://checkboxes.andersmurphy.com/

  • https://cells.andersmurphy.com/

  • https://example.andersmurphy.com/ (game of life multiplayer)
    Pada contoh checkboxes/cells, rendering view dibuat adaptif sehingga bisa zoom out cukup jauh, dan virtual scroll-nya juga memiliki back pressure

  • Katanya memang bertahan di halaman utama HN, tetapi di layar pertama ada tulisan besar "bring your own backend", jadi bukan berarti itu bertahan berkat Datastar

• Info thread diskusi HN terkait yang sedang berjalan:

  • I switched from Htmx to Datastar (Oktober 2025, 223 komentar)

  • https://news.ycombinator.com/item?id=45537372, tadinya masih bingung harus dimasukkan ke mana, tetapi digabungkan ke sini

  • Thread lama: Datastar: Web Framework for the Future? (April 2025, 155 komentar)

  • Terima kasih kepada dang, dan saya penasaran apakah ia mengingat artikel-artikel terkait secara terpisah atau memakai alat khusus

• Saya tidak begitu paham kenapa komunitas begitu bermusuhan. Sebagian besar Datastar itu open source, berjalan di bahasa apa pun, dan juga merupakan proyek menarik karena memikirkan cara mendanai pengembangan. Menurut saya wajar jika mereka mendorong proyek mereka dengan cara mereka sendiri. Saya juga berniat ngoprek dengan golang, dan terima kasih atas kerja kerasnya. Hanya ada satu umpan balik dari saya: menurut standar negara saya, 299 dolar itu uang yang sangat besar, dan beberapa fitur Pro bisa jadi memang diperlukan, jadi harganya terlalu berat. Saya harap mereka mempertimbangkan kebijakan harga dinamis per negara seperti Steam atau dukungan berbentuk donasi. Fitur seperti animasi tersedia gratis di sveltekit; bukan karena saya ingin gratis, tetapi benar-benar tidak sanggup. Akan lebih baik jika harga untuk perusahaan dibuat lebih tinggi dan untuk solo developer dibuat lebih murah. Saya belum pernah membayar komunitas atau proyek online apa pun, tetapi untuk Datastar saya ingin mendukung sekitar 5–10 dolar. Saya berharap tier solo diturunkan setidaknya setara harga game Switch seperti silksong. Sayang sekali, karena ini proyek yang sangat keren tetapi respons komunitas terasa terlalu kritis secara aneh

  • Menurut saya, komentar di atas sejauh ini satu-satunya kritik yang masuk akal dalam diskusi ini. 299 dolar benar-benar harga yang tidak terjangkau bagi banyak orang. Namun, dibandingkan fakta bahwa para pengembang tinggal di negara dengan biaya hidup tinggi dan memberi nilai yang besar, itu bisa jadi jumlah yang kecil. Keinginan untuk menerapkan harga per negara adalah ide bagus, tetapi cara merealisasikannya rumit dan manfaat nyatanya bisa jadi kecil. Karena fitur open source gratis yang ada sudah memberi lebih dari 95% nilai dan fungsi, kebanyakan orang yang sebenarnya tidak perlu lisensi Pro sebaiknya cukup memakai versi gratis dengan bebas, belajar darinya, atau mengambil manfaat darinya

  • Titik berangkat kritik saya adalah sebagai berikut

    • Di halaman utama sama sekali tidak ada penyebutan Pro, dan saya baru tahu setelah mengubek-ubek dokumentasi. Rasanya seperti umpan
    • Pro mengikat fitur nyata, bukan hanya dukungan atau contoh
    • Jika bergantung pada fitur Pro, Anda menjadi terikat pada Datastar dan kendali pemeliharaan terikat pada vendor
    • Tanpa Pro, situsnya bahkan tidak akan berjalan, jadi vendor lock-in menjadi masalah yang lebih besar
    • Tidak ada demo pengalaman untuk melihat apa yang dibeli di Pro, tidak seperti Alpine.js atau React Flow Pro yang bisa dicoba di browser
    • Meski source code diberikan, Anda juga tidak bisa membagikan perbaikannya
    • Ini bukan soal harga, melainkan soal struktur dan nilai; bagi sebagian orang murah, bagi sebagian lain mahal
    • Contoh model Pro yang tidak buruk untuk dijadikan referensi: Alpine.js Pro, React Flow Pro

  • Perusahaan kecil pun tetap harus menangani dukungan sendiri, jadi di negara dengan biaya hidup tinggi, 5 dolar bahkan tidak cukup untuk menangani satu tiket dukungan

• Saya sudah beberapa bulan mengembangkan frontend berbasis Go dan Templ dengan Datastar. Saya sangat puas dengan fitur @actions dan cara halaman diperbarui berdasarkan respons. Namun, secara pribadi saya masih memikirkan fitur signals. Untuk field tunggal atau dropdown itu bagus, tetapi backend saya memakai API bergaya Kubernetes, jadi ketika saya mencoba menyimpan resource JSON ke signal, cara Datastar mem-parsing struktur itu menjadi sub-signal terasa tidak cocok. Terutama struktur seperti label Kubernetes yang memiliki prefix hostname pada key sama sekali tidak bisa ditangani, dan signals jadi berantakan. Data binding bekerja baik untuk path key sederhana, tetapi tidak untuk path yang memerlukan indeks atau key hostname. Selain itu, aturan konversi otomatis atribut HTML di JS (snake→camel, dll.) dan pemrosesan modifier juga sering memicu error, jadi cukup rumit. Meski begitu, saya tetap puas dengan pendekatannya yang menyatukan fitur HTMX/Alpine menjadi satu dan mengimplementasikannya dengan cara hypermedia. Saya juga senang karena jadi bisa menghindari ekosistem NodeJS. Di RC pernah ada perubahan wire format; karena saya memakai Fiber dan mengimplementasikannya langsung tanpa Go SDK, pembaruan jadi sulit. Namun, menurut saya perubahan format itu adalah perubahan yang baik. Tim pengembang bergerak ke arah yang baik, jadi semoga terus berkembang

• Ide Datastar terlihat sangat bagus sehingga saya pernah mempertimbangkan untuk mengadopsinya. Namun, ada kekhawatiran bahwa pembatasan pada versi open source agar tidak bersaing fitur dengan Pro bisa menjadi jalan cepat menuju hard fork. Ekosistemnya juga belum besar, jadi menurut saya alasan untuk pindah cukup kuat
  [edit: model open-core yang menutup sebagian plugin bisa jadi sangat masuk akal, dan kalaupun tidak, pilihannya tetap banyak. Saya berharap baik pengembang maupun pengguna Datastar sama-sama berhasil]

  • Jika Anda khawatir soal hard fork, mem-fork plugin dari masa sebelum Pro lalu menyesuaikannya dengan versi Datastar Pro saat ini akan membantu semua orang. Kodenya kecil, sekitar 50 baris, jadi sangat mudah

  • Ungkapan "memberi pembatasan" terasa berlebihan; atribut/event yang hanya ada di Pro jumlahnya sedikit dan bukan fitur inti. Bahkan kebanyakan bisa diganti hanya dengan sedikit JS yang dikirim dari server. Lihat daftar rinci di sini: https://data-star.dev/reference/datastar_pro

  • Saya benar-benar merekomendasikan fork; semoga ada yang melakukannya

• Mungkin karena saya terlalu terbiasa dengan ekosistem React, tetapi bagi saya cara ini terasa secara logis jauh lebih sulit ketika harus melakukan hal yang cukup kompleks. Jika saya tidak salah memahami penjelasannya, Datastar adalah pola backend-frontend di mana backend mengembalikan HTML, dan dari pengalaman saya dulu, itu benar-benar pendekatan yang tidak ingin saya ulangi. Khususnya untuk pengguna dengan koneksi lambat—dan itu masih banyak, seperti DSL, satelit lama, 2G, dan sebagainya—pengalaman nyatanya akan jauh menurun karena bukannya menerima JSON kecil berkali-kali, mereka justru menerima HTML yang lebih besar berkali-kali

  • Dalam pengalaman saya, memakai react app di 2G/3G sering kali bahkan tidak pernah muncul sama sekali, sementara jika menerima HTML sekaligus, dalam kebanyakan kasus konten muncul dalam 1–2 detik. Engineer juga sering tanpa sadar menciptakan ulang time out arbitrer; saya mendeteksi progres di socket, tetapi di level app rasanya tidak terlihat. Tidak perlu terlalu memaksakan kesan "serba cepat"

  • Pola "backend mengembalikan html" seperti ini adalah cara situs web bekerja di era modem 56k, dan saya masih ingat saat itu layout dibuat dengan puluhan lapis tag tabel

  • Frontend itu sangat luas. Untuk blog pribadi atau toko yang isinya banyak statis, butuh loading cepat, dan interaksinya sedikit, alat keluarga htmx sangat cocok. Tetapi jika ingin membuat aplikasi sekelas Figma atau Discord, pendekatan ini tidak cukup. Para master ekstrem bahkan merasa DOM itu hanyalah penjara, dan hanya puas dengan kombinasi canvas dan komputasi GPU

  • Jika benar-benar full offline, tentu pendekatan ini bukan jawabannya. Namun, mayoritas situs sebenarnya tidak membutuhkan state persisten, jadi caching halaman atau sekadar state event pun sudah cukup berguna. Jika datastar js sdk dijalankan di service worker dan hanya state penting yang disinkronkan ke browser storage, itu juga bisa berperan sebagai backend. Bahkan di koneksi lambat, jika kompresi pada stream SSE dibuat agresif, meski ada banyak pengiriman informasi berulang, rasio kompresinya bisa melebihi 90%. Internet lambat biasanya juga berkaitan dengan perangkat lambat, jadi dibanding React, css-in-js, dan hal-hal berat lain, Datastar jauh lebih ringan. Dari sisi fungsi juga hampir tidak ada kerugian, tetapi menjadi sangat sederhana

• Ini bukan pola yang benar-benar baru. Di masa transisi dari DHTML ke XHR, kita pernah melewati pendekatan ini sekali, dan kemudian hampir ditinggalkan karena berbagai trade-off. Teknologi baru seperti DOM patching pada akhirnya tetap membawa masalah yang sama—keterikatan yang erat, ketidakstabilan, ukuran besar, dan isu latensi. Datastar juga terasa lebih sebagai solusi bagi perusahaan kecil untuk menekan biaya pengembangan, bukan terobosan yang menembus batas baru teknologi. Bukan berarti buruk, tetapi rasanya seperti sejarah berulang

  • Sebagai penulis Datastar, justru memang disengaja bahwa tidak ada yang benar-benar baru. Saya merindukan masa ketika jQuery hanya memberi sentuhan kecil pada halaman, lalu SPA datang dan mencoba melakukan semuanya di frontend sehingga esensi bahwa backend memegang state menghilang. Yang ingin saya lakukan bukan inovasi, melainkan normalisasi

  • Saya jadi berpikir, bukankah Astro sudah menyelesaikan masalah ini?

• Saya sangat suka video (film) di bagian bawah halaman, sampai terasa ingin memakainya di proyek berikutnya. Bagian "The planet uncomplicanus" sangat berkesan

• Saya juga menyukai hasil yang dicapai https://www.zjax.dev/