Datastar: Modern web dev, simplified

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:16 and suddenly you're juggling two unrelated libraries that weren't really designed to work

00:20 together. What if there was a single 11-kilobyte framework that gave you everything HTMX and

00:26 AlpineJS did, and more with real-time updates, multiplayer collaboration out of the box,

00:31 and performance so fast, you're actually bottlenecked by your monitor's refresh rate.

00:37 That's Datastar.

00:38 On this episode, I sit down with its creator, Delany Galan, core maintainer, Ben Crocker,

00:43 and Datastar convert, Chris May, to help explore how this backend-driven, service-sent event-first

00:50 framework is changing the way full-stack developers think about the modern web.

00:55 This is Talk Python To Me, episode 537, recorded January 15th, 2026.

01:19 Welcome to Talk Python To Me, the number one Python podcast for developers and data scientists.

01:24 This is your host, Michael Kennedy.

01:26 I'm a PSF fellow who's been coding for over 25 years.

01:30 Let's connect on social media.

01:32 You'll find me and Talk Python on Mastodon, BlueSky, and X.

01:35 The social links are all in your show notes.

01:38 You can find over 10 years of past episodes at talkpython.fm.

01:42 And if you want to be part of the show, you can join our recording live streams.

01:45 That's right.

01:46 We live stream the raw uncut version of each episode on YouTube.

01:50 Just visit talkpython.fm/youtube to see the schedule of upcoming events.

01:54 Be sure to subscribe there and press the bell so you'll get notified anytime we're recording.

01:59 This episode is brought to you by Sentry.

02:01 Don't let those errors go unnoticed.

02:02 Use Sentry like we do here at Talk Python.

02:04 Sign up at talkpython.fm/sentry.

02:08 And it's brought to you by CommandBook, a native macOS app that I built that gives long-running

02:13 terminal commands a permanent home.

02:15 No more juggling six terminal tabs every morning.

02:18 Carefully craft a command once, run it forever with auto restart, URL detection, and a full CLI.

02:23 Download it for free at talkpython.fm/command book app.

02:27 Ben, Delaney, Chris, welcome to you all.

02:30 Thanks for being here on Talk Python To Me.

02:31 Thanks for having us.

02:32 Hey, how are you doing?

02:33 Doing well, doing well.

02:34 Very excited to talk about Datastar and some cool web frameworks for Python people and beyond, of course.

02:42 But, you know, most people listening doing Python web frameworks.

02:45 So talk about how that all integrates.

02:47 And if you like the HTMX vibe, which we've talked a lot about on the show, I think there's

02:52 going to be a lot to like here as well.

02:54 And maybe more.

02:55 We'll see.

02:55 A case to be made.

02:57 But, you know, before we get into all of that, though, let's just talk about a quick introduction

03:02 for everyone here and like go around the squares of Ben, I'll let you go first.

03:07 Who are you, Ben?

03:08 Based in Costa Rica at the moment.

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:50 Well, thanks. Awesome to have you here. Delaney, hello.

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:11 I tend to work on really highly optimized, fast things.

04:14 I love the ideas of the web, but I got really tired of how you actually implement things in that.

04:20 And I was doing very large applications with millions of updates a second.

04:24 And the tools that were out there just weren't good enough.

04:27 So I ended up going down many, many rabbit holes and finally found something to make it better for everybody else.

04:33 So yeah, that's really cool.

04:34 And wow, what a really interesting issue.

04:36 I know you got some crazy stories.

04:38 Yes, I do.

04:39 I always have a funny, weird outcome of something.

04:42 Ironically, people talk about things being a circus,

04:45 but like circuses are very well run logistic machines

04:48 compared to most developer situations.

04:50 So it's kind of funny.

04:50 Yeah, it's an insult to circuses.

04:52 Yes, it is.

04:52 It really is.

04:54 Amazing.

04:55 Okay.

04:55 And what we're going to talk about, Datastar has this amazing ability to update many things

05:02 really quickly in real time, which we'll get into, but yeah, sort of foreshadowing there.

05:07 And Chris May, welcome to the show.

05:10 I've known you for a long time and I'm really happy to have you here.

05:12 Great to be here. Thank you so much.

05:14 Yeah.

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:30 I loved, I just love the web.

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.

05:40 I remember I was on a trip and I was listening to a podcast of HXPod, the HTMX podcast,

05:46 and heard about this crazy, cool tool, Datastar.

05:50 And I was like, I even put in my DjangoCon presentation, like you should, everybody else

05:54 should try it out.

05:55 And finally I did and I'm converted.

05:56 I love it.

05:57 So I'm excited that the three of us get to talk about it.

06:00 The reason that we're having this podcast is because I read your article about switching

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:30 we've hinted that it has some similarities to htmx but also not so ben and delaney give us the

06:37 overview what is datastar so i can give a little bit of history and then ben's probably better at

06:42 saying what it is now i have a background in like low-level stuff um even though i was a 3d artist

06:47 first i'm much more comfortable in like shader development and that kind of thing like so glsl

06:52 web thing like i'm a c guy that knows some other things but the thing is that i was working on

06:57 some military applications where I needed really fast updates of a browser. And the reason why you

07:03 in this military situation is that getting things approved is really hard, like executables to go

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:37 hard in making a binary version of that, like going down to the protocol level, changing,

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:49 but the thing is, long story short, I ended up seeing what was happening in HTMLX in the hyper

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:07 that are wrong in the implementation, but there's things that are 100% right in the overall ideas of

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:16 and said, okay, I'm starting over and like ended up doing some basic things would probably get into

08:22 and ended up with this thing that is a backend diagnostic backend framework that has a 10

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:37 So the difference between reacts to something like HTMX is different from HTMX to the data

08:42 start way. So I'll let Ben actually explain what that is. But the thing is from a low level C

08:46 guys point of view, it is one of the fastest things in your stack now, which is crazy to think

08:51 Yeah, like a 10K shim can do that.

08:53 That's incredible.

08:54 And also, it sounds like your advice comes from somebody who's done a lot of profiling.

08:59 Very much so.

08:59 Like, that's the only thing.

09:00 You got to measure, not guess.

09:03 Yeah.

09:03 In fact, there's funny things that we've had things on Twitter fighting with people and

09:06 they're like, oh, this one situation was really slow.

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:17 It's actually a GPU issue of it rendering fast stuff.

09:20 in the browser, nothing to do with the JavaScript.

09:23 Because the fastest JavaScript you can write is no JavaScript.

09:25 So we really lean into what the browser can already do.

09:28 And we're just making it so that that's easy to do so that the average person with the average website

09:32 doesn't have to write any JavaScript at all.

09:34 And they get to be a full stack developer in whatever language they choose.

09:37 And I'll let everyone else talk from there.

09:40 Awesome. Ben?

09:41 Yeah, my version is going to be quite different to Delaney's

09:43 because we care about different things.

09:45 Fortunately, we do care about some of the same things.

09:49 We work well together because I think we complement each other.

09:52 But coming from a PHP background, I want the backend to be driving the front end.

09:57 And it naturally does, right?

09:58 Because even your HTML is being produced by your backend.

10:02 And that's what's being served to the front end.

10:05 I describe Datastar as a hypermedia framework.

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:45 We call it the tau of datastar.

