Intro to FastHTML
[Jeremy Howen]
Introduction
Hi, I’m Jeremy Howen. 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.
[Jonath]
Chatbot Example
So this first example is a chatbot that I made to interact with ChatGPT. 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.
[Nate]
Game of Life Example
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. And the backend, it uses WebSockets. And as you can see, the code is quite small.
[Jeremy Howen]
Markdown, Drag and Drop, Login System Example
Here’s my little demo. It’s maybe the most uninteresting one in some ways, but I like it because 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.
FastHTML Adoption
Other people are making cool stuff with this as well.
[00:01:02]
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.
Rapid Dashboarding Apps
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.
Rewriting from Scratch
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.
FastAPI, React, Svelte, Vue
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.
[00:02:06]
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.
Learning Curve
And then you’ve got a few other things to learn about as well.
Jeremy’s Experience
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 Sharp, and so forth. With FastHTML, this is by far the most excited I’ve ever been about web programming.
FastHTML Excitement
I think it makes it so much easier. And I can’t wait to see what you can do with it. 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.
[00:03:07]
[Jonath]
Scaffolding and Templates
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?
[Jeremy Howen]
Single Python File
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.
[Nate]
Front-end JavaScript Code
Wait, what about the front-end JavaScript code?
[Jeremy Howen]
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.
[Jonath]
Defining Routes
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.
Live Reloading
So whenever we’re building an app, we want to be able to show some content.
Templates
But we don’t have to type the HTML ourselves. We use templates.
[00:04:01]
And FastHTML has all of these built-in tags that we can use to construct the HTML programmatically in Python.
To-do List Component
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.
UI Elements Interaction
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.
htmx Integration
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, postRequest, asking us to add a new to-do. htmx also 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.
[Nate]
Persistency
All right. So let’s add some persistency to this app.
[00:05:02]
So you can use any sort of database.
SQLite Integration
But already built into FastHTML is SQLite. 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. 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. But 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.
[Jeremy Howen]
Adding Features
So from here, really, it’s just about adding all the features you’ve won.
[00:06:03]
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 Webcam frameworks you like. So here, let’s go ahead and add a delete link as well.
Delete Functionality
So when we click on the delete link, it’s going to 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.
Authentication
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.
Web 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 framework that exists, all of the CSS libraries that exist.
[00:07:05]
They’re now for you.
Deployment
And you can deploy it with a single line of code. And within a minute or so, it’s done.
[Jonath]
Examples and Documentation
So we’ve all been having a ton of fun writing examples. And do go check out our docs. We’re going to 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.