Talk Python to Me: #537: Datastar: Modern web dev, simpli…

You love building web apps with Python, and HTMX got you excited about the hypermedia approach — let the server drive the HTML, skip the JavaScript build step, keep things simple. But then you hit that last 10%: You need Alpine.js for interactivity, your sta…

Delaney Gillilan is the creator of Datastar. He comes from a non-traditional web development background, having worked in the circus, as a 3D artist, and then as an engineer building video games, slot machines, and military applications. He specializes in highly optimized, performance-critical systems and describes himself as "a C guy that knows some other things." His work on military applications that required extremely fast browser updates led him down the path that eventually became Datastar.

He initially built a binary WebSocket-based framework before throwing it away after discovering the hypermedia approach was actually faster when measured properly. Ben Croker is a core maintainer of Datastar. Based between Costa Rica and Europe, Ben has over 20 years of experience primarily in PHP development, though his commit history now shows he writes more Go than PHP. He was an early contributor to HTMX before joining the Datastar project and brings a strong backend-first philosophy to the team.

Ben authored the Datastar guide, maintains the VS Code and JetBrains IDE extensions, and wrote the "Tau of Datastar" philosophy page in the docs. Chris May is a Python developer and Datastar convert. He has been building websites since 1995 and picked up Python about 10 years later. Chris is a technical coach who discovered Datastar through the HTMX podcast and became an advocate after trying it. He uses Datastar with Django and Python in production, including real-time status dashboards at his workplace.

His article about switching from HTMX to Datastar was the catalyst for this episode. Datastar is a lightweight, open-source hypermedia framework that fits in a single 11 KB JavaScript file. Unlike traditional single-page application (SPA) frameworks like React or Vue, Datastar puts the backend in charge of generating HTML and streaming it to the browser. It uses HTML data attributes (prefixed with data-*) to wire up interactivity declaratively, meaning most developers never need to write JavaScript.

The framework is backend-agnostic and has official SDKs for Python, Go, PHP, TypeScript, Ruby, and more. Ben Croker describes it as giving you "everything you need and nothing you don't." 2. Server-Sent Events (SSE) are the foundation of Datastar's real-time architecture Datastar uses server-sent events as its primary transport mechanism rather than traditional request/response cycles or WebSockets.

SSE is a long-established browser technology that works over plain HTTP (1, 2, and 3) with no complicated handshake. The server holds a connection open and streams events down to the browser as they happen. This push-based model eliminates the latency inherent in polling, halves the round-trip time compared to request/response patterns, and benefits from built-in browser compression that can achieve 40x reduction in data transfer.

Delaney noted that SSE has had "a renaissance in recent years" thanks to LLM chatbots streaming their responses. A major theme of the episode was the limitation of pairing HTMX with Alpine.js. Michael described HTMX as "really good as salt or seasoning — something you sprinkle on to really make a website better. But if you try to make a meal out of salt, you're not going to want to eat it." HTMX handles about 90% of what developers need, but the remaining 10% typically requires pulling in Alpine.js or vanilla JavaScript for client-side interactivity.

Datastar unifies both capabilities — DOM patching and reactive client-side state — into a single cohesive framework that is actually smaller than HTMX and Alpine combined. Datastar uses a morphing strategy rather than the straight DOM swap approach used by HTMX. When the server sends new HTML, Datastar compares the incoming DOM against the existing DOM and only changes what is different. This preserves important UI state like input focus, scroll position, and form values even when the entire page is re-rendered from the server.

This means developers can take a simpler mental model: just send the full page from the backend, and Datastar handles the diffing. Delaney compared it to "having the VDOM in the backend" without actually using a virtual DOM. In HTMX, out-of-band swaps (updating multiple parts of the page from a single response) are a special feature. In Datastar, this is the default behavior. The server can send back multiple HTML fragments with different IDs (or any CSS selector), and Datastar will morph each one into the corresponding element on the page.

Combined with SSE streaming, a single server response can update a sidebar, a header notification, and a content area all at once. This design makes Datastar naturally suited for dashboards, status screens, and any page where multiple regions need to stay in sync. Datastar includes a built-in reactive signals system that handles client-side state and data binding. Signals are like spreadsheet formulas: you define a relationship between values, and when one changes, everything that depends on it updates automatically.

Delaney explained that "a signal is instead of saying I'm setting a variable, you're saying I'm setting a relationship." The server can both read signals from the frontend (to know the current UI state) and push new signal values down to the client. Datastar uses the alien-signals library under the hood, which the team says is the fastest reactive signals implementation available. The Datastar Python SDK (datastar-py) provides framework-specific integrations for Django, FastAPI, FastHTML, Litestar, Quart, Sanic, and Starlette.

The SDK is intentionally simple, essentially implementing three core functions: reading signals from the frontend, patching HTML elements, and patching signals. Chris walked through a Quart example where a @datastar_response decorator sets up the SSE headers, read_signals() pulls in frontend state, and sse.patch_elements() streams HTML fragments back to the browser. The SDK was built by community contributor "Gazpacho King" (Chase) along with other contributors.