10:47 So it's kind of like the way of datastar.

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:02 So, and everything happens at the C level, super optimized.

11:06 We're not going to be able to build something faster.

11:08 So leverage the browser as much as possible on the browser APIs.

11:12 And where HTML kind of lacks or where there are some gaps, that's essentially what Datastar is trying to fill.

11:19 So I did a lot of work.

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:33 So HTML is the language of the web.

11:36 Why are we trying to replace it with JavaScript?

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:46 Because it'll get you 90% of what you're trying to do.

11:50 But that last 10%, which we all know is the hardest piece that takes the most work, just isn't covered.

11:56 So with HTMX, for example, you will very often reach for another library like AlpineJS,

12:02 or you'll start writing vanilla JS perhaps to fill in those gaps to interactivity to the page,

12:09 because HTMX is really just going to the back end, replacing the DOM.

12:13 But now you have two dependencies.

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:24 I've had Carson Gross on and I really admire HTMX.

12:28 But as I've worked with it over a couple of years, I feel like it's really good as salt or seasoning,

12:35 something you sprinkle on to really make a website better.

12:38 But if you try to make a meal out of salt, you're not going to want to eat it.

12:41 And what I mean is, you have three different disjointed parts of the page,

12:47 and you're like, this is so amazing to update this with HTML and partials, and so is that.

12:51 But then you start talking about AlpineJS and connecting different things,

12:56 and then the JavaScript gets out of sync with this server response.

12:59 And it just, you start to feel constrained by it.

13:03 And I think you all have a really nice solution.

13:05 It's something a little bit like how you, we're going to talk about it,

13:08 but sort of how you specify the HTML to be updated by the server,

13:13 but then also connecting different parts of the pages.

13:16 Chris put it in his article that like the problem is AlpineJS and HTMX

13:20 are just two unrelated different things that happen to go together a lot.

13:24 And so they're not cohesive in a sense, right?

13:26 Well, and that's one thing that's definitely an issue.

13:28 Like, for example, this was my thing because I actually tried to fix HTMX back in the day.

13:33 And like the things that I wanted to fix were the problem that I see at least

13:37 is that you have HTMX, you can add, it has extensions, so you can add stuff to it.

13:41 But it fundamentally was built to be like, here's our way of doing it.

13:45 And then you can do your own stuff on top of it.

13:47 The problem is, is that I thought that's broken.

13:51 I've done enough game development to know that you need to be agile.

13:53 I need to be able to like be able to move quickly.

13:55 So I wanted it so that nothing was basically like the core of data star is like 300 lines

14:01 long.

14:01 And it is basically setting up data dash star elements, hooking up plugins, and then everything

14:06 else is a plugin.

14:07 So if you don't agree with us, or if someone's better than I am, great, that's wonderful.

14:12 We will be able to just pop that part out, put the new part in.

14:15 But plugins can now depend on each other.

14:17 They can understand.

14:17 It's an ecosystem.

14:18 Ironically, that's what happens under the hood.

14:21 But the ideas of that make it so much more powerful.

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:34 So it's just a different way of thinking about the problem.

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.

14:59 And that's pretty much it.

15:00 Everything else is an add-on that you, is a plugin that you can take away.

15:03 So we even have a bundler on the site that allows you to just, well, you can just download

15:08 Datastar core or you can just select what plugins you want.

15:12 Now, that in and of itself is not that interesting because we're, at the end of the day, we're

15:16 talking about a 10 kilobyte JavaScript file with all of the plugins.

15:19 But it is open source, which we didn't mention.

15:21 And so anybody can go just kind of look at it if you're interested.

15:25 But that approach means that everything is modular and everything is there for a reason.

15:30 And we'll get into this later, I guess.

15:32 But like deciding what plugins go in and what stay out is one of the challenges.

15:36 And we just try to keep it as lean as possible.

15:39 My way of thinking about it is that Datastar gives you everything you need and nothing you don't.

15:44 And that's how we try to kind of keep it lean and fast.

15:48 This portion of Talk Python Maze brought to you by Sentry.

15:51 I've been using Sentry personally on almost every application and API that I've built for

15:56 Talk Python and beyond over the last few years.

15:59 They're a core building block for keeping my infrastructure solid.

16:03 They should be for yours as well.

16:04 Here's why.

16:05 Sentry doesn't just catch errors.

16:07 It catches all the stuff that makes your app feel broken.

16:10 The random slowdown, the freeze you can't reproduce, that bug that only shows up once

16:14 real users hit it.

16:15 And when something goes wrong, Sentry gives you the whole chain of events in one place.

16:19 errors, traces, replays, logs, dots connected.

16:22 You can see what's led to the issue without digging through five different dashboards.

16:27 Seer, Sentry's AI debugging agent, builds on this data, taking the full context,

16:32 explaining why the issue happened, pointing to the code responsible, drafts a fix,

16:37 and even flags if your PR is about to introduce a new problem.

16:41 The workflow stays simple.

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:19 our code talkpython26, all one word talkpython26 to get $100 in credits.

17:26 Thank you to Sentry for supporting the show.

17:29 Cool.

17:29 That's a super interesting philosophy to say you should be able to take, even take

17:33 stuff out of what we're giving you by default, right?

17:35 Now, before we move on from sort of introducing Datastar, I do want to point out at data-star.dev,

17:42 which of course I'll link this notes, there's some cool examples on here.

17:45 You've got a really nice space 2001 sort of theme with Hal and all that, which is great.

17:53 I like the aesthetic here, which is very fun.

17:56 It's got a little bit of a retro gaming feel, which is nice.

18:00 But what I want to point out is I want to encourage people to go watch your little video.

18:03 Your video is fun.

18:05 It's really fun.

18:06 This video is all about how Datastar fits in the world of SPAs.

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.

18:51 I'd also like to, if you can scroll back up to the top of the page, the Starfield animation was

18:57 one of the things like when Delaney and when everybody who worked on this published it,

19:02 Like I didn't realize how amazing this was because if you like right click and inspect that thing,

19:07 it's a web component.

19:09 And so all the JavaScript that's required for making all the stars go faster and slower

19:13 and tracking your mouse where, you know, wherever you do it,

19:16 it's all within that web component.

19:18 And data star is essentially subscribing to like, where's the mouse pointer

19:22 and passing it into the web component.

19:24 Yeah, in fact, if you go to more examples, you will see that there's,

19:29 and then go scroll down to, or use the hamburger thing.

19:32 Yeah, go down to the rocket.

19:35 There's the actual star field.

19:38 So you can see the entire, the star field, the entire component is there.

19:41 So if you scroll down from there, you'll see how it actually gets hooked up

19:45 and the entire component, that's the whole thing, it's right there.

19:48 - That's incredible.

19:49 - And the thing is if you start moving around, like if you scroll up just a little bit more,

19:52 so you can see the sliders, you'll see that they're live, everything's,

19:56 if you move it around, like you move your mouse around the canvas,

19:59 you'll see everything's live editing, everything's thing.

20:02 It's the irony of Datastar.

20:03 And this is the part that I don't think people quite get.

20:06 And it's not that you're trying to like, we love what Carson has done with HCMS.

20:10 We love that all the things they've done, but it does not do everything.

20:13 It doesn't do enough.

20:14 It is a library, not a framework.

