start,end,text,speaker,start_sec,chapter
490,1850," Hi, I'm Jeremy Howen.",Jeremy Howard,0,Introduction
2570,3550," Hi, I'm Jonath.",Jeremy Howard,3,
4090,4830," Hi, I'm Nate.",Jeremy Howard,4,
5590,8370, We wanted to give you a quick introduction here to FastHTML.,Jeremy Howard,6,
8590,10190, Have a look at some of these things that we made.,Jeremy Howard,9,
10990,15850, So this first example is a chatbot that I made to interact with ChatGPT.,Johno,11,Chatbot Example
15970,20190, You may need to try out a styling library for these beautiful looking chat bubbles.,Johno,16,
20710,23810," And this is the entire source code, there's no other components to it.",Johno,21,
24990,34890, And this is an app that I made based off of Conway's Game of Life that allows multiple users to be able to play the game of life.,Nate,25,Game of Life Example
35110,37930," And the backend, it uses WebSockets.",Nate,35,
38390,40870," And as you can see, the code is quite small.",Nate,38,
42050,42910, Here's my little demo.,Jeremy Howard,42,Markdown Example
43050,47910," It's maybe the most uninteresting one in some ways, but I like it because it's an example of like everything.",Jeremy Howard,43,
48150,53230," It's markdown, it's drag and drop, it's a complete custom login system.",Jeremy Howard,48,
54490,59090, And that entire thing also fits onto a single screen of code written from scratch.,Jeremy Howard,54,
59830,61810, Other people are making cool stuff with this as well.,Jeremy Howard,60,
62170,65370," If you know a bit of web programming already, you'll get started real fast.",Jeremy Howard,62,
66170,71070, Legendary author and web programmer Daniel Roy-Greenfield said he would like to give it a try.,Jeremy Howard,66,
71550,77390," And within 45 minutes of starting out with FastHTML, he sent me a screenshot and said, look, I've just created a complete blog system.",Jeremy Howard,72,
78310,81290, There's lots of great ways to create web applications nowadays.,Jeremy Howard,78,FastHTML vs Other Frameworks
81850,88670, Data scientists in particular love these rapid dashboarding apps like Radio and Streamlet.,Jeremy Howard,82,
89350,101170," What we've heard though, and we found ourselves, is that when you're ready to go to the next level beyond your dashboard or proof of concept, things like this require rewriting from scratch in a totally different framework and learning a whole lot of new skills.",Jeremy Howard,89,
102690,106730, Lots of people have created lots of fantastic web applications in Django.,Jeremy Howard,103,Django Example
107030,108970," For example, Instagram is written in Django.",Jeremy Howard,107,
110010,111930, But it's pretty complicated.,Jeremy Howard,110,
112310,116870, This is the getting started setting up a new project example in less than five minutes.,Jeremy Howard,112,
117850,125970, One great way to write web apps is with something like FastAPI on the back end and something like React or Svelte or Vue on the front end.,Jeremy Howard,118,"FastAPI, React, Svelte, Vue Example"
126650,129590, You can create nice sophisticated apps with this.,Jeremy Howard,127,
130190,136290," But there's a lot to learn, particularly if you don't know JavaScript or TypeScript already.",Jeremy Howard,130,
136290,139630, And then you've got a few other things to learn about as well.,Jeremy Howard,136,FastHTML Advantages
140030,142330, I've been writing web applications for years.,Jeremy Howard,140,
142530,146090, I created the framework that FastMail is built on.,Jeremy Howard,143,
146230,148790, I started it over 25 years ago now.,Jeremy Howard,146,
149070,150330, It's had millions of users.,Jeremy Howard,149,
150890,153490, A lot of what I learned from that is now built into this.,Jeremy Howard,151,
154090,159070," And ever since then, I've been looking for better and better ways to create web frameworks and to create web applications.",Jeremy Howard,154,
159790,166950," I have hundreds of thousands of views of my tutorials on Flask, AngularJS, C Sharp, and so forth.",Jeremy Howard,160,
167190,172710," With FastHTML, this is by far the most excited I've ever been about web programming.",Jeremy Howard,167,
173150,175390, I think it makes it so much easier.,Jeremy Howard,173,
175610,178350, And I can't wait to see what you can do with it.,Jeremy Howard,176,
179050,186570, So we're going to show you how to get started with building that to-do web application to create this source code that you see here.,Jeremy Howard,179,
187930,189310," Okay, so Jeremy, where's the rest of this?",Johno,188,Building the To-Do App
189390,192590, Can you show us how to create the scaffolding and templates that go along with this app?,Johno,189,
193550,195050, There is no create scaffolding.,Jeremy Howard,194,
195150,196830, There is no create FastHTML app.,Jeremy Howard,195,
197210,198810, You just start typing into a window.,Jeremy Howard,197,
199170,199830, That's all you need.,Jeremy Howard,199,
199950,200750, One Python file.,Jeremy Howard,200,
201890,205250," Wait, what about the front-end JavaScript code?",Nate,202,
205810,207610, There is no front-end JavaScript code.,Jeremy Howard,206,
207750,209750, You just type into one Python file.,Jeremy Howard,208,
210510,212890, Let's start typing the Python file right now.,Jeremy Howard,211,
213010,214270," Jono, take it away.",Jeremy Howard,213,
215270,215770, Fantastic.,Johno,215,Single Python File
216030,217570," Okay, so we're in a single Python file.",Johno,216,
218250,221730, And the app here is going to define some different routes that we can hit.,Johno,218,
221730,224850," So you could have different routes for different pages, for example.",Johno,222,
225470,228250, And here we're displaying some code and running the app.,Johno,225,
228650,231730, This has got something like live reloading switched on by default.,Johno,229,
231790,233930, So you can see all the changes that you make in real time.,Johno,232,
234930,237410," So whenever we're building an app, we want to be able to show some content.",Johno,235,Templates and Components
237930,239770, But we don't have to type the HTML ourselves.,Johno,238,
239850,240390, We use templates.,Johno,240,
241010,246710, And FastHTML has all of these built-in tags that we can use to construct the HTML programmatically in Python.,Johno,241,
247350,250670," Here we're creating a to-do list, which is the list of multiple items.",Johno,247,
250670,253030, And we're seeing if we can display that component.,Johno,251,
253790,257110, So we have this idea of nested components starting to merge here.,Johno,254,
257570,260350, We can create these with Python list comprehensions and so on.,Johno,258,
260870,262330, And start to build up the UI.,Johno,261,
263010,265990, So let's add a form that lets us specify new to-dos.,Johno,263,UI Elements Interaction
266490,269550, And then we need a way for these UI elements to interact with the app.,Johno,266,
269610,275490," So rather than going to whole new pages, what we're going to do here is do something called htmx, which plays really nicely with FastHTML.",Johno,270,
275830,278190," We trigger an event, send a message to our server.",Johno,276,
278730,284090," And then we're going to have a new route that responds to that, in this case, postRequest, asking us to add a new to-do.",Johno,279,
286290,288670, htmx also doesn't refresh the whole page.,Johno,286,
288690,290010, It just updates specific parts of it.,Johno,289,
290110,292490, So that's why we have the to-do list section here.,Johno,290,
292750,296410, And we're adding to the end of it any new to-dos that are added by that button.,Johno,293,
299440,299760, All right.,Nate,299,Persistency and SQLite
299780,302180, So let's add some persistency to this app.,Nate,300,
302320,305320, So you can use any sort of database.,Nate,302,
305640,309620, But already built into FastHTML is SQLite.,Nate,306,
309620,320060," In our fast app, we can set where our database is going to be stored and some of the fields, as well as which one's going to be the primary key.",Nate,310,
320700,326940, We can update our td list to go ahead and go through all of the to-dos in our database.,Nate,321,
327520,333520," If we refresh that, we can see that it gets returned, but it doesn't get added to the database.",Nate,328,
333720,335600, So let's go ahead and insert that.,Nate,334,
335860,337840," Now, as you can see, it's getting added.",Nate,336,
337840,343880, But we don't really render the returned post request HTML.,Nate,338,
344180,348020, So let's go ahead and add a little rendering function that makes it a little bit prettier.,Nate,344,
348320,352100, We can make this for loop comprehension a little bit nicer.,Nate,348,
352660,358800," And as you can see, now we have a very beautiful rendering of the to-dos.",Nate,353,
359900,363020," So from here, really, it's just about adding all the features you've won.",Jeremy Howard,360,Adding Features
363100,366040," You've actually, we've shown you all the key concepts you need to know.",Jeremy Howard,363,
366040,370880," You know that you can use any HTML tag, but you can now create them as Python functions.",Jeremy Howard,366,
371220,375060, You can compose them together to create component libraries for other people to use.,Jeremy Howard,371,
375340,379420, You can use any CSS frameworks or Webcam frameworks you like.,Jeremy Howard,375,
379880,382040," So here, let's go ahead and add a delete link as well.",Jeremy Howard,380,
382460,385900," So when we click on the delete link, it's going to call delete on the server.",Jeremy Howard,382,
386140,392720, So we create a function called delete and just go to dos.delete. We'll delete the id that we're being passed.,Jeremy Howard,386,
393200,394600, And now we've got delete tags.,Jeremy Howard,393,
394780,395240, There they are.,Jeremy Howard,395,
395340,395860, They're done.,Jeremy Howard,395,
396660,400400, You can add anything from the entirety of the foundations of the web.,Jeremy Howard,397,
400720,407520," So for example, you could add authentication by taking advantage of basic auth in your web browser.",Jeremy Howard,401,Authentication and Logout
407900,409940, So now we've got an authenticated web app.,Jeremy Howard,408,
410400,413580, We can add a logout by using your browser's logout functionality.,Jeremy Howard,410,
414220,418520, So all of the functionality of the web is here for you to use.,Jeremy Howard,414,
418680,425400," All of the components that exist, all of the web framework that exists, all of the CSS libraries that exist.",Jeremy Howard,419,
425400,426600, They're now for you.,Jeremy Howard,425,
427200,429920, And you can deploy it with a single line of code.,Jeremy Howard,427,Deployment
430640,433280," And within a minute or so, it's done.",Jeremy Howard,431,
433940,436300, So we've all been having a ton of fun writing examples.,Johno,434,Conclusion and Call to Action
436900,438000, And do go check out our docs.,Johno,437,
438040,440720, We're going to keep adding more and more examples and documentation as we go.,Johno,438,
441100,444240, And I think you'll be able to get something there that you can get started with.,Johno,441,
444560,446320, And we're really looking forward to seeing what you build.,Johno,445,