One of Datastar's standout capabilities is that real-time collaborative (multiplayer) functionality comes out of the box. Ben demonstrated a TodoMVC example open in two browser tabs where changes in one tab appeared instantly in the other — and crucially, this was not using optimistic updates. Every change went to the server first, and the server simultaneously pushed the update to all connected clients.

The team also demonstrated a multiplayer Game of Life and a billion-checkbox demo, both running on a $5 VPS that survived the top of Hacker News without going down. Optimistic updates — where the UI changes immediately before the server confirms — are a common pattern in SPA development. Datastar's team argues against this approach. Delaney was blunt: "People will actively lie to users in the SPA world…

The reason why people do it is because it's convenient, not because it's correct." Instead, Datastar provides built-in indicators (spinners, grayed-out fields) to show users that an action is in progress. Because Datastar's round-trip performance is so fast, the perceived delay is negligible, and the UI always reflects the true server state. This eliminates entire categories of bugs around state synchronization.

Delaney built Datastar like a game engine: a tiny core (roughly 300 lines) that handles registering plugins and setting up data-star elements, with everything else implemented as plugins. This architecture means any piece can be swapped out if someone builds something better. The team maintains a bundler on the Datastar website where users can select only the plugins they need, though the full bundle is only about 11 KB.

This game-engine-inspired modularity is what allows Datastar to be smaller than HTMX alone while doing more. Delaney mentioned Stario as a Python-specific way to work with Datastar. Stario combines Datastar with Starlette (the ASGI framework that also powers FastAPI) and bundles good defaults and best practices for building real-time hypermedia applications in Python. It launched its V2 recently and provides a more "Pythonic" development experience for those who want a batteries-included approach to building Datastar-powered apps.

Rather than pursuing venture capital, the Datastar team founded Star Federation, a 501(c)(3) nonprofit organization in the US. The nonprofit funds the project through Datastar Pro, a collection of additional plugins, an inspector tool, and access to Rocket (a web component layer) and Stellar CSS. Importantly, the core Datastar framework remains fully open source and free. The Pro revenue covers running costs, podcasting software, and potential conference travel — not developer salaries.

Ben and Delaney both maintain Datastar alongside their full-time work. 13. LLMs and AI coding tools struggle with Datastar due to overfitting on SPA code Delaney discussed how current LLMs (Claude, Codex, etc.) are heavily overfitted to React and SPA patterns. Research at a college in Oslo found that even when the entire Datastar codebase fits in any LLM's context window, the models still fall back to SPA habits.

The team provides a /docs page that can be fed into an LLM context, but Delaney's advice was honest: if you want to vibe code something quickly, use React because that is what the models are trained on. If you want to build something fast, efficient, and correct, learn Datastar properly through Ben's guide first. Ben's getting-started guide takes about 15-20 minutes to read and an hour to work through.

Datastar deliberately avoids the JavaScript ecosystem's package management. There is no npm package, no package.json, and no node_modules. The framework is distributed as a single file via CDN or the website's custom bundler. Internally, the team uses Go tooling with esbuild embedded directly, bypassing the need for npm entirely. Delaney quipped that "it's funny to have a JavaScript framework that actively hates the JavaScript ecosystem." This also means no Webpack, no Vite configuration, and no tree-shaking setup for end users.

15. Version 1.0 stable is imminent, and it is intended to be the last major version Datastar is currently at release candidate (RC) status, with the pace of bug fix releases slowing down, which the team sees as a positive sign. Ben explained that they are taking their time to get defaults right because they intend V1 to be the final major version, with no breaking changes going forward. They drew inspiration from Python and Go's approach to backward compatibility, contrasting it with the JavaScript ecosystem's frequent breaking changes.

The switch from RC to stable is primarily about locking down defaults, not adding features. Ben expects V1 stable in the first half of 2025. The Datastar team maintains official editor extensions for VS Code and all JetBrains IDEs (PyCharm, WebStorm, etc.) through the JetBrains marketplace. The extensions provide autocomplete for all data-star attributes, reducing typos and helping developers discover available features.

The extensions are also available on the OpenVSX registry, which serves AI-powered code editors like Cursor, Windsurf, and others that were removed from the VS Code marketplace. "The fastest JavaScript you can write is no JavaScript. So we really lean into what the browser can already do." — Delaney Gillilan "People will actively lie to users in the SPA world and they'll do optimistic updates… The reason why people do it is because it's convenient, not because it's correct." — Delaney Gillilan "It feels like cheating in a weird way.

It's hard to explain. It really, it's a weird, like, I don't know what we all were doing. I was part of the problem." — Delaney Gillilan "It's boring. And that's, it's so exciting. It's so amazing. And yet it's using all these boring technologies." — Chris May "We don't even use npm or any of that at all. It's funny to have a JavaScript framework that actively hates the JavaScript ecosystem." — Delaney Gillilan "Datastar is a journey of unlearning old and bad patterns, deeply rooted ones in what I think web development is." — Ben Croker "If you could do it the Datastar way, whether you're using React or HTMX or any other approach, it will be less code.