20:15 And the thing is, the irony is that Datastar actually has

20:18 the fastest reactive signal, like reactive signals.

20:22 We are the fastest thing out there.

20:23 So it's not just like we did something that's kind of like VDOM,

20:26 or we are like, we can compete with React.

20:28 We demolish them with actual numbers.

20:30 So we have the fastest morphing strategy and we also have the fastest signals, which means doing these kinds of things.

20:35 It's just a non-issue.

20:36 Like this star field thing is 1K.

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:04 Let's talk through some of the core examples.

21:06 I feel like there's some similarities to the example section of the HTMX place.

21:11 But, you know, HTMX doesn't have a star field, certainly.

21:14 Best place to start is on the homepage.

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:26 but it is a good maybe starting point for some people.

21:29 We have a hello world example there, if you could find that.

21:32 Yeah, let's scroll down just a little bit more.

21:33 Yeah, you got it.

21:34 One of the maybe differences between HTMX and Datastar is that Datastar can receive HTML responses,

21:41 but it also by default, or the recommendation is to use server sent events.

21:46 So if you hit start there, you're going to see kind of the network response tab,

21:50 and those are server sent events.

21:51 And SSE server sent events are an old technology that work just over HTTP.

21:57 And essentially what happens is that the server holds a connection open to the browser

22:02 and it's unidirectional.

22:03 So you send a request to the server and then the server can stream events back down,

22:08 which is what you're seeing here.

22:10 Now, this is obviously a trivial example, right?

22:12 We're sending one, or we're updating the message one character at a time.

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:29 All the chatbots are streaming the responses back to you.

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.

22:43 And Delaney kind of tapped into that and said, well, because I also always thought, well, if I want pure reactivity or true reactivity,

22:50 I need two-way communication.

22:53 So I need web sockets.

22:53 You need web sockets.

22:54 You need binary and all that kind of stuff.

22:56 Yeah.

22:57 Yeah.

22:57 There's problems with those, which we can get into.

23:00 SSE is much simpler.

23:01 It works over HTTP 1, 2, and 3.

23:05 And as you can see, it's just plain text.

23:06 There is no complicated handshake.

23:08 If you change the interval to zero and hit start, you're going to see a different type of response, which is,

23:16 and I don't know if you saw the content type change, but content type now is text HTML.

23:20 Oh, intro.

23:20 Oh, interesting.

23:21 Yeah.

23:22 So this is what HTMLX would do by default.

23:24 You send back HTML responses, whereas here the content type

23:28 is text event stream.

23:30 And this allows you to hold that connection open for as long as you want.

23:34 It can be open and closed, or it can stay open until the words

23:39 hello world have been spelled out.

23:41 Or you can keep it open indefinitely.

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.

23:57 MARK MANDEL: Yeah.

23:58 And one of the things that--

24:00 well, when I looked at Datastar, I'm like, OK, there's some interesting aspects here.

24:05 And we'll get into them, how you can set up--

24:08 when I click the Start button, it might replace a piece of the page-- hey, that sounds familiar--

24:13 with HTML, not through JavaScript, right?

24:15 but it didn't specify anywhere what part of the page to replace or not.

24:21 Like, how does it know?

24:22 And so with Datastar, you lean more on the server for many things,

24:28 including deciding what part of the page that the server created in the first place to update.

24:32 I really like that.

24:33 I think that that's super neat.

24:35 It lets you not just have sort of closer to one source of truth,

24:39 but also just you can pass down multiple things.

24:43 is like, we need to update this pane on the right, this text, and this element all in one response.

24:50 There's a lot of interesting aspects to what you're talking about here.

24:54 JOHN MCWHORTER: Anyone who's familiar with out-of-band swaps

24:56 in HTMX, well, guess what?

24:59 Datastar is out-of-band by default.

25:01 So it's matching currently based on the ID.

25:04 So you see h3 id equals message.

25:07 And every event that's coming back has an ID of message.

25:10 But guess what?

25:11 you can use any ID you want, right?

25:13 So you can use actually any CSS selector you want.

25:16 But yes, we put the onus more on the backend because that is where we believe state should live

25:23 or that's the source of truth for state.

25:27 And you send and you work with state on the front end only when and where it makes sense to,

25:33 which is more the web component aspect.

25:35 And I'll caveat what Ben said there in that like state mostly lives in the backend.

25:40 And that's the problem is that like state lives where it lives.

25:43 Like if the user is actively able to move their mouse cursor,

25:46 they own that state of the mouse cursor.

25:48 You don't own that, but most of the state from your database should be in the backend.

25:52 The one thing that's interesting about the SSE compared to how most people

25:56 think this stuff, I will say I fell into this trap too, right?

25:59 Cause I did the live view crazy stuff is that your job as a web developer is to

26:03 get strings to the browser as efficiently, as fast as possible.

26:06 Cause like the browser is going to deal with that, that into html and all that there's nothing faster than giving it html right so the thing that i i

26:14 know i lost for a long time is that sse i thought oh it's this big string thing how is that better

26:20 than binary but the irony is that because it's so regular because there's already things like

26:25 compression built into the browser there's streaming things there's things that are so

26:28 much easier to do here in an efficient way that the irony is if you if you you don't have to care

26:33 about all these things but if you just follow our way of doing it your python app will be faster

26:38 than most people's like compiled, you know, like low level language thing

26:42 because you're getting orders of magnitude in the algorithms

26:44 and how we're doing stuff from the hood.

26:46 So I don't know if you're interested in like the deep down stuff

26:49 or just like how you use it as a Python developer.

26:51 But the irony is that you now have tapped into this.

26:53 It seems so simple.

26:54 You're like, oh, this is just a different text response.

26:56 How can this be orders of magnitude faster?

26:58 Like, again, I don't know how much you want to get into the weeds of that

27:01 compared to just it's fun to use, right?

27:03 Yeah, I really like the philosophy of having so much of it controlled by the server.

27:08 It just felt disheartening.

27:10 It's like, okay, so what you're going to do is you're just going to create some JSON responses

27:14 on your server, and then everything is some crazy build series of steps

27:19 to end up with, I don't know, Vue or React or something on the front end.

27:23 And there's just so much power and flexibility to write really cool server code.

27:29 But, you know, like a lot of the trends have been, yeah, that's kind of just there to support the rest of it,

27:34 you know, and so I don't know, this really appeals to me.

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...

27:54 So you do need to format this, but we essentially have all of these SDKs, including Python, you'll

28:01 see there. And the Python SDK is actually, I would say, one of the most intricate ones we have.

28:07 Spatuel King, he's a member of the community, or Chase, I believe is his first name, his real first

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,

28:24 because all they do is they take a function, a patch elements or patch signals function,

28:30 and you just dump in the HTML that you want swapped into the DOM or the signals you want

28:34 output on the page and it just does the formatting for you so so it's really just there's three

28:39 functions i think in total that every sdk has to implement and it's such a time saver you know um

28:45 i doved into service and events a lot with htmx and when you get the syntax wrong it is so painful

28:52 to debug because pretty much can't it just doesn't work you know or whatever it's harder to debug and

28:58 so to have the helper syntax it's just a dream well and also just so people are aware i like

29:04 because I was originally going to try, the irony is I was trying to get server sent events

29:08 like their plugin up to snuff like years ago.

