10 ms·

Datastar: Web Framework for the Future?

255 points by 1659447091 2y ago

CharlesW 2y ago
The TODOS mini application at data-star.dev is slow and doesn't work correctly for me (checking/unchecking items isn't reliable). To me, this highlights one common problem I've seen with frameworks that insist on doing everything on the server.
- tevon 2y ago
  Agreed, I have gig internet and a hardwire connection and still get more lag than I'd want from a web app. Potentially could be solved with some client side cache but still..
  - sudodevnull 2y ago
    Yeah something is DEFINITELY up. This is not the norm, we haven't seen this before. Fly.io free tier is not happy and I'm not sure why (we've been on it for years at this point). I'm gonna disable until I can dig deeper. Have day job stuff to attend to, this is not my ideal Friday afternoon :P
    - smallerfish 2y ago
      If you're on shared CPU you probably got throttled. Dig into the grafana dashboard and you'll see it somewhere...it's not nearly prominent enough in their UI.
- tasqyn 2y ago
  I have the fastest internet in the whole country and I couldn't add new todo, also deleting the todo item is very slow.
- macmac 2y ago
  Link?
  - CharlesW 2y ago
    > data-star.dev
    - macmac 2y ago
      Oh I know what happens, the todo app was removed from the front page.
- sudodevnull 2y ago
  Yeah I'm seeing that too. We're getting ready for V1 and I probably missed a test around the Todo. My fault, didn't think we'd get hit by hackernews on a free shared fly.io server. I'll look into it now
- sudodevnull 2y ago
  UPDATE: I have no idea why fly.io hate the TODO, but https://example.andersmurphy.com/ https://example.andersmurphy.com/ is a decent example (that's way more fun) that's running now. I'm commenting out that demo until I have more time to investigate. If y'all find other ones that are acting up please let me know. Looks likes it might be time to actual host this thing on a real server.
tcdent 2y ago
> "what is a signal?" it's another word for event
- evertedsphere 2y ago
  a signal is not a single event but rather a stream of events at given timestamps (or, if you wish, a stream where you have an Option<Event> at each timestamp)
  - peacebeard 2y ago
    I googled this and got a few different answers, but not this one. Is there a particular implementation you’re referring to?
    - sudodevnull 2y ago
      Alien, Reactively, TC39 are all about the core semantics of signal, computed, effect. Much of the rest is implementation details. https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob https://dev.to/this-is-learning/the-evolution-of-signals-in-... is a good intro.
    - jmstevers 2y ago
      this is how signals are described in the functional reactive programming world. here is the paper by the guy http://conal.net/papers/push-pull-frp/push-pull-frp.pdf http://conal.net/papers/push-pull-frp/push-pull-frp.pdf
  - sudodevnull 2y ago
    I think your confusing signals with observables
- sudodevnull 2y ago
  Signals have dependencies and subscribers. It's a value and publisher and subscriber if you want to be more correct.
boogieknite 2y ago
first, great well structured and accessible post. convinced me to maybe try datastar out next prototype where its applicable. reminds me of htmx with hyperscript if hyperscript wasnt kind of a joke. to clarify, the author of hyperscript calls it a sort-of joke and im not trying to slam it. ive used htmx and hyperscript for prototyping because its entertaining and the novelty is motivating. i found similar issues as the author of this post where i talk myself out of using htmx for the product by the end of prototyping. all that said we've been evaluating a react sdk provided by ESRI (experience builder) and diving into that makes me stare longingly at datastar where it seems like i could use signals to update client-side data from 3rd party apis
j13n 2y ago
This is the second post I’ve seen praising Datastar in the last 24 hours, and once again no mention of the requirement to punch a gaping hole in one’s Content-Security-Policy. If this is the framework of the future, cyber criminals are going to have a bright future!
- max_ 2y ago
  How does this compare to HTMX (security wise)?
  - sudodevnull 2y ago
    Same, you control your signals and fragments. So you are responsible for proper escaping and thoughtful design.
  - j13n 2y ago
    You can disable all use of eval with htmx. The tradeoff is one has to write a bit more JavaScript. https://news.ycombinator.com/item?id=43650921 https://news.ycombinator.com/item?id=43650921
    - sudodevnull 2y ago
      I have thoughts about a fully compliant CSP middleware, problem is it's per language so I'd probably only make for Go (maybe PHP & TS)
      - geoka9 2y ago
        Hashes or nonces?
        sudodevnull 2y ago
        Hashed script content
        2y ago
ilrwbwrkhv 2y ago
The web framework of the future is for better or for worse what Vercel and YouTubers talk about. Original thinking is sorely lacking in the majority of the web dev community.
- sudodevnull 2y ago
  I hate how right you are. We are now the smallest (v1 is on track to be 11.4Kb), have the fastest signal implementation and looking like over 2x faster than idiomorph. So it's the smallest and fastest shim to build real-time apps or simple CRUD. Shocked how much tech world is vibes based but so be it.
- rphumulock 2y ago
  Guess we just gotta get some new YouTubers to cover other things then :) There was a funny convo about this a bit https://www.youtube.com/watch?v=y79L3fhJI3o&t=8636s https://www.youtube.com/watch?v=y79L3fhJI3o&t=8636s
johndevor 2y ago
Also worth checking out is the recent release of RedwoodSDK: https://news.ycombinator.com/item?id=43657215 https://news.ycombinator.com/item?id=43657215
- throwawaytodey 2y ago
  [dead]
- imjonse 2y ago
  Oh good, they finally realized GraphQL was holding them back.
- aiiizzz 2y ago
  Haha, didn't realize redwood was already deprecated and forked into redwoodsdk under new management. Looks good though, like remix except without those pesky route handlers. Then again I didn't get around to using the RR version. I wish the doc had a "differences with RR" section