It'll be faster. It'll be cheaper. And it'll be simpler to understand. I will take on anybody anywhere on that." — Delaney Gillilan "Circuses are very well-run logistic machines compared to most developer situations." — Delaney Gillilan, on people calling things "a circus" "Your Python app will be faster than most people's compiled, low-level language thing because you're getting orders of magnitude in the algorithms and how we're doing stuff under the hood." — Delaney Gillilan Hypermedia: Hypertext combined with other media like images and CSS.

It is the foundational architecture of the web — the H in HTTP and HTML. Hypermedia frameworks like Datastar send HTML (not JSON) from the server to the browser. Server-Sent Events (SSE): A browser-native technology where the server holds an HTTP connection open and streams text-based events down to the client. Unlike WebSockets, SSE is unidirectional (server to client) and works over standard HTTP.

Signals: Reactive data bindings that establish relationships between values. When a signal's value changes, anything that depends on it automatically updates. Similar to formulas in a spreadsheet. In Datastar, signals handle the client-side interactivity that Alpine.js would typically cover. Morphing: A DOM update strategy where incoming HTML is compared against the existing page and only the differences are applied.

This preserves UI state (focus, scroll position, form inputs) unlike a full DOM swap. Out-of-band updates: Updating multiple parts of a page from a single server response. In HTMX this is a special feature; in Datastar it is the default behavior. Optimistic updates: A UI pattern where the interface changes immediately before the server confirms the action, then rolls back if the server rejects it.

Datastar's team discourages this pattern in favor of showing true server state. Plugin architecture: Datastar's core is only about 300 lines of code. All functionality (DOM patching, signals, event handling) is implemented as plugins that can be added or removed independently. Tau of Datastar: The philosophy document written by Ben Croker that explains the "way" of building with Datastar. The core principle: use as little Datastar as possible and leverage the browser's native capabilities.

Datastar represents a genuine paradigm shift in how developers can think about building web applications. Rather than splitting your brain between a complex JavaScript frontend and a backend that merely serves JSON, Datastar lets Python developers do what they do best: write server-side logic that generates HTML. The framework's use of server-sent events, reactive signals, and intelligent DOM morphing means you get real-time, multiplayer-capable web apps without touching npm, configuring a build pipeline, or learning React.

At 11 KB, it is smaller than most individual React components. The passion of this team — a former circus performer turned game developer, a PHP veteran who now writes Go, and a Python coach who converted after years of HTMX — is infectious. Whether you are building a simple CRUD app or a real-time collaborative dashboard, Datastar's message is clear: the browser is already an incredibly powerful platform, and maybe we have been overcomplicating things for a very long time.

00:00 You love building web apps with Python, and HTMX got you excited about the hypermedia approach. 00:05 Let the server drive the HTML, skip the JavaScript build step, keep things simple, right? 00:11 But then you hit that last 10%. You need AlpineJS for interactivity, or your state gets out of sync, 00:20 together. What if there was a single 11-kilobyte framework that gave you everything HTMX and 00:31 and performance so fast, you're actually bottlenecked by your monitor's refresh rate.

00:50 framework is changing the way full-stack developers think about the modern web. 01:19 Welcome to Talk Python To Me, the number one Python podcast for developers and data scientists. 01:42 And if you want to be part of the show, you can join our recording live streams. 01:54 Be sure to subscribe there and press the bell so you'll get notified anytime we're recording. 02:18 Carefully craft a command once, run it forever with auto restart, URL detection, and a full CLI.

02:34 Very excited to talk about Datastar and some cool web frameworks for Python people and beyond, of course. 03:02 for everyone here and like go around the squares of Ben, I'll let you go first. 03:10 I'm based in Europe most of the year, but half of the year my wife and I spend here. 03:14 In terms of background, I've been primarily working with PHP for well over 20 years and got involved with Delaney and Datastar, been a core maintainer on that project ever since.

03:26 And I looked at my commit history for last year, and it turns out now I write more Go code than PHP, so I don't want to call myself a PHP developer anymore. 03:37 I'm just a web developer, a backend web developer, primarily that also writes TypeScript and maintains a front end. 03:44 framework. There's a lot of stuff going on and ways in which you can write code for the web these days. 03:53 Hi, how you doing?

Yeah, I have kind of a weird checkered background into web development. I was 03:58 originally in the circus, then I became a 3D artist, then I became an engineer. I've worked in 04:04 games, video games, slot machines, military applications, all kinds of crazy things. 04:14 I love the ideas of the web, but I got really tired of how you actually implement things in that. 04:27 So I ended up going down many, many rabbit holes and finally found something to make it better for everybody else.

