- Hi, I'm Jeremy Howan. - Hi, I'm Jonath. - Hi, I'm Nate. - We wanted to give you a quick introduction here to FastHTML. Have a look at some of these things that we made. - So this first example is a chatbot that I made to interact with ChatGDT.

You may need to try out a styling library for these beautiful looking chat bubbles. And this is the entire source code. There's no other components to it. - And this is an app that I made based off of Conway's GamerLife that allows multiple users to be able to play the game of life.

And the backend, it uses WebSockets. And as you can see, the code is quite small. - Here's my little demo. It's maybe the most uninteresting one in some ways, but I like it 'cause it's an example of like everything. It's markdown, it's drag and drop. It's a complete custom login system.

And that entire thing also fits onto a single screen of code written from scratch. - Other people are making cool stuff with this as well. If you know a bit of web programming already, you'll get started real fast. Legendary author and web programmer, Daniel Roy-Greenfield, said he would like to give it a try.

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." There's lots of great ways to create web applications nowadays. Data scientists in particular love these rapid dashboarding apps like Radio and Streamlet. 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.

Lots of people have created lots of fantastic web applications in Django. For example, Instagram is written in Django. But it's pretty complicated. This is the getting started, setting up a new project example in less than five minutes. One great way to write web apps is with something like FastAPI on the backend and something like React or Svelte or Vue on the front end.

You can create nice, sophisticated apps with this, but there's a lot to learn, particularly if you don't know JavaScript or TypeScript already, and then you've got a few other things to learn about as well. I've been writing web applications for years. I created the framework that FastMail is built on.

I started it over 25 years ago now. It's had millions of users. A lot of what I learned from that is now built into this. And ever since then, I've been looking for better and better ways to create web frameworks and to create web applications. I have hundreds of thousands of views of my tutorials on Flask, AngularJS, C#, and so forth.

With FastHTML, this is by far the most excited I've ever been about web programming. I think it makes it so much easier, and I can't wait to see what you can do with it. So we're gonna show you how to get started with building that to-do web application to create this source code that you see here.

- Okay, so Jeremy, where's the rest of this? Can you show us how to create the scaffolding and templates that go along with this app? - There is no create scaffolding. There is no create FastHTML app. You just start typing into a window. That's all you need, one Python file.

- Wait, what about the front-end JavaScript code? - There is no front-end JavaScript code. You just type into one Python file. Let's start typing the Python file right now. Jono, take it away. - Fantastic. Okay, so we're in a single Python file, and the app here is going to define some different routes that we can hit.

So you could have different routes for different pages, for example. And here we're displaying some code and running the app. This has got something like live reloading switched on by default, so you can see all the changes that you make in real time. So whenever we're building an app, we want to be able to show some content, but we don't have to type the HTML ourselves.

We use templates. And so FastHTML has all of these built-in tags that we can use to construct the HTML programmatically in Python. Here we're creating a to-do list, which is the list of multiple items, and we're seeing if we can display that component. So we have this idea of nested components starting to merge here.

We can create these with Python list comprehensions and so on, and start to build up the UI. So let's add a form that lets us specify new to-dos. And then we need a way for these UI elements to interact with the app. 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.

We trigger an event, send a message to our server, and then we're going to have a new route that responds to that, in this case, post request, asking us to add a new to-do. HTMX also lets you, doesn't refresh the whole page, it just updates specific parts of it, so that's why we have the to-do list section here.

And we're adding to the end of it any new to-dos that are added by that button. - All right, so let's add some persistency to this app. So you can use any sort of database, but already built into FastHTML is SQLite. So 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 private primary key.

We can update our TD list to go ahead and go through all of the to-dos in our database. If we refresh that, we can see that it gets returned, but it doesn't get added to the database, so let's go ahead and insert that. Now, as you can see, it's getting added.

We don't really render the returned post request, HTML, so let's go ahead and add a little rendering function that makes it a little bit prettier. We can make this for loop comprehension a little bit nicer, and as you can see, now we have a very beautiful rendering of the to-dos.

- So from here, really, it's just about adding all the features you've won. You've actually, we've shown you all the key concepts you need to know. You know that you can use any HTML tag, but you can now create them as Python functions. You can compose them together to create component libraries for other people to use.

You can use any CSS frameworks or Web Component frameworks you like. So here, let's go ahead and add a delete link as well. So when we click on the delete link, it's gonna call delete on the server. So we create a function called delete and just go to dos.delete.

We'll delete the ID that we're being passed, and now we've got delete tags. There they are. They're done. You can add anything from the entirety of the foundations of the web. So for example, you could add authentication by taking advantage of basic auth in your web browser. So now we've got an authenticated web app.

We can add a logout by using your browser's logout functionality. So all of the functionality of the web is here for you to use. All of the components that exist, all of the web frameworks that exist, all of the CSS libraries that exist, they're now for you. And you can deploy it with a single line of code and within a minute or so, it's done.

- So we've all been having a ton of fun writing examples. Do go check out our docs. We're gonna keep adding more and more examples and documentation as we go. And I think you'll be able to get something there that you can get started with, and we're really looking forward to seeing what you build.

(upbeat music)