29:11 Like I would highly recommend not using SSE with HTMLX

29:14 because the problem is that the entire model of how you build things is very poll based

29:18 and it's built out of band.

29:19 It's like a weird concept, like the idea of updating,

29:22 like it is not built with that in mind.

29:24 So I know that they're trying to move towards that in the future,

29:26 but the whole way that you interact with it is based on polling.

29:30 And the thing about our way is that not only are you doing push events,

29:33 But the thing is that really does change the semantics of the language.

29:36 So first of all, you get like 40X compression by doing our way.

29:40 But also you only send data when you need to instead of polling.

29:43 So now you're using less resources.

29:45 You're using less network.

29:46 It changes the whole dynamic in a deeper way that you can literally save 5,000X in your network bandwidth.

29:54 It sounds crazy, but it's just a reality.

29:57 Right.

29:57 Another thing, Delaney, that's really nice about that is the latency.

30:00 That's something that drives me crazy about polling.

30:03 general is just like okay well we don't want to hammer the server too hard so let's make this you

30:09 know one second two second but then it's like well i click this button and then it updates and you're

30:13 like ah if if something happens on the server it's sent right if it wants to one of the things that

30:18 ironically because i do a lot of like go or low level language stuff is that i tend to put a debounce

30:23 in my server to like five milliseconds so that i get i'm not updating more than you know 200 times

30:30 a second even on a monitor because the browser actually break after 500 fps so like the

30:36 interesting thing is not that it's basically data starts no longer the issue in your thing if you

30:40 are on a low low powered battery device like a mobile on a 3g this is it will just work like it's

30:47 stuff that you just don't have to worry about so it does change the semantics of how you build things

30:52 just so that you're aware because even things like for example built into the htmx they don't do

30:57 automatic exponential back off.

30:59 It doesn't have all the verbs.

31:01 There's caveats there that I would recommend not doing it, honestly, if you're going to do it.

31:05 It's crazy that you're talking about going below the monitor refresh rate.

31:09 You're not going to see it. This is only 120 hertz.

31:13 120 times a second.

31:15 So why would you pull faster than that? That's wild.

31:20 This portion of Talk Python To Me is brought to you by us.

31:23 I'm thrilled to announce a brand new app built for developers

31:26 created by yours truly.

31:28 It's called Command Book.

31:30 You know that thing you do every morning?

31:32 Open up six terminal tabs, CD into this directory,

31:35 activate that virtual environment, run the server with --reload.

31:38 Now, CD somewhere else, start the background worker,

31:41 another tab for Docker, another one to tail production logs.

31:44 Every tab just says Python, Python, Python, Docker tail.

31:48 And you're clicking through them going, which Python was that again?

31:51 Where my app is running?

31:52 Then sometime later, your dev server silently dies

31:55 because it tried to reload while you're in the middle of a code edit,

31:59 unmatched brace, a half-written import, or something.

32:02 Now you're hunting through tabs to figure out which process crashed

32:05 and how to restart it.

32:06 My app, CommandBook, gives all of these long-running commands a permanent home.

32:11 You save a command once, the working directory, the environment,

32:14 free commands like git pull, and from then on, you just click run.

32:18 You can even group commands together to start and stop everything

32:21 for a project with a single click.

32:23 It also has what I call Honey Badger Mode, auto restart on crash.

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:35 It also detects URLs from your output, so you're never scrolling through thousands of lines of logs

32:39 just to figure out how to reopen your web app.

32:42 And it shows you uptime, memory usage, and all sorts of cool things about your process.

32:46 The whole thing is a native macOS app.

32:49 No electron, no Chromium, just 21 megs.

32:51 And it comes with a full CLI.

32:53 So anything you've configured in the UI, you can fire off from your terminal with just a single command.

32:58 Right now it's macOS only, but if there's enough interest,

33:02 I'll build a Windows version too.

33:03 So let me know.

33:05 Please check it out at talkpython.fm/command book app,

33:09 download it for free, level up your developer workflow.

33:12 The link is in your podcast player show notes.

33:14 That's talkpython.fm/command book.

33:16 I really hope you enjoy this new app that I built.

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 OK.

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:44 You probably have to refresh the page just to.

33:46 Yeah.

33:47 And you're going to see updates.

33:49 That one there.

33:49 Yeah, if you click that--

33:51 This one?

33:52 Yeah, that's the one.

33:53 You click Event Stream.

33:54 There's an Event Stream tab for Event Stream responses.

33:57 You're going to see these streaming.

33:58 I don't know what frames per second we have this set to, but you see it streaming past, right?

34:03 Right.

34:03 The first time many people see this, this is a surprise that the browser is capable of this.

34:09 But the browser can stream video, so why can't it stream a bunch of text?

34:12 I mean, it's not that big of a leap of faith.

34:15 But you can see, it looks like it's about every 10, 20 milliseconds.

34:19 I think we're doing like 30 frames a second, but again, we can do like, we're doing this on a,

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

34:46 actually like the resources so you see the compression well yeah we're probably not seeing

34:51 it there but in the bottom you'll see two two megabytes have been transferred but 10 megabytes

34:55 of resources and so that's oh yeah yeah so it's a 5x compression yeah it's going to be much more

35:01 on the stream i think because it's streaming uh normally you can hover over the size

35:07 and you'll see the uncompressed but i guess it's changing too fast that's pretty wild and you know

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:40 useful thing, especially for status screens, dashboards, stuff like that.

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:10 because we just don't want people blasting the server.

36:12 Yeah, you don't want to walk away.

36:14 Yeah, but the point is that this is coming.

36:16 See, we're doing stuff in microseconds on a potato.

36:19 Yeah, let me just describe this a little bit for people listening.

36:22 So it's like a database monitoring table that shows you how many transactions are the database overloads.

36:29 So it's updating a grid of maybe 10 or 12 databases with five or six elements,

36:36 and it's doing that in microseconds, 80 times a second.

36:38 A lot of people see these examples and they think, well, I'm not building this kind of stuff.

36:43 And me included.

36:44 I build crud apps most of the time.

36:47 And there are plenty of examples here that are just cruddy things.

36:51 They're kind of the more boring examples.

36:53 But one example that might be worth looking at is the to-do MVC.

36:58 And if you can figure out how to open that in split screen.

37:01 Okay.

37:02 What part do you want me to open up in split?

37:04 Oh, just this, the example.

37:05 Yeah, so I can do these two and then I can tile them.

37:09 How's that?

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:27 You're going to basically be observing the latency on your network connection,

37:31 which is going to be 50 milliseconds to 100, but barely perceivable.

37:35 So just to describe to people, we've got this 2D MVC, which allows you to, well, it's like a

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

37:57 parallel, which is crazy. If you check a few of them, you'll see,

38:00 You can barely tell which one's updating which.

38:03 It happens almost instantly.

38:04 Yeah, if I look at the other one and I click on one, it feels like that's responding to my click.

38:10 I need to correct myself that it is happening instantly because when you click, when you check one of those,

38:15 it's not, and this is an interesting thing we can get into.

38:19 We're not doing optimistic updates.

38:21 It's actually sending a request to the server and the server is simultaneously updating

38:27 both of your tabs at the same time.

38:29 Even if I had just one open, it's still going round trip to the server.