05:02 really quickly in real time, which we'll get into, but yeah, sort of foreshadowing there. 05:14 Yeah. So about me, I started writing websites back in 1995 and then picked up Python about 10 or so years later and just have really enjoyed the ride since then. 05:25 Picked along the way, became technical coach and just loved making single page applications. 05:32 You know, I love that we can publish something from our computer and anybody around the world can see it.

05:36 And then what, maybe a little over a year ago, I, oh no, it was more than that. 06:05 to Datastar. And I'm like, okay, this is interesting. You made the case very well. Of 06:10 course, I'll link to the article. And so I thought, hey, I need to have Chris here as my Tony Romo to 06:18 my Al Michaels or Nico Rosberg to my Crofty or whatever, right? So I'm happy to have you here. 06:24 Exactly.

Awesome to have you here. So let's just start with what is Datastar, right? I mean, 06:57 some military applications where I needed really fast updates of a browser. And the reason why you 07:09 into deployment. But having a browser means that you have this nice little sandbox that things can 07:13 go in. So it's actually more of a deployment platform in my background than, you know, just 07:17 the regular web.

But I was doing things that were pushing the browser really, really far. I was using 07:21 Vue and Spa. And I basically was like, well, these are the smartest people out here, but it's not 07:26 fast enough. So I was using crazy WebSocket stuff, all this binary stuff. And then I tried doing, 07:31 you had someone on last week talking about LiveView and like they have a Python version of that. I went 07:41 optimizing that 10 different ways.

I had an entire framework for doing this. And basically, 07:45 in my opinion, that's a complete dead end. It is untenable. We can go into the reasons why, 07:53 media space. And I completely discounted all of that because I said, like, I'm doing low level 07:58 binary stuff. There's no way this other approach can be faster. And then my thing is always check 08:02 the metrics, always don't take your assumptions and do the work.

And the thing is, there's things 08:11 how to use that. So I went and I took a year and a half work and just threw it in the trash 08:27 kilobyte shim that is the fastest, smallest thing out there by orders of magnitude. So it's not just 08:33 a slightly different thing. It is literally a different paradigm shift. It's a crazy shift. 08:42 start way. So I'll let Ben actually explain what that is. But the thing is from a low level C 08:54 And also, it sounds like your advice comes from somebody who's done a lot of profiling.

09:09 We actually looked at their flangraphs and it was a bug in the Safari GPU stuff. 09:14 Because we were actually at the level where the JavaScript doesn't even show up. 09:34 And they get to be a full stack developer in whatever language they choose. 09:52 But coming from a PHP background, I want the backend to be driving the front end. 10:09 And some people get tripped up on what hypermedia is, but it's essentially hypertext with other media like images and CSS and that kind of thing.

10:16 And everybody should know what hypertext is because it's the H in HTTP and HTML. 10:22 There is an expectation for people coming into Datastar that you have a basic understanding of the web and web browsers and the web browser API because we lean as heavily as possible on the browser API. 10:34 We get a lot of people coming into the Discord asking us, you know, how should I do this the Datastar way?

10:39 And it got to the point where I'd heard that question so often I decided, OK, I'm going to write a page in the Datastar docs. 10:49 And if there's one thing to take from that, it's use as little datastar as possible. 10:54 Like leverage the browser, because the browser is an incredible thing, right? 10:58 Like it's basically an operating system, our operating system as web developers. 11:12 And where HTML kind of lacks or where there are some gaps, that's essentially what Datastar is trying to fill.

11:21 So just to relate this, I guess, to something that other people might be familiar with, which is HTMLX. 11:27 I was an early contributor to HTMLX, actually, and I was sold on the idea of hypermedia from the very beginning. 11:39 And the problem that I ran into after several years of thinking HTMX is all I need is that last 10%, right? 11:50 But that last 10%, which we all know is the hardest piece that takes the most work, just isn't covered.

12:15 Now you have HTMX and Alpine, for example, and you're trying to make those play well together. 12:20 And because I think that might be a little bit of the missing sauce from HTMX. 12:38 But if you try to make a meal out of salt, you're not going to want to eat it. 12:47 and you're like, this is so amazing to update this with HTML and partials, and so is that. 13:28 Like, for example, this was my thing because I actually tried to fix HTMX back in the day.

13:37 is that you have HTMX, you can add, it has extensions, so you can add stuff to it. 14:07 So if you don't agree with us, or if someone's better than I am, great, that's wonderful. 14:23 And the irony is that if you build it in that kind of plugin style way, in the more game developer style way, we are smaller than HTMLX and Alpine alone, let alone combined, let alone Hyperscript and all these other things.

14:36 When I first encountered Datastar and looked at the source code, it looked very foreign to me because Delaney coming from game development, he built Datastar like a game engine. 14:47 So you have this very thin core and then everything else pretty much is a plugin. 14:52 And all Datastar core is a way for registering plugins and having Datastar attributes. 15:25 But that approach means that everything is modular and everything is there for a reason.