devrandoom 2y ago
> fresh perspective, embracing server-driven architecture This is not fresh perspective. I used to be on "team everything on server" but it's a mistake on insist on that today.
- sudodevnull 2y ago
  I think, at least as the creator, I've seen the "fight" be MPA vs SPA. IMO, both are wrong. It's about state management. MOST state lives in the backend but you still need fine grain reactivity on the frontend. On the number line between React and HTMX; Datastar is complex :)
  - candiddevmike 2y ago
    Data may live in the backend, but it is used more in the frontend. Having it local (in memory, or even indexeddb) makes more responsive apps, especially if it's a typical CRUD app with 70/30 or more split between reads/writes.
    - sudodevnull 2y ago
      We'll just have to disagree here. The browser is REALLY smart about caching and no amount of JS localStorage is gonna match proper E-Tags and CDNs. If it's dynamic content your point is moot anyways.
    - mattbrewsbytes 2y ago
      Where the data is used most will vary by app. Some applications are really heavy in the backend, dealing with integrations to other systems, file processing, etc. and the UI is for setting up all that processing, some workflows and business logic.
    - nchmy 2y ago
      Its possible to run the datastar TS/JS SDK in a service worker, if you want to do (isomorphic with the backend) templating from there or just returning pre-cached html fragments.