38:33 That's why it looks like it's simultaneous because it's effectively.

38:35 This is a thing that you can, we can talk for like three hours

38:38 and I will yell at most spa developers because there's this weird thing

38:43 that because it's easy, people will actively lie to users in the spa world

38:47 and they'll do optimistic updates, which means I'm going to make it

38:50 so that I'm making this change.

38:52 And then if there's a problem, then fix it.

38:54 Whereas we say you should do indicator saying, I'm trying to make a change to this

38:58 and then fix it.

38:59 Because you don't want, like when you're playing a video game, you can do what's called dead

39:02 reckoning and you can do some stuff to net rollback code.

39:05 You can do some clever things to hide latency, but you don't want to hide latency when it

39:10 comes to like a bank transfer or did I buy that thing or did I get that theater ticket

39:14 or any of that stuff.

39:15 Like people just have the wrong mental model of how the web should work.

39:19 I'm actually going to send you another thing that this might blow your mind even more because

39:23 the three of us basically can play.

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:35 I don't know if you just put that in your...

39:37 Yeah, let me drop it over.

39:38 Hold on.

39:38 I'm going to put it in the other tab.

39:39 So right now, don't touch anything.

39:42 I'm going to actively start.

39:43 I am purple.

39:43 I am literally starting to click right now.

39:45 All right.

39:46 So we're looking at a multiplayer game of life here.

39:48 I'm seeing that live here.

39:50 And if you open up that in the other tab, you would actively see the exact same state.

39:54 So everyone in the world, like if you open that up in the other tab,

39:58 you cannot get out of sync.

40:00 It's not faking it in the front end.

40:01 This is literally sending in.

40:02 What's even crazier about this, here's the crazy part.

40:04 It's actually a rendering demo.

40:06 The guy who wrote it is writing in a scripting language, Clojure,

40:09 and he's sending down 2,500 divs per frame styled, inline styled.

40:14 Now go to your network tab now and look at what's actually,

40:17 like look at your network tab and you'll see how little data we're actually sending over.

40:21 even though he's updating 2,500 divs per frame, like if you go to wherever it's updated,

40:26 yeah, whichever one's the one that's updated, there you go, yeah.

40:29 So if you look here and look at how much is being sent

40:32 versus how many is actually, like try to, like, this is just a different paradigm

40:36 for how you build.

40:37 And the thing is, again, not everybody has to care about these low level things,

40:40 but the thing is, is that once you do this, the idea of CRUD kind of goes away

40:44 because in our opinion, you go to a multi, you make a multi-page app like you would normally do

40:49 in HTMX or anything else, but you keep an open stream

40:52 and you just update whatever's happening in your backend

40:54 as it's happening.

40:55 And it simplifies the world.

40:57 And what's also interesting is because of how we do compression and all that,

41:00 you just send your entire page.

41:01 You don't need like out of band.

41:03 It doesn't even really make sense because we're so fast that you can just,

41:06 you as a Python developer, you just give us your entire page

41:09 and let us deal with it.

41:10 And we will come up with the fast stuff.

41:12 So Chris should probably talk a lot more to that because the fat morpher stuff,

41:15 it's a fundamental change in how you build web apps, I think.

41:18 Yeah, yeah.

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:32 But for some reason, sometimes it just doesn't send every update.

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.

41:51 And it just makes things easier.

41:52 Yeah, it's amazing.

41:53 Sounds like a good opportunity to subscribe to database query changes.

41:57 I know some databases you can say, if this query updates, you know, trigger this event and then keep it flowing,

42:03 like straight from events on the database, straight to your front end.

42:06 Pretty cool.

42:07 I do want to go back and just put a little bit of commentary, Delaney.

42:12 Well, you said optimistic updates.

42:15 So one of the things that's really common in JavaScript is I click this thing, it changes.

42:20 I want to mark it as changed.

42:21 And then I'm going to tell the server, hey, we made this change.

42:25 It's very possible the server died, that you're not allowed to make that change or whatever.

42:29 And then you've got to come back and go actually undo that.

42:30 That really, you know, there's like a weird.

42:33 So what you're saying is you don't have to worry about that kind of stuff.

42:35 We're a framework, not just a library.

42:37 The idea is that you have these indicators that not only basically your indicators drive a signal.

42:41 Like, again, the details don't really matter.

42:43 But the idea is that you have instantaneous, like within the same frame updates of,

42:48 hey, I'm going off to do something.

42:50 Like usually you make a spinner or you say, I'm going to do this to gray out the field

42:53 or I'm going to do, like there's all kinds of things you can drive.

42:55 Because again, the state of what the local stuff is while the change is there, that lives in the client.

43:02 Like that is part of Datastar.

43:04 It has all the right tools to make it so that you can disable it or gray it out

43:08 or say, I'm going to put a spinner next to it.

43:10 Like you can do all those things.

43:11 But the thing is you're not lying to your user.

43:13 That's my whole thing.

43:14 And people say, well, that's not really a lie.

43:15 It's like, yes, it is.

43:16 You're literally lying to people.

43:18 Like, please stop.

43:18 It's a DX issue.

43:20 The reason why people do it is because it's convenient, not because it's correct.

43:24 And again, like you can do optimistic updates.

43:26 You can do SBA-like things using Datastar.

43:29 We don't recommend it because Datastar is more than just this tech.

43:34 It's also like a way of doing things.

43:37 What I wanted to point out here is that you might imagine that, you know, this is something that when you click edit,

43:43 it turns it into a form.

43:44 So you might like load the form into the page, hide the form,

43:47 and then just do a show hide approach.

43:49 But the hypermedia approach is kind of like the REST approach

43:53 where you can only take the next action at any given time.

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:04 And what comes back is that form.

44:07 So it's real time as in like what you're seeing now is the actual state reflected on the backend.

44:13 And when you save, you're also going to see the same thing.

44:16 You're going to see a network request to the server and it gets the true current state

44:22 as it has been saved is now all comes back down.

44:24 So it's like you don't even need optimistic updates most of the time.

44:28 And when you do use it, it's because you're trying to cover up poor performance.

44:33 You're favoring perceived performance over true performance.

44:37 One of the things I hear a lot is people saying, but it's so much slower.

44:41 But I think people are used to or think it's much slower than it is

44:45 because the web, the spa life that we see around us feels so slow.

44:51 But anytime I've seen people try to lean into just using the network,

44:55 it's so much faster than you expect.

44:57 Well, and also you have so much less our way.

45:00 Your usage of network can be easily 100x less, which means you have less contention,

45:04 which means when you do send something, it's there immediately.

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:29 Another example that we like to bring up a lot is there was a while back, someone did a million

45:33 checkbox demo and they had a whole write-up on it, right? And they basically had to take it down

45:38 because it was just too expensive to run.

45:39 We have a version that's not just checkboxes, but color checkboxes.

45:43 So you can actually make ASCII art and stuff like that.

45:45 And it's a billion.

45:46 And it runs on the same server that was running that Game of Life demo.

45:49 It's on the same server.

45:50 It's actively, and it's been on top of Hacker News.

45:52 It's a $5 VPS as far as I know.

45:54 Yeah, it's a $5 one.

45:56 It runs all these demos all the time, active, top of Hacker News,

45:59 and it's never gone down.