15:32 But like deciding what plugins go in and what stay out is one of the challenges. 15:39 My way of thinking about it is that Datastar gives you everything you need and nothing you don't. 16:15 And when something goes wrong, Sentry gives you the whole chain of events in one place. 16:22 You can see what's led to the issue without digging through five different dashboards. 16:43 Something breaks, Sentry alerts you, the dashboard shows you the full context.

16:47 Seer helps you fix it and catch new issues before they ship. It's totally reasonable to go from an error occurred to fixed in production in 16:55 just 10 minutes. I truly appreciate the support that Sentry has given me to help solve my bugs 17:01 and issues in my apps, especially those tricky ones that only appear in production. I know you will 17:06 too if you try them out. So get started today with Sentry.

Just visit talkpython.fm/sentry 17:12 and get $100 in Sentry credits. Please use that link. It's in your podcast player show notes. If 17:35 Now, before we move on from sort of introducing Datastar, I do want to point out at data-star.dev, 17:45 You've got a really nice space 2001 sort of theme with Hal and all that, which is great. 18:00 But what I want to point out is I want to encourage people to go watch your little video.

18:11 And one thing we didn't really mention is that Datastar is a full-fledged SPA replacement. 18:17 So again, like that last 10%, often people will think, oh, well, I need to go to React or Vue.js or some single page application framework. 18:26 Whereas we're saying that, no, no, no, Datastar will not only, it's not like a subset or like SPAs are not a superset. 18:34 it's on the contrary. I think Datastark, we think Datastark can do more than SBAs because we are 18:42 driven by the backend and we are focused on hypermedia, which is the language of the web.

18:46 So this, yeah, so this video is kind of throwing, yeah, anyway, everybody should watch it. 20:06 And it's not that you're trying to like, we love what Carson has done with HCMS. 20:30 So we have the fastest morphing strategy and we also have the fastest signals, which means doing these kinds of things. 20:38 Like it's just these are the kinds of things that are just a non-issue in this if you do things our way.

20:42 And you're leaning into the web ecosystem by leveraging web components instead of having to like build, have a build time pipeline to, you know, do all the custom JavaScript. 20:53 Like once I realized like you can do these things, it just made, it just clicked. 20:57 And I just make it's I feel like it's so much more fun now to work on the web now that I understand these things. 21:06 I feel like there's some similarities to the example section of the HTMX place.

21:17 Before we get into those examples, just just to kind of take a step back and say, OK, we've mentioned HTMX a few times and we don't we don't even like to compare ourselves to HTMX. 21:41 but it also by default, or the recommendation is to use server sent events. 22:16 But when you see how simple this is, then you can perhaps see potential for this, right? 22:22 And SSE or service end events have had kind of a renaissance in recent years with all of the LLMs, right?

22:33 So this type of technology, while it's not old, sorry, it's not new, it's actually been around a long time, has kind of been underused. 23:16 and I don't know if you saw the content type change, but content type now is text HTML. 23:44 So we're going to see some more advanced examples where the SSE connection is held open for longer. 23:50 So I think wrapping your head around this example taps you into the potential of Datastar.

24:00 well, when I looked at Datastar, I'm like, OK, there's some interesting aspects here. 24:28 including deciding what part of the page that the server created in the first place to update. 24:43 is like, we need to update this pane on the right, this text, and this element all in one response. 25:35 And I'll caveat what Ben said there in that like state mostly lives in the backend. 25:48 You don't own that, but most of the state from your database should be in the backend.

27:03 Yeah, I really like the philosophy of having so much of it controlled by the server. 27:23 And there's just so much power and flexibility to write really cool server code. 27:37 question that comes up often is like, OK, well, how do I format this? Because it has its own syntax. 27:44 Very simple to read, obviously, right? An event name and then these data lines. And you can just 27:48 have as many data lines as you want.

And that's your HTML. If you scroll up, though, we do have… 28:01 see there. And the Python SDK is actually, I would say, one of the most intricate ones we have. 28:13 name, and many other contributors did an amazing job on that. So lots and lots of Python frameworks 28:18 are supported. You can maybe speak more to this, Chris. And really, the SDKs are very simple, 29:46 It changes the whole dynamic in a deeper way that you can literally save 5,000X in your network bandwidth.

31:01 There's caveats there that I would recommend not doing it, honestly, if you're going to do it. 32:06 My app, CommandBook, gives all of these long-running commands a permanent home. 32:27 So when your dev server goes down mid-reload, Command Book just brings it right back up and does so over and over until the code is fixed. 32:42 And it shows you uptime, memory usage, and all sorts of cool things about your process.

32:53 So anything you've configured in the UI, you can fire off from your terminal with just a single command. 33:20 Yeah, on the topic of latency and all that, if you go to the examples, there's some we could look at that I think really demonstrate this. 33:28 Well, maybe start with bad Apple just because we're talking about refresh rates. 33:33 What's happening is that the back end is streaming down just a bunch of symbols, but it creates this animation.