sudodevnull 2y ago
Datastar author here... AMA, but know that Datastar is pure yak shaving for me to do real work stuff so I have no golden calves, just approaches I've seen work at scale.
- theboywho 2y ago
  What do you think about the Hotwire stack (Stimulus, Turbo) as compared to Datastar ?
  - andersmurphy 2y ago
    So I've used Turbo 8 to make a multiplayer app using a non rails backend. It was a struggle, the docs are incomplete. I mostly pieced things together from what others have done and written about. Which, is ironic considering your point about having a massive community behind it. The nice thing about Turbo 8 is morph (it uses idiomorph like datastar). It's also got a pretty simple refresh model. However, you quickly realise the limitation. You can even see this in the Turbo 8 demo (see this issue https://github.com/basecamp/turbo-8-morphing-demo/issues/9 https://github.com/basecamp/turbo-8-morphing-demo/issues/9). You can try to fix this with `data-turbo-permanent` but you'll now run into another issue that you can't clear that field without resorting to JavaScript. Which, brings me to the next thing, I found I was still writing quite a bit of JavaScript with turbo. Like HTMX pushes you to use alpin.js/hypercript turbo pushes you to use Stimulus.js. Turbo.js is not push based it's mostly polling based. Even when you push a refresh event, it pushes the client to re-fetch the data. Sure this is elegant in in that you re-use your regular handlers but it's a performance nightmare as you stampede your own server. It also prohibits you from doing render sharing between clients (which is what opens up some of the really cool stuff you can do with datastar). I was using turbo.js with SSE so no complaints there. But, most turbo implementations use websockets (which if you have any experience with websockets is just a bad time: messages can be dropped, no auto reconnect, not regular http, proxy and firewalls can block it etc). Finally, according to the docs Turbo Native doesn't let you use stream events (which is what gives you access to refresh and other multiplayer features). I like turbo, I'd use it over react if I was using Rails. I use it for my static blog to make the navigation feel snappy (turbo drive). It gives you a lot without you having to do anything. But, the minute you start working on day 2 problems and you are not using rails the shine fades pretty quickly. There are 3 ways to do things, frames, streams and morph. None of them are enough to stop you having to import stimulus or alpine and honestly it's just a bit of a mess. If you need help with turbo the best blogs posts are from (Radan Skoric https://radanskoric.com/archives/ https://radanskoric.com/archives/). Specifically these: https://radanskoric.com/articles/turbo-morphing-deep-dive-idiomorph https://radanskoric.com/articles/turbo-morphing-deep-dive-id... https://radanskoric.com/articles/turbo-morphing-deep-dive https://radanskoric.com/articles/turbo-morphing-deep-dive I think he's also got a book on turbo he's releasing soon (if you go with turbo it's probably worth getting). Those posts helped me grok Torbo 8 morph and ultimately what sold me on datastar. Morph, signals and SSE is all you need. As for mobile I'll just wrap it in a webview (as an X native mobile dev I can tell you it will lead to a lower maintenance app than native or react native). TLDR: datastar solves all the problems I ran into with turbo and more. It's faster, smaller, simpler, more examples, better docs and easier.
andersmurphy 2y ago
If you want a solid demo of what you can do with datastar. You can checkout this naive multiplayer game of life I wrote earlier in the week. Sends down 2500 divs every 200ms to all connected cliends via compressed SSE. https://example.andersmurphy.com/ https://example.andersmurphy.com/
- CharlesW 2y ago
  Is sending 10,000 divs/sec the right solution for this problem, or is this an "everything looks like a nail" solution?
  - wavemode 2y ago
    This is a Wirth's Law solution - the reasoning goes: "computers are fast enough to deal with it, so why not?"
    - andersmurphy 2y ago
      But, you can learn a lot doing dumb stuff. I learnt a lot about compression. If you go to google chrome and throttle the site to 3G it will still run fine. Rendering on the server like this will be faster for low end devices than rendering on the client (as the client doesn't have to run or simulate the game). It just gets raw HTML it has to render. Effectively, the bulk of the work on the client will be done by the browser native rendering code and native compression code. The other thing that might not be obvious. Is #brotli compression is not set to 11, it's set to 5 so similar CPU cost to gzip. But, the compression advantage comes from compressing the SSE stream. Tuning the shared window size cost memory on client and server but gives you a compression ratio of 150-250:1 (vs 30:1), at the cost of 263kb on both server on client (for context gzip has a fixed window of 32kb). This not only saves bandwidth and make the game run smoothly on 3G it also massively reduces CPU cost on both client and server. So it can run on lower end devices than a client heavy browser app. So server driven web apps are better for low end devices. The same way you can watch YouTube on a low end phone but not play some games.
      - 2y ago
thanhnguyen2187 2y ago
Really well-written and well-structured post! I'll seriously evaluate Datastar in my next toy project because of the author's praises! For people who are looking for HTMX alternatives, I think Alpine AJAX is another choice if you are already using AlpineJS
- sudodevnull 2y ago
  Ian is great, if you want progressive enhancement it would be my go-to every time!
nz3000 2y ago
I've been working with datastar for a bit now and have really been enjoying it. If you are looking to try it out, I created a boilerplate template that distills some of the examples from the datastar site to get up and running with: https://github.com/zangster300/northstar/tree/main https://github.com/zangster300/northstar/tree/main
midzer 2y ago
The future is frameworkless.
- sudodevnull 2y ago
  I agree! That's kinda the point with Datastar. EVERYTHING is a plugin, the core is a < 300 LOC engine for parsing data-* attributes and making available to plugins. You can pick and choose what makes sense for you. If you want to have declarative spec compliant interfaces, it can't get any smaller from what I've seen in the wild. Happy to get help to shrink it even more!
danek_szy 2y ago
Betteridge's law of headlines? ;) [1] https://en.wikipedia.org/wiki/Betteridge%27s_law_of_headlines https://en.wikipedia.org/wiki/Betteridge%27s_law_of_headline...
Mister_Snuggles 2y ago
The section on the author's background could have almost been written by me. I'm also a PeopleSoft developer, and the ability to build fully-functional CRUD apps without needing to know about HTML, JavaScript, Browsers, etc, is severely underappreciated. For very simple CRUD pages, no code is required. For developing line-of-business apps it's actually an incredible toolset.
65 2y ago
https://www.youtube.com/watch?v=0K71AyAF6E4 https://www.youtube.com/watch?v=0K71AyAF6E4 I found this talk really interesting. It's a cool framework for very interactive applications.
bitbasher 2y ago
Correct me if I'm wrong, but isn't half the point of htmx to allow for adaptive web design (ie, if js fails to load or is disabled it can still function via the form submission)? It seems like Datastar is doing away with that entirely and binding the UI more tightly to JavaScript to function correctly.
- sudodevnull 2y ago
  I'm very much of the opinion that progressive enhancement leads to lowest common denominator and you should just do a static MPA (nothing wrong with that). Modern browsers are a combination of HTML+CSS+JS and you should just embrace that as what modern hypermedia is. We aren't fighting against the browser. If you want just links and forms, you should just do that and have less code to maintain. But in my experience that's not what most are looking for in their apps.
  - bitbasher 2y ago
    > But in my experience that's not what most are looking for in their apps. What are they looking for (in your experience)? In my experience, most people use an app (website) to solve some problem (buy something, pay taxes, whatever). They care more about functionality than how smooth the loading animation and transition was. Progressive enhancement seems like a very good way to build something people actually use (and rely on).
    - timewizard 2y ago
      My impression is people really like frameworks because they all ultimately end up with a plugin system. Then the use of the "the framework" really just becomes "gluing a bunch of plugins together." I've never liked where those code bases ultimately end up, which seems to be just a twisted maze of hacky solutions to make a bunch of poorly aligned code to work together.
    - pie_flavor 2y ago
      Progressive enhancement is about accommodating JS being disabled. You have missed, in your description of what users care about, anything about disabling JS. Having JS disabled is a preference observable among Opinion Havers which crawl out of the woodwork on HN, but not observable among your target audience, even when your target audience is mostly HN.
airmail 2y ago
I'll just leave this here. At first you might be afraid, or petrified. But then you'll realize how you cannot live without this by your side. https://gonads.net/ https://gonads.net/
dpc_01234 2y ago
This matches 100% my experience and thoughts. I really enjoy HTMX and it's a blessing for my small-scale reactivity web interfaces, but I can immediately tell: "Well, this is hard to organize in a way that will scale with complexity well. It works great now, but I can tell where are the limits". And when I had to add alpine.js to do client-side reactivity, it immediately was obvious that I'd love to have both sides (backend and frontent) unified. Still need more time opportunities to roll some stuff with datastar in it, but ATM I'm convinced datastar is the way to go. For reference, my typical "web tech stack": Rust, axum, maud, datastar, redb.
- naasking 2y ago
  > And when I had to add alpine.js to do client-side reactivity, it immediately was obvious that I'd love to have both sides (backend and frontent) unified. https://alpine-ajax.js.org/ https://alpine-ajax.js.org/
Alifatisk 2y ago
Cool, it even has a ruby sdk, gotta check it out!
imiric 2y ago
This looks really good. Kudos to the authors! It's great seeing a rise of web stacks that embrace small libraries and native web technologies, and reject mega monolithic frameworks. It's about time the industry moved away from the React/Vue/npm insanity. I'm also intrigued by Nue, but Datastar fits nicely in a full stack solution. The choice of SSE is brilliant. It's great tech that's generally underutilized.
PaulHoule 2y ago
... was kinda inevitable that HTMX was going to bring about a Cambrian explosion in frameworks like the one it was built to escape.
- sudodevnull 2y ago
  Datastar started as an attempt to help shape HTMX2 before that was a thing... https://github.com/delaneyj/nothtmx2 https://github.com/delaneyj/nothtmx2 Not sure the negativity. It's a superset of HTMX and it's 40% smaller with more features. Can you please tell me issue? I'm to dumb dumb grug please teach me senpai
- devnull3 2y ago
  It will still be much lesser than perma Cambrian explosion in js frameworks. Infact, a lot of the patterns in the likes of HTMX will be standardised.
rodolphoarruda 2y ago
I just wanted to say I love this entire "ecosystem", if I may call it. Hypermedia is cool. HTMX looks like the natural evolution of HTML we all were expecting from the 90s. The simplicity of hx tags and the fact they get the work done is really refreshing. Datastar looks promising as well. It is already on my radar for a hobby project. Kudos to the dev team!
dalmo3 2y ago
Reading tfa I kept wondering "is this yet another framework where every click is a server round trip?" Judging by the demos¹, the answer is yes? If this is "the Future", I'm branching off to the timeline where local-first wins. ¹. https://data-star.dev/examples/click_to_edit https://data-star.dev/examples/click_to_edit
- sudodevnull 2y ago
  Our free shared fly.io was not built to handle hackernews. We are looking into alternatives but in the mean time checkout https://andersmurphy.com/2025/04/07/clojure-realtime-collaborative-web-apps-without-clojurescript.html https://andersmurphy.com/2025/04/07/clojure-realtime-collabo... as it's the same tech but on a slight better machine.
- tipiirai 2y ago
  A JavaScript framework, built by a person who hates JavaScript doesn’t sound right
  - hsbauauvhabzb 2y ago
    With additional swipes at ecosystems and ‘must be written in go’ with no real justification as to _why_ more than the developers preference
    - throwaway519 2y ago
      Robust performance, error handling that's not stuck in 1982, and cross platform would be my guesses, but agree the OP could be more spicific as there are more benefits.
      - throw1223323 2y ago
        I hate Go as much as anyone, but it has incredible cross platform support. There's built in cross compilation for building a static binary across window/mac/linux. It's the number 1 feature in Go, lol.
resonious 2y ago
Nitpicking but > SSE enables microsecond updates, challenging the limitations of polling in HTMX. How is this true? SSE is just the server sending a message to the client. If server and client are in opposite sides of the world, it will not be a matter of microseconds...
- ivanjermakov 2y ago
  Reminds me of the joke "hey, check out the website I just made: localhost:8080"
- sudodevnull 2y ago
  Well obviously there's a difference between latency and throughput. Of course it's going to be microsecond plus your rtt/2. Sorry, we can't beat physics.
  - throwaway519 2y ago
    Can't beat physics but can write better copy.
    - andersmurphy 2y ago
      Latency doesn't affect server update rate it affects time to first data.
  - recursive 2y ago
    Everyone knows no one can beat physics. That doesn't excuse claiming you can beat physics.
    - andersmurphy 2y ago
      Latency doesn't affect server update rate it affects time to first data. I can have a ping of 500ms and still get an update from a stock ticker every 5 milliseconds. They will arrive at 500 505 510 etc.
brap 2y ago
Future? Looking at some of the examples, this seems a lot like the same old web server frameworks we had like 15 years ago, maybe more. Granted they didn’t have SSE but regardless the DX was pretty bad. I don’t see a compelling reason to go back.
- sesm 2y ago
  People with 15+ years of experience are not the target audience for this framework.
  - andersmurphy 2y ago
    I'd argue the opposite. I feel if anything Datastar is targeted ad veteran devs who are done with endless ecosystem churn, who want to use their favorite backend language and to make performant fullstack realtime collaborative apps. If you haven't run the gauntlet you probably won't see the appeal.
mrbluecoat 2y ago
> Did I mention I hate javascript ... Avoid Javascript ... Javascript makes me queezy ... I broke out in hives because I hate JavaScript Web development may not be your thing.
- mschoch 2y ago
  [dead]
raggi 2y ago
As you escape the React/JSX intoxification, you can drop the XML syntax. It took us a while back in the day after the XHTML arc, but for sure it'll be ok. I know this looser SGML universe might feel a little kooky, but trust me it wears baggy trousers, rocks gifs with a hard g and offers great <hugs>. <thank><you> <nothankyou/>
nhumrich 2y ago
I love the idea of datastar, but wonder how does one test it without using e2e testing? Also, I think it would be amazing and so much simpler if instead of using SSE, it just included all the events in a response. Maybe with SSE as an option for those who need true server pushes? I feel like most apps don't require server push, and instead just need a list of events/things to update from an action.
- sudodevnull 2y ago
  So unlike HTMX we support merge in both fragments and signals. We also support custom events natively for purely local state. We just make the browser declaratively reactive, that's it
deleted 2y ago
[deleted]
memset 2y ago
This is probably a silly question, but how do I use loops? For example, if my backend returns an array of TODO items, how can i iterate through that and display on the frontend?
- fnord123 2y ago
  Htmx and datastar use backend rendering. So you write the html in the backend and serve that. In the case of an array, you render them as Todo ítems. You might be using a template system for that. E.g. Jinja2, moustache, askama, templ, etc depending on your backend language and libraries.
kookamamie 2y ago
Hypermedia. The what now?
devnull3 2y ago
On thing about datastar vs htmx: Datastar embraces htmx's OOB swap and makes it a first class concept. HTMX's OOB swap appears to be an after thought.
udioron 2y ago
From datastar's docs: > Backend Setup > Data star uses Server-Sent Events (SSE) to stream zero or more events from the web server to the browser. There’s no special backend plumbing required to use SSE, just some syntax. Fortunately, SSE is straightforward and provides us with some advantages. As a django developer, this is very far from true. With htmx i get almost no backend changes (mainly in template code), where datastar would require me to rewrite it and may not be possible to implement at all.
- andersmurphy 2y ago
  Sounds like a django over abstraction problem. SSE is standard HTTP. If laravel can do it django can.
rapnie 2y ago
The other day I bumped again into Markus Lanthaler's hypermedia adventures with Hydra [0] "Hypermedia driven web API's" dating back from Semantic Web days, and later revived and stalled again as the W3C Hydra Community Group [1]. Though very different it hinted at the great power of hypermedia at the time. And I am very happy to see things getting explored again, in this different and refreshing approach. Greatly enjoyed watching the interview [2] of Delaney Gillilan on the hypermedia-tv Youtube channel. [0] https://www.markus-lanthaler.com/hydra/ https://www.markus-lanthaler.com/hydra/ [1] https://www.w3.org/community/hydra/ https://www.w3.org/community/hydra/ [2] https://www.youtube.com/watch?v=HbTFlUqELVc https://www.youtube.com/watch?v=HbTFlUqELVc
reneberlin 2y ago
One idea i found interesting on top: why not use a service-worker to mock the backend completely (https://mswjs.io/ https://mswjs.io/) and mock the server answers with the service-worker. Then you still have a local-only PWA-style frontend and can choose yourself, how to sync it back to a server if you really like or need to. What datastar is great for is: throw all that overcomplicated frontend-junk away and concentrate on the real innovation or simply get things done. Not to forget: ignore the dependecy-hell of every nodejs-based project you can encounter. After the lowcode-initiative, now it's time for the "nodeps"-initiative. Deprecate npmjs.com.
pjmlp 2y ago
Ah another framework, will wait until it becomes unavoidable.
andyadams222 2y ago
[dead]

255 points by 1659447091 2y ago

The TODOS mini application at data-star.dev is slow and doesn't work correctly for me (checking/unchecking items isn't reliable). To me, this highlights one common problem I've seen with frameworks that insist on doing everything on the server.

tevon 2y ago
Agreed, I have gig internet and a hardwire connection and still get more lag than I'd want from a web app. Potentially could be solved with some client side cache but still..
- sudodevnull 2y ago
  Yeah something is DEFINITELY up. This is not the norm, we haven't seen this before. Fly.io free tier is not happy and I'm not sure why (we've been on it for years at this point). I'm gonna disable until I can dig deeper. Have day job stuff to attend to, this is not my ideal Friday afternoon :P
  - smallerfish 2y ago
    If you're on shared CPU you probably got throttled. Dig into the grafana dashboard and you'll see it somewhere...it's not nearly prominent enough in their UI.
tasqyn 2y ago
I have the fastest internet in the whole country and I couldn't add new todo, also deleting the todo item is very slow.
macmac 2y ago
Link?
- CharlesW 2y ago
  > data-star.dev
  - macmac 2y ago
    Oh I know what happens, the todo app was removed from the front page.
sudodevnull 2y ago
Yeah I'm seeing that too. We're getting ready for V1 and I probably missed a test around the Todo. My fault, didn't think we'd get hit by hackernews on a free shared fly.io server. I'll look into it now
sudodevnull 2y ago
UPDATE: I have no idea why fly.io hate the TODO, but https://example.andersmurphy.com/ https://example.andersmurphy.com/ is a decent example (that's way more fun) that's running now. I'm commenting out that demo until I have more time to investigate. If y'all find other ones that are acting up please let me know. Looks likes it might be time to actual host this thing on a real server.

tcdent 2y ago

> "what is a signal?" it's another word for event

evertedsphere 2y ago
a signal is not a single event but rather a stream of events at given timestamps (or, if you wish, a stream where you have an Option<Event> at each timestamp)
- peacebeard 2y ago
  I googled this and got a few different answers, but not this one. Is there a particular implementation you’re referring to?
  - sudodevnull 2y ago
    Alien, Reactively, TC39 are all about the core semantics of signal, computed, effect. Much of the rest is implementation details. https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob https://dev.to/this-is-learning/the-evolution-of-signals-in-... is a good intro.
  - jmstevers 2y ago
    this is how signals are described in the functional reactive programming world. here is the paper by the guy http://conal.net/papers/push-pull-frp/push-pull-frp.pdf http://conal.net/papers/push-pull-frp/push-pull-frp.pdf
- sudodevnull 2y ago
  I think your confusing signals with observables
sudodevnull 2y ago
Signals have dependencies and subscribers. It's a value and publisher and subscriber if you want to be more correct.

boogieknite 2y ago

first, great well structured and accessible post. convinced me to maybe try datastar out next prototype where its applicable. reminds me of htmx with hyperscript if hyperscript wasnt kind of a joke. to clarify, the author of hyperscript calls it a sort-of joke and im not trying to slam it. ive used htmx and hyperscript for prototyping because its entertaining and the novelty is motivating. i found similar issues as the author of this post where i talk myself out of using htmx for the product by the end of prototyping. all that said we've been evaluating a react sdk provided by ESRI (experience builder) and diving into that makes me stare longingly at datastar where it seems like i could use signals to update client-side data from 3rd party apis

j13n 2y ago

This is the second post I’ve seen praising Datastar in the last 24 hours, and once again no mention of the requirement to punch a gaping hole in one’s Content-Security-Policy. If this is the framework of the future, cyber criminals are going to have a bright future!

max_ 2y ago
How does this compare to HTMX (security wise)?
- sudodevnull 2y ago
  Same, you control your signals and fragments. So you are responsible for proper escaping and thoughtful design.
- j13n 2y ago
  You can disable all use of eval with htmx. The tradeoff is one has to write a bit more JavaScript. https://news.ycombinator.com/item?id=43650921 https://news.ycombinator.com/item?id=43650921
  - sudodevnull 2y ago
    I have thoughts about a fully compliant CSP middleware, problem is it's per language so I'd probably only make for Go (maybe PHP & TS)
    - geoka9 2y ago
      Hashes or nonces?
      - sudodevnull 2y ago
        Hashed script content
        2y ago

ilrwbwrkhv 2y ago

The web framework of the future is for better or for worse what Vercel and YouTubers talk about. Original thinking is sorely lacking in the majority of the web dev community.

sudodevnull 2y ago
I hate how right you are. We are now the smallest (v1 is on track to be 11.4Kb), have the fastest signal implementation and looking like over 2x faster than idiomorph. So it's the smallest and fastest shim to build real-time apps or simple CRUD. Shocked how much tech world is vibes based but so be it.
rphumulock 2y ago
Guess we just gotta get some new YouTubers to cover other things then :) There was a funny convo about this a bit https://www.youtube.com/watch?v=y79L3fhJI3o&t=8636s https://www.youtube.com/watch?v=y79L3fhJI3o&t=8636s

johndevor 2y ago

Also worth checking out is the recent release of RedwoodSDK: https://news.ycombinator.com/item?id=43657215 https://news.ycombinator.com/item?id=43657215

throwawaytodey 2y ago
[dead]
imjonse 2y ago
Oh good, they finally realized GraphQL was holding them back.
aiiizzz 2y ago
Haha, didn't realize redwood was already deprecated and forked into redwoodsdk under new management. Looks good though, like remix except without those pesky route handlers. Then again I didn't get around to using the RR version. I wish the doc had a "differences with RR" section

devrandoom 2y ago

> fresh perspective, embracing server-driven architecture This is not fresh perspective. I used to be on "team everything on server" but it's a mistake on insist on that today.

sudodevnull 2y ago
I think, at least as the creator, I've seen the "fight" be MPA vs SPA. IMO, both are wrong. It's about state management. MOST state lives in the backend but you still need fine grain reactivity on the frontend. On the number line between React and HTMX; Datastar is complex :)
- candiddevmike 2y ago
  Data may live in the backend, but it is used more in the frontend. Having it local (in memory, or even indexeddb) makes more responsive apps, especially if it's a typical CRUD app with 70/30 or more split between reads/writes.
  - sudodevnull 2y ago
    We'll just have to disagree here. The browser is REALLY smart about caching and no amount of JS localStorage is gonna match proper E-Tags and CDNs. If it's dynamic content your point is moot anyways.
  - mattbrewsbytes 2y ago
    Where the data is used most will vary by app. Some applications are really heavy in the backend, dealing with integrations to other systems, file processing, etc. and the UI is for setting up all that processing, some workflows and business logic.
  - nchmy 2y ago
    Its possible to run the datastar TS/JS SDK in a service worker, if you want to do (isomorphic with the backend) templating from there or just returning pre-cached html fragments.

sudodevnull 2y ago

Datastar author here... AMA, but know that Datastar is pure yak shaving for me to do real work stuff so I have no golden calves, just approaches I've seen work at scale.

theboywho 2y ago
What do you think about the Hotwire stack (Stimulus, Turbo) as compared to Datastar ?
- andersmurphy 2y ago
  So I've used Turbo 8 to make a multiplayer app using a non rails backend. It was a struggle, the docs are incomplete. I mostly pieced things together from what others have done and written about. Which, is ironic considering your point about having a massive community behind it. The nice thing about Turbo 8 is morph (it uses idiomorph like datastar). It's also got a pretty simple refresh model. However, you quickly realise the limitation. You can even see this in the Turbo 8 demo (see this issue https://github.com/basecamp/turbo-8-morphing-demo/issues/9 https://github.com/basecamp/turbo-8-morphing-demo/issues/9). You can try to fix this with `data-turbo-permanent` but you'll now run into another issue that you can't clear that field without resorting to JavaScript. Which, brings me to the next thing, I found I was still writing quite a bit of JavaScript with turbo. Like HTMX pushes you to use alpin.js/hypercript turbo pushes you to use Stimulus.js. Turbo.js is not push based it's mostly polling based. Even when you push a refresh event, it pushes the client to re-fetch the data. Sure this is elegant in in that you re-use your regular handlers but it's a performance nightmare as you stampede your own server. It also prohibits you from doing render sharing between clients (which is what opens up some of the really cool stuff you can do with datastar). I was using turbo.js with SSE so no complaints there. But, most turbo implementations use websockets (which if you have any experience with websockets is just a bad time: messages can be dropped, no auto reconnect, not regular http, proxy and firewalls can block it etc). Finally, according to the docs Turbo Native doesn't let you use stream events (which is what gives you access to refresh and other multiplayer features). I like turbo, I'd use it over react if I was using Rails. I use it for my static blog to make the navigation feel snappy (turbo drive). It gives you a lot without you having to do anything. But, the minute you start working on day 2 problems and you are not using rails the shine fades pretty quickly. There are 3 ways to do things, frames, streams and morph. None of them are enough to stop you having to import stimulus or alpine and honestly it's just a bit of a mess. If you need help with turbo the best blogs posts are from (Radan Skoric https://radanskoric.com/archives/ https://radanskoric.com/archives/). Specifically these: https://radanskoric.com/articles/turbo-morphing-deep-dive-idiomorph https://radanskoric.com/articles/turbo-morphing-deep-dive-id... https://radanskoric.com/articles/turbo-morphing-deep-dive https://radanskoric.com/articles/turbo-morphing-deep-dive I think he's also got a book on turbo he's releasing soon (if you go with turbo it's probably worth getting). Those posts helped me grok Torbo 8 morph and ultimately what sold me on datastar. Morph, signals and SSE is all you need. As for mobile I'll just wrap it in a webview (as an X native mobile dev I can tell you it will lead to a lower maintenance app than native or react native). TLDR: datastar solves all the problems I ran into with turbo and more. It's faster, smaller, simpler, more examples, better docs and easier.

andersmurphy 2y ago

If you want a solid demo of what you can do with datastar. You can checkout this naive multiplayer game of life I wrote earlier in the week. Sends down 2500 divs every 200ms to all connected cliends via compressed SSE. https://example.andersmurphy.com/ https://example.andersmurphy.com/

CharlesW 2y ago
Is sending 10,000 divs/sec the right solution for this problem, or is this an "everything looks like a nail" solution?
- wavemode 2y ago
  This is a Wirth's Law solution - the reasoning goes: "computers are fast enough to deal with it, so why not?"
  - andersmurphy 2y ago
    But, you can learn a lot doing dumb stuff. I learnt a lot about compression. If you go to google chrome and throttle the site to 3G it will still run fine. Rendering on the server like this will be faster for low end devices than rendering on the client (as the client doesn't have to run or simulate the game). It just gets raw HTML it has to render. Effectively, the bulk of the work on the client will be done by the browser native rendering code and native compression code. The other thing that might not be obvious. Is #brotli compression is not set to 11, it's set to 5 so similar CPU cost to gzip. But, the compression advantage comes from compressing the SSE stream. Tuning the shared window size cost memory on client and server but gives you a compression ratio of 150-250:1 (vs 30:1), at the cost of 263kb on both server on client (for context gzip has a fixed window of 32kb). This not only saves bandwidth and make the game run smoothly on 3G it also massively reduces CPU cost on both client and server. So it can run on lower end devices than a client heavy browser app. So server driven web apps are better for low end devices. The same way you can watch YouTube on a low end phone but not play some games.
    - 2y ago

thanhnguyen2187 2y ago

Really well-written and well-structured post! I'll seriously evaluate Datastar in my next toy project because of the author's praises! For people who are looking for HTMX alternatives, I think Alpine AJAX is another choice if you are already using AlpineJS

sudodevnull 2y ago
Ian is great, if you want progressive enhancement it would be my go-to every time!

nz3000 2y ago

I've been working with datastar for a bit now and have really been enjoying it. If you are looking to try it out, I created a boilerplate template that distills some of the examples from the datastar site to get up and running with: https://github.com/zangster300/northstar/tree/main https://github.com/zangster300/northstar/tree/main

midzer 2y ago

The future is frameworkless.

sudodevnull 2y ago
I agree! That's kinda the point with Datastar. EVERYTHING is a plugin, the core is a < 300 LOC engine for parsing data-* attributes and making available to plugins. You can pick and choose what makes sense for you. If you want to have declarative spec compliant interfaces, it can't get any smaller from what I've seen in the wild. Happy to get help to shrink it even more!

danek_szy 2y ago

Betteridge's law of headlines? ;) [1] https://en.wikipedia.org/wiki/Betteridge%27s_law_of_headlines https://en.wikipedia.org/wiki/Betteridge%27s_law_of_headline...

Mister_Snuggles 2y ago

The section on the author's background could have almost been written by me. I'm also a PeopleSoft developer, and the ability to build fully-functional CRUD apps without needing to know about HTML, JavaScript, Browsers, etc, is severely underappreciated. For very simple CRUD pages, no code is required. For developing line-of-business apps it's actually an incredible toolset.

65 2y ago

https://www.youtube.com/watch?v=0K71AyAF6E4 https://www.youtube.com/watch?v=0K71AyAF6E4 I found this talk really interesting. It's a cool framework for very interactive applications.

bitbasher 2y ago

Correct me if I'm wrong, but isn't half the point of htmx to allow for adaptive web design (ie, if js fails to load or is disabled it can still function via the form submission)? It seems like Datastar is doing away with that entirely and binding the UI more tightly to JavaScript to function correctly.

sudodevnull 2y ago
I'm very much of the opinion that progressive enhancement leads to lowest common denominator and you should just do a static MPA (nothing wrong with that). Modern browsers are a combination of HTML+CSS+JS and you should just embrace that as what modern hypermedia is. We aren't fighting against the browser. If you want just links and forms, you should just do that and have less code to maintain. But in my experience that's not what most are looking for in their apps.
- bitbasher 2y ago
  > But in my experience that's not what most are looking for in their apps. What are they looking for (in your experience)? In my experience, most people use an app (website) to solve some problem (buy something, pay taxes, whatever). They care more about functionality than how smooth the loading animation and transition was. Progressive enhancement seems like a very good way to build something people actually use (and rely on).
  - timewizard 2y ago
    My impression is people really like frameworks because they all ultimately end up with a plugin system. Then the use of the "the framework" really just becomes "gluing a bunch of plugins together." I've never liked where those code bases ultimately end up, which seems to be just a twisted maze of hacky solutions to make a bunch of poorly aligned code to work together.
  - pie_flavor 2y ago
    Progressive enhancement is about accommodating JS being disabled. You have missed, in your description of what users care about, anything about disabling JS. Having JS disabled is a preference observable among Opinion Havers which crawl out of the woodwork on HN, but not observable among your target audience, even when your target audience is mostly HN.

airmail 2y ago

I'll just leave this here. At first you might be afraid, or petrified. But then you'll realize how you cannot live without this by your side. https://gonads.net/ https://gonads.net/

dpc_01234 2y ago

This matches 100% my experience and thoughts. I really enjoy HTMX and it's a blessing for my small-scale reactivity web interfaces, but I can immediately tell: "Well, this is hard to organize in a way that will scale with complexity well. It works great now, but I can tell where are the limits". And when I had to add alpine.js to do client-side reactivity, it immediately was obvious that I'd love to have both sides (backend and frontent) unified. Still need more time opportunities to roll some stuff with datastar in it, but ATM I'm convinced datastar is the way to go. For reference, my typical "web tech stack": Rust, axum, maud, datastar, redb.

naasking 2y ago
> And when I had to add alpine.js to do client-side reactivity, it immediately was obvious that I'd love to have both sides (backend and frontent) unified. https://alpine-ajax.js.org/ https://alpine-ajax.js.org/

Alifatisk 2y ago

Cool, it even has a ruby sdk, gotta check it out!

imiric 2y ago

This looks really good. Kudos to the authors! It's great seeing a rise of web stacks that embrace small libraries and native web technologies, and reject mega monolithic frameworks. It's about time the industry moved away from the React/Vue/npm insanity. I'm also intrigued by Nue, but Datastar fits nicely in a full stack solution. The choice of SSE is brilliant. It's great tech that's generally underutilized.

PaulHoule 2y ago

... was kinda inevitable that HTMX was going to bring about a Cambrian explosion in frameworks like the one it was built to escape.

sudodevnull 2y ago
Datastar started as an attempt to help shape HTMX2 before that was a thing... https://github.com/delaneyj/nothtmx2 https://github.com/delaneyj/nothtmx2 Not sure the negativity. It's a superset of HTMX and it's 40% smaller with more features. Can you please tell me issue? I'm to dumb dumb grug please teach me senpai
devnull3 2y ago
It will still be much lesser than perma Cambrian explosion in js frameworks. Infact, a lot of the patterns in the likes of HTMX will be standardised.

rodolphoarruda 2y ago

I just wanted to say I love this entire "ecosystem", if I may call it. Hypermedia is cool. HTMX looks like the natural evolution of HTML we all were expecting from the 90s. The simplicity of hx tags and the fact they get the work done is really refreshing. Datastar looks promising as well. It is already on my radar for a hobby project. Kudos to the dev team!

dalmo3 2y ago

Reading tfa I kept wondering "is this yet another framework where every click is a server round trip?" Judging by the demos¹, the answer is yes? If this is "the Future", I'm branching off to the timeline where local-first wins. ¹. https://data-star.dev/examples/click_to_edit https://data-star.dev/examples/click_to_edit

sudodevnull 2y ago
Our free shared fly.io was not built to handle hackernews. We are looking into alternatives but in the mean time checkout https://andersmurphy.com/2025/04/07/clojure-realtime-collaborative-web-apps-without-clojurescript.html https://andersmurphy.com/2025/04/07/clojure-realtime-collabo... as it's the same tech but on a slight better machine.
tipiirai 2y ago
A JavaScript framework, built by a person who hates JavaScript doesn’t sound right
- hsbauauvhabzb 2y ago
  With additional swipes at ecosystems and ‘must be written in go’ with no real justification as to _why_ more than the developers preference
  - throwaway519 2y ago
    Robust performance, error handling that's not stuck in 1982, and cross platform would be my guesses, but agree the OP could be more spicific as there are more benefits.
    - throw1223323 2y ago
      I hate Go as much as anyone, but it has incredible cross platform support. There's built in cross compilation for building a static binary across window/mac/linux. It's the number 1 feature in Go, lol.

resonious 2y ago

Nitpicking but > SSE enables microsecond updates, challenging the limitations of polling in HTMX. How is this true? SSE is just the server sending a message to the client. If server and client are in opposite sides of the world, it will not be a matter of microseconds...

ivanjermakov 2y ago
Reminds me of the joke "hey, check out the website I just made: localhost:8080"
sudodevnull 2y ago
Well obviously there's a difference between latency and throughput. Of course it's going to be microsecond plus your rtt/2. Sorry, we can't beat physics.
- throwaway519 2y ago
  Can't beat physics but can write better copy.
  - andersmurphy 2y ago
    Latency doesn't affect server update rate it affects time to first data.
- recursive 2y ago
  Everyone knows no one can beat physics. That doesn't excuse claiming you can beat physics.
  - andersmurphy 2y ago
    Latency doesn't affect server update rate it affects time to first data. I can have a ping of 500ms and still get an update from a stock ticker every 5 milliseconds. They will arrive at 500 505 510 etc.

brap 2y ago

Future? Looking at some of the examples, this seems a lot like the same old web server frameworks we had like 15 years ago, maybe more. Granted they didn’t have SSE but regardless the DX was pretty bad. I don’t see a compelling reason to go back.

sesm 2y ago
People with 15+ years of experience are not the target audience for this framework.
- andersmurphy 2y ago
  I'd argue the opposite. I feel if anything Datastar is targeted ad veteran devs who are done with endless ecosystem churn, who want to use their favorite backend language and to make performant fullstack realtime collaborative apps. If you haven't run the gauntlet you probably won't see the appeal.

mrbluecoat 2y ago

> Did I mention I hate javascript ... Avoid Javascript ... Javascript makes me queezy ... I broke out in hives because I hate JavaScript Web development may not be your thing.

mschoch 2y ago
[dead]

raggi 2y ago

As you escape the React/JSX intoxification, you can drop the XML syntax. It took us a while back in the day after the XHTML arc, but for sure it'll be ok. I know this looser SGML universe might feel a little kooky, but trust me it wears baggy trousers, rocks gifs with a hard g and offers great <hugs>. <thank><you> <nothankyou/>

nhumrich 2y ago

I love the idea of datastar, but wonder how does one test it without using e2e testing? Also, I think it would be amazing and so much simpler if instead of using SSE, it just included all the events in a response. Maybe with SSE as an option for those who need true server pushes? I feel like most apps don't require server push, and instead just need a list of events/things to update from an action.

sudodevnull 2y ago
So unlike HTMX we support merge in both fragments and signals. We also support custom events natively for purely local state. We just make the browser declaratively reactive, that's it

deleted 2y ago

[deleted]

memset 2y ago

This is probably a silly question, but how do I use loops? For example, if my backend returns an array of TODO items, how can i iterate through that and display on the frontend?

fnord123 2y ago
Htmx and datastar use backend rendering. So you write the html in the backend and serve that. In the case of an array, you render them as Todo ítems. You might be using a template system for that. E.g. Jinja2, moustache, askama, templ, etc depending on your backend language and libraries.

kookamamie 2y ago

Hypermedia. The what now?

devnull3 2y ago

On thing about datastar vs htmx: Datastar embraces htmx's OOB swap and makes it a first class concept. HTMX's OOB swap appears to be an after thought.

udioron 2y ago

From datastar's docs: > Backend Setup > Data star uses Server-Sent Events (SSE) to stream zero or more events from the web server to the browser. There’s no special backend plumbing required to use SSE, just some syntax. Fortunately, SSE is straightforward and provides us with some advantages. As a django developer, this is very far from true. With htmx i get almost no backend changes (mainly in template code), where datastar would require me to rewrite it and may not be possible to implement at all.

andersmurphy 2y ago
Sounds like a django over abstraction problem. SSE is standard HTTP. If laravel can do it django can.

rapnie 2y ago

The other day I bumped again into Markus Lanthaler's hypermedia adventures with Hydra [0] "Hypermedia driven web API's" dating back from Semantic Web days, and later revived and stalled again as the W3C Hydra Community Group [1]. Though very different it hinted at the great power of hypermedia at the time. And I am very happy to see things getting explored again, in this different and refreshing approach. Greatly enjoyed watching the interview [2] of Delaney Gillilan on the hypermedia-tv Youtube channel. [0] https://www.markus-lanthaler.com/hydra/ https://www.markus-lanthaler.com/hydra/ [1] https://www.w3.org/community/hydra/ https://www.w3.org/community/hydra/ [2] https://www.youtube.com/watch?v=HbTFlUqELVc https://www.youtube.com/watch?v=HbTFlUqELVc

reneberlin 2y ago

One idea i found interesting on top: why not use a service-worker to mock the backend completely (https://mswjs.io/ https://mswjs.io/) and mock the server answers with the service-worker. Then you still have a local-only PWA-style frontend and can choose yourself, how to sync it back to a server if you really like or need to. What datastar is great for is: throw all that overcomplicated frontend-junk away and concentrate on the real innovation or simply get things done. Not to forget: ignore the dependecy-hell of every nodejs-based project you can encounter. After the lowcode-initiative, now it's time for the "nodeps"-initiative. Deprecate npmjs.com.

pjmlp 2y ago

Ah another framework, will wait until it becomes unavoidable.

andyadams222 2y ago

[dead]