46:01 What's really interesting about that demo is that it becomes a backend optimization challenge, right?

46:07 You're no longer trying to optimize the front end.

46:09 You rely on the browser and the browser API to take care of that for you.

46:14 And now you're doing, I don't know, you're optimizing your database.

46:17 You're optimizing your queries.

46:20 I actually threw the link to that in there.

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.

46:31 So you can scroll anywhere on the board.

46:33 And it's like a 30,000 by 30,000 something grid because the square root of a billion

46:39 is some weird number, as it turns out.

46:42 And obviously this is, or not obviously, but this is multiplayer.

46:45 So if I was to view this or you were to open a different browser tab,

46:49 then you would see the exact same thing.

46:51 The board is the same everywhere.

46:52 That is crazy.

46:54 The one thing that I will say that's hard, I don't know, Chris can really probably speak to this more

46:58 and it sounds like a weird thing, Like, Datastar ends up in reality being like five or six things on your page, and it just

47:05 gets out of the way.

47:06 All of a sudden, like, most Datastar, you're going to get to a point where you try it,

47:09 and you're like, that's it?

47:10 Like, you will feel weird about every other approach once you really try it.

47:14 Like, just try it, and you will see every other approach is wrong.

47:18 Like, it's not because I made it.

47:20 Like, I wish someone would have made this because it just, it's so simple.

47:23 It feels like cheating in a weird way.

47:26 That's hard to explain.

47:27 it really it's a weird like i don't know what we all were doing i was part of the problem like right

47:31 like i was like oh well google and everyone facebook and all the other guys have this figured

47:36 out like this has to be the best approach so that's the weird thing is it's so simple i don't know what

47:41 like crystal probably it sounds like i'm selling it but it's just i don't know it's weird it's so

47:45 exciting it's so amazing and yet it's it's using all these boring technologies and like yeah like

47:50 i remember i showed my wife this my status board and she's like oh yeah that looks really cool and

47:55 I'm like, oh yeah, because you don't understand what everything is going on behind it, you know?

47:59 Yeah, exactly.

48:00 It's like, it used to be so complicated.

48:03 So let's do, we got a little bit of time left.

48:05 Let's do this.

48:06 I think it might be fun to talk through kind of some of the attributes and what it looks like,

48:13 kind of program with this a little bit and then what it looks like on the server.

48:15 How's that sound?

48:16 Would it make sense?

48:17 Like there's a good example of a kind of a meta framework for Python called Stario,

48:21 which they just got their V2.

48:23 Okay.

48:23 Just launched.

48:24 I don't know if that is a more Python-esque way of doing it.

48:27 It depends on how you want to.

48:28 Let's start with some of the Datastar attributes, and then we could talk about that.

48:32 How's that sound?

48:33 Like, just, you know, what does it look like to say to,

48:36 you know, I want to connect a button to Datastar actions

48:41 on the back end or wired up and so on?

48:43 We've talked about a lot about, you know, the back end driving the front end through patching elements,

48:48 which is kind of the lower half of what you're looking at.

48:51 To access that, you need to have a click listener or some sort of event listener to trigger that.

48:58 And datastar, as the name suggests, uses data-star or asterisk attributes.

49:05 So these are part of the HTML spec data set.

49:09 And we just leverage that.

49:10 And we have a small grammar that you'd find on the reference page with all of the data-attributes.

49:19 And data on is just registering an event listener on the current element.

49:23 So data on colon click is just obviously registering a click event handler on the button.

49:30 And what's happening is that then Datasar also gives you actions.

49:34 So that at get is an action to send a get request to the server.

49:38 You pass in the path, which is slash endpoint there.

49:42 And then the server takes care of the rest.

49:44 So what you're seeing is a div underneath with an ID.

49:48 IDs are obviously unique in HTML, so they're ideal.

49:51 And Datastar just uses that fact.

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:10 I'm sorry, it morphs.

50:11 So it uses a morphing strategy.

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:30 But in this case, it's more of a fine grained thing.

50:34 So only that div is going to get swapped out.

50:36 And the reason why that morph matters is because you, since you aren't replacing it, things like

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:29 that you would send down.

51:31 But if you look at the next one where we have a Python example,

51:35 you would see like, well, how do you do that in Python

51:38 without actually writing, you know, the raw format out?

51:41 And that's how you would do it there using the Python SDK.

51:44 Let's dive in a little bit to the SDK itself.

51:48 So I got so many things open.

51:51 Hold on.

51:52 We got another link for you.

51:53 No, I'm kidding.

51:54 You know what?

51:55 I'm just going to go.

51:55 I'm going from the homepage.

51:56 There we go.

51:57 There you go.

51:57 Chris, maybe you could talk us through this.

51:59 I think before I throw it to you, though, yeah, there's a lot of framework support here.

52:03 So if you're a Django person, a FastAPI person, even fast HTML, it's interesting,

52:08 LightSar, Quartz, SanEck, or Starlet.

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 trying to remember.

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:22 I'm trying to remember which tool.

52:24 This is a Quartz.

52:25 Yeah, the Quartz is the examples in Quartz.

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:34 Right. And then that.

52:35 This could be a Ginget or Chameleon or whatever template.

52:38 Like it's just whatever. It doesn't matter.

52:39 But somehow they get it. Yeah.

52:40 Makes the example easier to see in one go.

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:54 See what comes from that.

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:16 And so that's another helper that essentially says when I have a request coming in,

53:21 data star has a specific way of sending the state of the front end to the back end.

53:25 So the back end can do whatever it needs.

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:35 In some ways, the Alpine JS kind of, I don't want to say equivalent,

53:39 but it covers similar functionality.

53:41 And so if you have data on the front end that the backend would like to know,

53:45 that's an easy way to get it.

53:47 And then essentially what happens is we get into this loop, this while true loop,

53:51 and Datastar will just start sending down server sent events in text

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:07 And then we wait, we sleep for a second, or is it a second?

54:11 I guess it's a microsecond.

54:12 I keep forgetting which one.

54:13 Yeah, that's a millisecond.

54:14 No, no, it's second.

54:15 And sleep is seconds.

54:16 Sleep is seconds.

54:17 It takes a float.

54:18 So once it sleeps, it sends another server sign event.

54:21 With this time, it's instead of sending the HTML down, we're sending a signal.

54:27 So essentially changing, say, you can say, like the JavaScript value or script data

54:31 onto the front of the page.

54:32 Right, right.

54:33 So it's showing that you can send the HTML and let Datastar patch it, or you can basically

54:38 from the server set one of these signal things that will be reactive on the front end, right?

54:43 Yeah.

54:43 You said it much better than I did.

54:45 Thanks.

54:45 It's a long way of saying it's a clock, right?

54:48 Yeah.

54:48 Also the thing, just for people that aren't used to thinking about this way, especially

54:51 if you're doing Python, like all a signal is, is instead of saying that here's, I'm

54:56 setting a variable, you're saying I'm setting a relationship that says like, kind of like

55:00 in an Excel document when you set a formula for a cell,

55:04 it's the same idea.

55:04 You're setting up a relationship saying, when this thing and this thing changes, update this.

55:08 And it does smart things to do that efficiently.

55:10 But the idea is it's a relationship.

55:12 It's declarative.

55:13 So kind of like with SQL, you think of SQL as a declarative language, right?