33:39 And if you were to open the network tab, you would see it actually would be interesting to see. 33:58 I don't know what frames per second we have this set to, but you see it streaming past, right? 34:03 The first time many people see this, this is a surprise that the browser is capable of this. 34:24 basically a free tier server. So like, this is just a non-issue and it's doing all the compression 34:28 stuff.

So if you notice that your update, even though we're doing like full ASCII development at, 34:32 you know, thousands of characters, your updates are actually not updating that. Like you see how 34:37 it's transferring, but it's not transferring that much compared to how much it's actually coming out. 34:41 I can see we got 1.9 megs for the whole page. Yeah. But do you see next to it? What, what was 35:13 in practical usage, like I have a status screen that I have from my production app at work.

And 35:19 it's just amazing to just constantly be seeing these things update. And I'm doing that by having 35:24 the database tell my Python code, hey, refresh. I actually ask it to get all the entries from the 35:31 database and send it down the pipe. And so it's not like I'm doing the optimized thing. I'm doing 35:35 the simple thing and I get all these cool things just updating all the time. And it's just such a 35:44 Speaking of that, go to the DB Mon example.

This is one of my favorites because when React 35:50 first had their first conference, they said, look at what we're doing. We're able to update at a rate 35:54 that no one else can compete with us in how fast they could update the browser, right? If we 35:59 actually, yeah, you're still there. So the thing is, if you actually set the FPS to something like 36:03 80, whatever. So that is how fast it's coming from the backend to you.

So go ahead. Yeah, 36:22 So it's like a database monitoring table that shows you how many transactions are the database overloads. 36:38 A lot of people see these examples and they think, well, I'm not building this kind of stuff. 37:10 So this is a CRUD app, but what Datastar gives you is the ability to do multiplayer out of the box. 37:15 And that is like real-time collaborative apps are not easy to do and not easy to scale as well.

37:22 But as you'll see here, when you have like two sessions open, it's going to be near instant. 37:40 to-do example, which is required to be a legitimate JavaScript framework. But I've opened it in two 37:46 tabs and I've used Vivaldi's tile. So these are legitimately two browsers. They just appear to be 37:51 kind of in the same window. And when I enter stuff into it, it literally looks like they update in 38:04 Yeah, if I look at the other one and I click on one, it feels like that's responding to my click.

39:25 This is an example where all of us could be playing live with each other right now in an active shared state that's been at the top of the Hacker News and again, runs on a potato. 39:50 And if you open up that in the other tab, you would actively see the exact same state. 40:17 like look at your network tab and you'll see how little data we're actually sending over. 41:19 especially the kind of the mental shift of like, because I kept thinking, okay, I need to like send one row at a time.

41:25 And I actually have one status screen that does that because we use a Firestore, Google's Firestore as our backend for this app. 41:36 And so on another status screen, I actually, you know, query the whole database table or collection and send it down to Pipe. 41:42 And because sometimes it doesn't send from Firestore, I get the entire latest state of all the things that are in flight and updated on my screen.

42:15 So one of the things that's really common in JavaScript is I click this thing, it changes. 42:25 It's very possible the server died, that you're not allowed to make that change or whatever. 42:37 The idea is that you have these indicators that not only basically your indicators drive a signal. 42:55 Because again, the state of what the local stuff is while the change is there, that lives in the client.

43:20 The reason why people do it is because it's convenient, not because it's correct. 43:57 So if you open the network tab, I just want to kind of walk you through this briefly. 44:00 If you cancel that, when you hit edit, you will see a network request to the server. 44:07 So it's real time as in like what you're seeing now is the actual state reflected on the backend. 44:28 And when you do use it, it's because you're trying to cover up poor performance.

45:07 And also because you're not doing polling with polling, you have to send to the server and the server sends back. If you just send from server 45:13 when something updates, now you've just halved your RTT, right? Your round trip has just halved. 45:19 So you half it and you're doing like a thousand less of something. All of a sudden, things opened 45:23 up for you in weird ways, right? It's a fundamentally different way of thinking about the problem.

45:33 checkbox demo and they had a whole write-up on it, right? And they basically had to take it down 46:01 What's really interesting about that demo is that it becomes a backend optimization challenge, right? 46:22 Because it's a nice demo to look at when you realize there are a billion of these being stored in a SQLite database somewhere. 47:10 Like, you will feel weird about every other approach once you really try it.

47:55 I'm like, oh yeah, because you don't understand what everything is going on behind it, you know? 48:13 kind of program with this a little bit and then what it looks like on the server. 48:28 Let's start with some of the Datastar attributes, and then we could talk about that. 48:51 To access that, you need to have a click listener or some sort of event listener to trigger that. 49:10 And we have a small grammar that you'd find on the reference page with all of the data-attributes.