55:17 You don't care how it creates an index.

55:19 You just say, create index.

55:20 Same thing happens here.

55:21 You just say, hey, I want when this thing changes, this other thing to change.

55:25 And the problem is that declarativeness is not built into JavaScript.

55:28 It's not built into the browser, but we just made the web a little bit more declarative.

55:32 That's all we did, basically.

55:33 Right.

55:34 Declarative is generally pretty good.

55:36 It's a good way to work.

55:37 It keeps things simple and lets the underlying system have at it.

55:40 So a couple of things, well, we still got a little bit of time,

55:44 but to wrap things up a little bit.

55:46 Editors.

55:47 I think having good editor support is really important for adoption.

55:52 You know, drives me crazy when I go and try to work with JavaScript, CSS,

55:56 attributes or whatever, and I'm like, they're not here.

55:59 No help.

56:00 So you all have nice extensions and plugins for common editors Python people might use, right?

56:06 Yeah, we have VS Code, which you're seeing here, and PHP Storm.

56:12 Or sorry, I use PHP Storm, but all JetBrains editors.

56:16 PHP Storm, PyToram, WebStorm, all of them things.

56:19 So it's in the JetBrains marketplace, so it'll work for, I believe, all JetBrains IDEs.

56:25 I believe so.

56:25 You also have the AI editors covered.

56:28 Do we?

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:37 That explains why people requested this from me.

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.

56:50 That's not a complaint.

56:51 I mean, it's a Microsoft product.

56:53 They built it.

56:54 They don't have to build all the other ones.

56:56 But that's why they're here, right?

56:57 We keep those up to date.

56:58 We do those ourselves, the SDKs.

57:01 I mean, Delaney wrote the Go one, I wrote the PHP one, and the rest are just community contributions.

57:07 We've had contributions to these too, to the IDE extensions.

57:11 We maintain these primarily.

57:13 Yeah, and these are great.

57:14 These just, you know, save on typing, but more importantly, save on making typos.

57:20 You know, they show you all of the available data attributes.

57:23 Maybe Chris can speak more to is that the irony is, though,

57:26 you won't need that many tags to actually do your work.

57:29 So it's not like a tailwind thing where you're like,

57:31 oh, I rely on it to autocomplete.

57:33 It's just...

57:33 Yeah, absolutely.

57:34 In fact, it's one of those things where I discover more things I can do with Datastar

57:38 because as I'm typing data dash and I'm like, oh, I didn't actually remember

57:42 that there's a attribute to do whatever it is.

57:45 I don't remember.

57:46 Like, I can't remember at this point.

57:48 And then I went to the documentation like, oh, check this out.

57:50 This is so much more I can do.

57:52 But yeah, I find I love the plugin, but I find I don't use it too much

57:55 just because I'm not writing as much HTML with it.

57:58 While I'm sitting here on this open VSX registry, do you all have advice for making Datastar work well

58:05 with Identic AI and Claude Code, Cursor, et cetera?

58:08 There's some active research going on like in Oslo at a college

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:28 And what they found, we've gone back and forth a bit, is that almost all of them are completely

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

58:43 use the spec correctly and to say, here's all the sorts of data star, go use it to build websites,

58:49 it will fall over almost in every regard.

58:51 So it's one of those things where you don't need that much,

58:54 but it will ironically show you how bad things like Clawed and Codex and stuff

58:59 are at just using the current context to solve things.

59:03 Hopefully that gets better, but we have something around,

59:05 like we have a slash docs page that you can feed into your LLM,

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:15 So you're better off, like if you want to use, if you want to make better size,

59:19 you want to be fast and efficient and all that stuff,

59:21 we're 100% the right thing to do.

59:22 If you just want to like one shot something, go use React and stay in that world.

59:26 You want to vibe code it?

59:28 Hey, I've got something.

59:29 I feel like this might resonate with you, Delaney, especially the way you just described it.

59:34 Have you all seen the Kai Lintit Senior Engineer Tries Vibe Coding?

59:39 This is an amazing video.

59:41 And like half of the video is like, no, no, no, not in being installed.

59:46 What are you doing?

59:47 It reminds me very much of like, it's just like, nope, that's not what I told you to do.

59:52 I know that's what you think the most common thing is, please stop.

59:54 Yeah.

59:55 And the thing is that it's not that I actually like a lot of the stuff, but I treat it as

59:58 an autocomplete or like it can write code faster than I can when it comes to like, hey, change

01:00:03 this in 27 different places.

01:00:05 And I forget which files I did it like.

01:00:06 There's value to it, but people are trying to use it to learn.

01:00:10 It's a complete, it actively is working against you.

01:00:13 Ben has done an amazing job with the guide.

01:00:15 Like, please, like, it's fine to use the LLMs to help, like, guide your process and to, like,

01:00:20 knock stuff out quickly once you have a baseline.

01:00:22 But you have to know when to say no.

01:00:24 And he has done it.

01:00:25 The guide takes half an hour, less than a half, like, probably 15, 20 minutes to read

01:00:29 and then, like, an hour to actually work through.

01:00:32 Please try it first before you try to throw it at the LLMs.

01:00:35 It's not because I hate them.

01:00:37 It's more that they are just overfit to the, like, the sea of badly written SPA code.

01:00:42 That's, unfortunately, that's the situation we're in.

01:00:45 Yeah, especially with JavaScript, the agentic AI is very trained.

01:00:49 It wants what it wants.

01:00:51 All right.

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:00:59 I'll let you all give a shout out to pro.

01:01:02 I know you have a really strong sales pitch here.

01:01:04 You were talking about earlier.

01:01:06 Now, what is this data, Datastar Pro?

01:01:08 It's been about a year since we released the beta one of Datastar.

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:30 And I think like Python has done a great job with that and Go as well.

01:01:36 And like there are some ecosystems where you just don't make breaking changes.

01:01:39 That's the norm. And that's what we want to be.

01:01:41 And the JavaScript ecosystem is, you know, the antithesis to that.

01:01:45 They're like, here, hold my beer.

01:01:47 I'll show you breaking changes.

01:01:48 Yeah.

01:01:48 Have you heard of LeftPad?

01:01:49 To give you an idea of how far we take that, we don't have npm.

01:01:53 Like we don't actually even submit to npm.

01:01:55 We have no package.json in our JavaScript framework.

01:01:59 We actually, like, there's none of that stuff.

01:02:02 It does not exist in our ecosystem.

01:02:03 So we take it very seriously when we say it's funny to have a JavaScript framework that

01:02:07 actively hates the JavaScript ecosystem.

01:02:09 And you guys, I think also it's worth pointing out that you don't have a strong build step,

01:02:14 tree shaking, web packing story, right?

01:02:17 You just dropped-

01:02:17 No, we do.

01:02:18 The thing is that, like for example, beat is kind of the well-known way to do this stuff.

01:02:25 But guess what?

01:02:25 Under the hood, it uses ES build.

01:02:27 And ES build is a go thing.

01:02:29 We build a lot of our stuff in go.

01:02:30 So it's literally embedded in our, like we just use the ES build directly.

01:02:33 We don't need 20,000 things from npm.

01:02:36 We just use the go tools inside of our binary because that's the fast thing to do.

01:02:40 So we don't need all of that.