49:23 So data on colon click is just obviously registering a click event handler on the button. 49:55 And what Datastar is going to do from the backend is it's going to, yeah, just send back down that div with some text content inside of it. 50:03 And then what Datastar does is it mutates the incoming DOM into the existing DOM. 50:14 So rather than doing a straight swap, which is what HTMLX does, it will actually morph the incoming HTML into what's currently on the page.

50:23 That's kind of what opens up the door to these kind of broad, like where you send the entire document down, but only what changes get swapped in. 50:41 focus and like where your input is and all that stays the same. So when you, even though you update 50:46 the whole page, you're actually not actually changing the state and that's really important. 50:51 So you do declarative development. You just say, I want it to look this way and it just does the 50:56 right things to do it.

It's from a mental ball. It's almost like having the BDOM in the backend. 51:00 You just say, here's what I want this page to look like. And it does all the work, but we don't do 51:03 BDOM. We don't do any of that stuff. We do the fast thing. So in terms of what your backend would 51:08 send, if you can just scroll back up, it's that text that you were looking at. Let's look at the 51:14 raw version because, yeah, so that's the HTML.

If you scroll down to the next text, it's a code 51:19 field. Yeah. There's a section that has like event, data star, patch elements, and then what the 51:24 elements are and so on, right? This is like the SSE stream. Yeah. And that would be the raw events 51:59 I think before I throw it to you, though, yeah, there's a lot of framework support here. 52:10 There's a bunch of different ones here, but maybe just talk us through this, if you'll, Chris.

52:16 I'm not as familiar with the example, but as you can see, this one method is, I think, where the magic happens. 52:27 So, you know, they first define a route, a home route slash, and it returns HTML and it's just in the string there. 52:42 And obviously you see that it's pulling Datastar from the CDN and then it on the load, it gets it sends a request to the slash updates endpoint. 52:56 And so down below that, you have the slash updates endpoint, which has a decorator called data, data star underscore response.

53:03 And that just does a couple of nice things like sets the HTTP headers and whatnot to be the service and event protocol. 53:10 And then what I like to the first line says signals equals await read signals. 53:21 data star has a specific way of sending the state of the front end to the back end. 53:26 Right. We haven't even talked about signals yet. They're like kind of a data binding set of JavaScript data that loads, you know, reactive data loads on the front end, right?

53:56 by using the sse.patchElements function, or I guess it's a method technically. 54:01 And all it's doing is sending a string that has the current date time dot now in ISO format down. 54:21 With this time, it's instead of sending the HTML down, we're sending a signal. 54:38 from the server set one of these signal things that will be reactive on the front end, right? 55:04 You're setting up a relationship saying, when this thing and this thing changes, update this.

55:13 So kind of like with SQL, you think of SQL as a declarative language, right? 55:21 You just say, hey, I want when this thing changes, this other thing to change. 55:28 It's not built into the browser, but we just made the web a little bit more declarative. 56:00 So you all have nice extensions and plugins for common editors Python people might use, right? 56:19 So it's in the JetBrains marketplace, so it'll work for, I believe, all JetBrains IDEs.

56:29 In the OpenVSX registry, all the ones that have been kicked out from VS Code, this is where they all have to go to get their installs, right? 56:41 Yeah, if you're doing cursor, anti-gravity, windsurf, like all those things, they were all kicked out of the VS Code registry. 57:01 I mean, Delaney wrote the Go one, I wrote the PHP one, and the rest are just community contributions. 57:14 These just, you know, save on typing, but more importantly, save on making typos.

58:13 that's doing, ironically, using Datastar to do some stuff around like how LLMs work with code bases. 58:22 And the reason why is because the entire code base fits in basically every context, even the nano ones, like the entire code base fits there. 58:33 overfitted. So if you just want to make a website with agentic stuff, go do React, 58:38 because that's what it's built for. And it's overfitted to such a degree that if you try to 59:08 but I'll say that we do not focus on that at all because you're basically fighting against what the training already happened.

59:22 If you just want to like one shot something, go use React and stay in that world. 59:29 I feel like this might resonate with you, Delaney, especially the way you just described it. 59:47 It reminds me very much of like, it's just like, nope, that's not what I told you to do. 01:00:37 It's more that they are just overfit to the, like, the sea of badly written SPA code. 01:00:52 Let's talk, speaking of being near the guy, if I go over here to more, there's a pro section.

01:01:14 We are taking our sweet ass time for a very good reason, which is that we want version one to be the last version or like the last major version. 01:01:23 We don't really want to force people through breaking changes and major updates because that's really just a pain. 01:01:36 And like there are some ecosystems where you just don't make breaking changes. 01:02:18 The thing is that, like for example, beat is kind of the well-known way to do this stuff.

01:02:30 So it's literally embedded in our, like we just use the ES build directly. 01:02:36 We just use the go tools inside of our binary because that's the fast thing to do. 01:02:41 So we have no dependencies, nothing, and we don't even use npm or any of that at all. 01:02:51 we, Datastar gained a lot of traction, a lot of interest, and people had a lot of requests. 01:03:01 You can add it yourself, or we can build a plugin and add it to Datastar.

01:03:05 But we were very adamant about keeping the open source Datastar framework as tight as possible. 01:03:21 So during that beta phase, we started thinking about, well, do we have multiple versions of Datastar? 01:03:30 And at the same time, we were also asking ourselves, because Delaney and I both, we have full-time things that we're doing. 01:03:35 And this is a side project, but we're almost doing it full time alongside our other full time things.

So how do we make this project sustainable? Because it doesn't stop at Datastar. You probably see Rocket and Stellar CSS on that page in the navigation sidebar. Those are like projects that build on top of Datastar. So Datastar is just the foundation. And Rocket kind of takes it to web components and Stellar CSS is a CSS framework that builds on top of these concepts. 01:04:05 So we're trying to fix not only JavaScript web components, but also CSS.

01:04:32 So we founded a nonprofit organization in the U.S. called Star Federation, and that's what backs this project, including Rocket and Stellar CSS. 01:04:44 To help fund that organization, we decided let's have Datastar be the open source framework, but then something called Datastar Pro, which is like all those plugins that we think are good ideas, but that most people don't need. 01:05:01 It's a collection of plugins that you might want if you're using Datastar in a professional setting.

01:05:07 But, you know, if you're just using Datastar, you don't actually need it. 01:05:13 It's a collection of plugins and it's a Datastar inspector, which sits on your page. 01:05:19 You get access to the bundler and now you get access to Rocket and StadrCSS, which is a work in progress. 01:05:28 Like there was definitely some uproar initially that, you know, some plugins were taken away, but those plugins were never taken away.

01:05:38 What the result is, is that we have like some money coming into a bank account, which is not even used to pay maintainers. 01:05:46 We use that for running costs and like for, you know, podcasting software. 01:05:56 But essentially, it's like a way of having some money into the bank so that we can justify all of the work that we do in maintaining Datastar and pushing that forward. 01:06:07 100% free sounds great until that means it becomes abandoned where, you know, and like people can't work on it anymore.

01:06:16 There's one thing that's kind of interesting about the model, because especially with the tailwind stuff that's been going on lately. 01:06:51 or any kind of game engine, you pay for the game and then all the mods are free. 01:06:55 So all the rocket components and all this stuff is gonna be free, but the core engine is not free. 01:07:27 So you can do open source in a way, but you have to find a core engine that is not open source.

01:07:54 So that stagnation in like just releases with fixes is a good sign to me that we're very, very close. 01:08:20 I mean, that's what happened with HMX 2 was just like fixing some defaults that they decided they got wrong in version one. 01:08:30 And the only way to do that is to just let it simmer, let people use it, let people dog food it. 01:08:35 And us, too, we're actively using for many projects using data ourselves and discovering every now and then, oh, this default is probably we're trying to avoid foot guns.

01:08:46 So we're trying to make it so that the defaults give you the best possible experience that you need zero configuration, ideally, but you can configure as needed. 01:08:55 But getting those defaults right is really the only thing stopping us from, not right, but locked down is the only thing stopping us from a V1 stable. 01:09:07 In fact, it's one of our things that I tell Delaney, never promise a timeline.

01:09:12 But I could see us in the first half of this year, just flipping the switch. 01:09:18 But it sounds like you might be able to use the RC and you might more or less be safe, yeah. 01:09:28 so that they just drop it in their React projects because the entire framework is smaller than most components. 01:09:50 Chris, I'll let you go first so Ben and Delaney can have the final word. 01:10:14 shopping for eggs, I believe it was.

And essentially one of them is an HTML driven 01:10:20 multi-page app and it smokes the single page applications, the native apps and everything. 01:10:25 And so I put a link in our chat. Maybe you'll be a part of the show notes. It's a deep link to go 01:10:36 I want to build. I want to build websites that are fun for people to use. And, you know, Datastar 01:10:50 possible. So I guess the two things I would say is, one, check out the deep link if you're at all 01:10:55 interested.

And number two, definitely try out something, you know, just even clone the Python 01:11:00 repo and just try some of the examples and see what it's like. Yeah, I'll definitely link to that. 01:11:23 old and bad patterns, deeply rooted ones in what I think web development is. 01:11:49 I can be so much more creative on the backend and that's what interests me. 01:12:21 stuff, like you want someone to roll with you, not because you're trying to up them.

01:12:24 It's that like, they're trying to help you find weaknesses in your game. 01:13:16 hey, there's people that care about this stuff and are working towards it. 01:14:29 about the real-time stuff, but it's better for even just normal crud stuff. 01:14:52 Get notified immediately about errors and performance issues in your web or mobile applications with Sentry. 01:15:11 This episode is brought to you by CommandBook, a native macOS app that I built that gives long-running terminal commands a permanent home.

Summary

This report covers the latest developments in android. The information presented highlights key changes and updates that are relevant to those following this topic.

---