01:02:41 So we have no dependencies, nothing, and we don't even use npm or any of that at all.

01:02:46 Yeah, so the reason I mentioned the beta is during the beta phase, which lasted about six months,

01:02:51 we, Datastar gained a lot of traction, a lot of interest, and people had a lot of requests.

01:02:56 And we were like, yeah, we see, and because it's plugin-based,

01:03:00 you can always just add another plugin.

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:15 Like I said, it should do everything you need, but nothing you don't.

01:03:18 So how do we do that while adding plugins?

01:03:21 So during that beta phase, we started thinking about, well, do we have multiple versions of Datastar?

01:03:26 Do we have a marketplace of plugins?

01:03:28 Or how do we manage that?

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:10 So we have a long-term vision.

01:04:12 How do we make that sustainable when we're both busy people anyway, and this just takes

01:04:18 so much of our time and the project appears to be growing?

01:04:22 So at that point, we decided, well, how do we want to even run this?

01:04:25 So we decided we don't want to found some company and do VC like we're, if anything,

01:04:31 anti-VC funding.

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:04:58 We'll put those into Datastar Pro, and that can kind of grow over time.

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:11 And so that's what we tell people.

01:05:12 Most people don't 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:26 Yeah, that was, I think, a good decision.

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:35 They still exist in the repo if anybody needs them.

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:53 And if we need to travel to conferences, which we've yet to do.

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:06 But the V1 thing.

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:14 And I think it's fair.

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:21 One of the things that we talked about, and people get very angry about this, but for example,

01:06:26 Rocket is a web component layer that you basically just write Datastar in a declarative way,

01:06:31 and it dynamically generates web components for you on the fly.

01:06:34 And it's a great way to build web components.

01:06:36 It'll save you tons of hours.

01:06:38 And people won't pay for features.

01:06:39 They pay for convenience.

01:06:40 So the thing is, people said, well, I want you to generate out the content and make that

01:06:46 open and available.

01:06:46 And we said no, because basically the way we look at it is that almost like Pico 8,

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:01 It's a paid thing.

01:07:02 And the reason why is if it becomes successful, if we do our job and we make it so it's easy for everybody,

01:07:07 the Star Federation will do better over time.

01:07:10 Whereas Tailwind's model of they're competing against every other person in that space,

01:07:15 whereas it just does not work.

01:07:16 So our thing is if we do get successful and we do get more people,

01:07:20 then it's self-sustaining as in you paid for this little engine

01:07:24 and now you get all the ecosystem around it of open source.

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:32 Otherwise it will fail in the modern world.

01:07:34 Let's close this thing out with two super quick things

01:07:37 because I know we're over time.

01:07:38 Roadmap.

01:07:39 Ben, you talked about taking your sweet time to 1.0.

01:07:42 Is there a forward-looking roadmap?

01:07:44 Are you guys done or what are things?

01:07:46 The release counted RC1, I think it was about six months ago.

01:07:51 and like the release has just been slowing down, slowing down.

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:00 At this point, like the switch from release candidate to stable

01:08:05 is just literally like just, you know, dropping the RC.

01:08:09 There's no like features that are going into it.

01:08:11 There's no big changes.

01:08:13 We're taking our time because like I said, it's easy to put something up slightly prematurely

01:08:18 and get some defaults wrong.

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:27 So we're trying to avoid a situation like that.

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:05 I don't like to give timelines.

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:22 In fact, we recommend people rename the RC and they change the name to React-Foo

01:09:28 so that they just drop it in their React projects because the entire framework is smaller than most components.

01:09:34 Just start hiding it places.

01:09:36 Yeah, don't even name it Datastar.

01:09:38 A stealth takeover of the spa world.

01:09:41 Awesome. I love it.

01:09:42 All right, let's wrap up the show with a final call to action

01:09:46 for people who want to use Datastar, learn more, get started.

01:09:50 Chris, I'll let you go first so Ben and Delaney can have the final word.

01:09:54 The first thing I was thinking of is because I get asked so much about

01:09:59 how long it takes to connect to the server and things like that,

01:10:03 there is a portion in the DjangoCon talk I gave in, I think it was 2023,

01:10:08 where I showed a video of five phones, five Android phones, trying to do the same thing,

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:30 straight to that portion of the talk because it is like that video reminded me like, this is what

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:43 enables me to use real-time interactions with way less complexity than I ever thought

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:05 Cool. Thanks, Ben.

01:11:06 I also gave a conference talk last year.

01:11:08 There's a recording, so I'll send you the link to that, which really walks through my journey of Datastar

01:11:13 and how Datastar has truly opened my eyes to what's possible.

01:11:18 I feel like I talk a lot about how Datastar is a journey of unlearning

01:11:23 old and bad patterns, deeply rooted ones in what I think web development is.

01:11:29 And these days, as I mentioned, I never would have thought that I'd be developing in Go,

01:11:35 but I see like all like the, like I think even Python

01:11:39 is getting better concurrency support, right?

01:11:41 So I think you talked about that recently, Michael, here.

01:11:44 So now I'm seeing with Datastar, I can do so much more on the backend.

01:11:49 I can be so much more creative on the backend and that's what interests me.

01:11:53 So it's just fun.

01:11:55 What can I say?

01:11:56 It's fun.

01:11:57 I'm still really jealous of that presentation too.

01:11:59 Well done with it.

01:12:00 Yeah, certainly send me the link.

01:12:01 I'll put it in the show notes and well done.

01:12:03 Delaney.

01:12:04 The irony is that like, I don't consider myself a web dev at all.

01:12:07 It just happens to be something I do a little bit of.

01:12:09 The thing that is the, when I first started making this public, I was like, Hey, I think

01:12:14 I'm onto something like someone proved me wrong.

01:12:16 I was, I'm a little bit more like kind of, I always say like in the jujitsu world type

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:12:27 Right.

01:12:27 So I want there to be an active, like someone proved me wrong.

01:12:31 And I'm at the point now where I feel so confident.

01:12:34 I will put money on it.

01:12:35 I've tried going out to people out in the dev Twitter and all that.

01:12:38 I guarantee you, and I'm happy to put money up on this,

01:12:41 if you could do it the Datastar way, whether you're using React or HTMLX or any other approach,

01:12:46 it will be less code.

01:12:47 It'll be faster.

01:12:48 It'll be cheaper.

01:12:49 And it'll be simpler to understand.

01:12:52 I will take up anybody anywhere on that thing.

01:12:55 Basically, it's not a boast.

01:12:56 It's just the facts on the table.

01:12:59 And it's a paradigm shift that I want the world to know about

01:13:02 just so that people understand, hey, there's going to be someone

01:13:05 that comes up with something better than I did, right?

01:13:06 Like I'm standing, the reason why we have the fastest signal library in the world

01:13:10 is because we listen to the people that are really good at that.

01:13:12 We use alien signals.

01:13:13 The reason why we have the fastest morphing library is that we listen to people and said,

01:13:16 hey, there's people that care about this stuff and are working towards it.

01:13:20 It's not that there's anything special here.

01:13:22 It's that it's trying to build an ecosystem of like people that care about performance

01:13:25 and people care about the details.

01:13:27 And if you do that, then everything gets better.

01:13:30 So it's not just where are we at now, but if anyone thinks they can do better,