@@nerdg2 it'd be interesting to see if this takes off in a big way. I've had full stack roles before where I had to learn a huge amount of front end technologies just to change some simple things on a website. Despite wanting to build web apps I got so fed up with it that I looked for a way out. Moved to backend with python and later to sysadmin. Running away from the front end and screaming. :P HTMX and FastHTML makes me interested in web dev again.
@@DavidBerglund 100% agreed, its like you read my mind. I had to learn tons of new bs just to throw them away after a tiny version update, AngularJS gave me ptsd lol. Svelte was the only sane framework i got to use. I think HTMX coupled with alpinejs should do wonders, i mean whats wrong with VanillaJS, ES6 & ES7 does wonders. I'm about to go full FastAPI and FastHTML on my new startup, i'm a 1000% commited now.
I'm not a Python developer, but I love this. I'll be crucified for saying this, but It takes me back 25 years to a time when we streamed HTML from our Java servlets, and JavaScript was something the kids used for scrolling text and popping up banners 🙂. Then, before we knew it, the kids replaced the View in MVC with another nested MVC with its own entire ecosystem, and we "full stack" devs were relegated to the back end.
Wow, I sound like a bitter boomer, but I'm not. It's just refreshing to see a simpler alternative to the complexity that is synonymous with front-end development.
@@michaelnurse9089 "never doubt yourself" is terrible advice 😂 But yes, modern front end dev is amazingly complex and this approach looks very interesting for python devs.
Tip: if you get "Internal Server Error" around 31:43 when loading the Todos page, delete todos.db and try again. If that still happens, check carefully which parameters you passed into Todo(). Unlike Titled() which accepts a string by itself as the first argument, Todo() here requires the "title=" named keyword argument.
Watching closely, the error was introduced when inserting without record id and primary key with the id. Once that is corrected, the insertion will work.
Finally things look simple and clear for how to use Python for authoring HTMX based apps. Very nicely explained with all the responses, local updates, out of band updates etc. On the other hand - I am getting sick from optimization on number of lines of code (one liners for def, if; star imports), breaking PEP8.
@@howardjeremyp Quoting Wikipedia: "A hobgoblin is a household spirit ... once considered helpful, but which since the spread of Christianity has often been considered mischievous." Regarding PEP8, I am still in the earlier stage and consider it helpful. Thanks for your work anyway - it strongly simplifies HTMX templating in very creative way and this is helpful too.
I love this, thank you for making this. I hate HTML, CSS, JavaScript, and mostly familiar with Python and C#. I'm glad I can now finally (hopefully) use Python to make a website. I believe there might be a way to even use the 'fastHTML' page to call on some Django-made pages or other logic, right? Would be awesome to get some more in-depth tech documentation.
This is extremely good. I’m: reliving the “building a blog in 15 minutes” moment I had many years ago when Rails was presented. But Jeremy is much more charismatic than DHH.
This is really cool! Finally python is paying off. But one concern is that I went to the deployed app from this tutorial and tried using it. The app seemed very slow for a simple to-do list app. It was taking a moment to add or delete new todo. Makes me worry about how slow bigger projects would be.
hey jeremy, this is an amazing idea and I can see it going to be a great way of Development in future. Do we have comparisons on response time of FastHTML with others like react?
No I haven't done anything like that, because it varies so much based on what you do and how you do it. But for most apps, latency of both react and fasthtml should be low enough to be a non-issue for users.
The default styling options are probably minimal. You can always insert JS elements and so have access to near infinite styling options if that is what you need. Most viewers don't care for fancy styling.
looks great!! I am new to all this, I have learend python for data analysis and also learned fastAPI for backend, can I use it for frontend with fastAPI to create a full stack app?
Well, that's a great overview. Thank you so much!! We use DRF to create rest APIs using Django. And FastAPI to create rest APIs too that can be consumed by any frontend/client for that matter. What's up with this one? Can we do that stuff? If so or not, can you please make a walkthru in that perspective? Or is this like plain-old standalone Django with just templates that serve only HTML with no rest APIs?
It's neither of those things -- it's something new! You can do the same stuff that you do with DRF/FastAPI with a js frontend, but you don't need to write any js frontend. There's about a dozen examples and walkthrus in the repo so take a look.
Curious to learn how this compares to Sameul Colvin's FastUI - similar name and you both seem to be aiming for a similar developer experience of writing low boilerplate web apps purely in Python and you both mention being FastAPI/htmx inspired.
Yes, it's more scalable in fact, since you can use the full power of python to refactor. Also the actual size of the html partials sent over the wire are often more compact than json APIs, and the browser has far less work to do -- there isn't a "hydration" process.
In order to have wider adoption of this wonderful library, we need to solid documentation so that people can take it from day one. For now, i am just struggling for get hand on
Great question! It's because the `Todo` type annotation is there. So FastHTML tries to create an object of that type using the named items in the form.
Would progressive web app features work with this such as SPA to provide navigation without reloads and access to device features on mobile such as offline storage on device with indexedDB or WebSQL on device?
I have been thinking about this idea for quite a while. A very huge first step. Thanks. However we need a neater approach to code interactive web with Python. I would focus on interactivity, component based architecture, existing styling frameworks and browser-Python compatiblity first rather than database and backend. Well done. Wish you best of luck. I'm looking forward for the day where I will use Python for my entire web app with fair confidence.
Does it make sense to use FastHTML as pure frontend that calls an API backend created with FastAPI? I see that here FastHTML is kind of doing both frontend and backend.
No it doesn't - FastHTML is designed for hypermedia applications, which is the design we recommend most people use for most projects. If you want to split out the API and deal with the complexity of that approach, then you should use something designed for that.
Maybe, you don't know! Div and other components are classes and it is a convention in python that all classes name must start with a capital letter. Functions and other variables may be in lowercase but classes must be capitalised. This is a convention and it is not compulsory to adhere to it. However, FastHTML follows this convention which improves the understanding of the project structure by python developers.
This bugged me as well. htpy is a package that generates HTML and it uses lowercase. I like how it looks but I'm not sure how complete it is or limiting etc
my hx_swap_oob="true" becomes hx-swap:oob="true" when rendered to HTML. And because of that issue the Input field is not cleared. Does anyone know how to solve this issue?
Really cool idea. I think with more work and simplified commands could be great. Right now, it's probably good for pythons devs for small projects but not something I'd expect to see in many production sites. Code seems just as complex as righting out the html. Especially with all the tools available now. Html5 is super simple.
@@howardjeremyp thanks looking for something robust to build a full scale production app with the flexibility of css js and html for the frontend and robust flask app for back end applications
@@frag_itthen you're surely not going to pick this brand new shiny thing. Go with Flask/Django/FastAPI+Templates and HTMX. Proven tech. I'm saying this being genuinely excited about FastHTML
@@frag_itmaybe don't jump on a new shiny web framework for a new production app when you can use a more mature framework like Flask or Django with HTMX if you like. I'm excited for the future of this project though. But then again, if this framework let's you build and test and iterate on your ideas quickly. Why not!
Side question: As a beginner, what do I need to learn to contribute to this project? I know python and web development. Still I didn't learn git and other things.
I am sorry but this is a rehash of the past, trying to abstract away the web (HTML & JavaScript) with a programming logic failed many years ago and here we are again.
Wow I’ve waited decades for something like this in python . This is huge
Web dev using Python is not new, theres Python Reflex (which used to be Pynecone) and NiceGUI, Taipy, Streamlit but great to see this new entrant too.
I have no regrets, learning python finally is about to pay off! I'm a javascript developer and i had enough! Thank you
@@nerdg2 it'd be interesting to see if this takes off in a big way. I've had full stack roles before where I had to learn a huge amount of front end technologies just to change some simple things on a website. Despite wanting to build web apps I got so fed up with it that I looked for a way out. Moved to backend with python and later to sysadmin. Running away from the front end and screaming. :P HTMX and FastHTML makes me interested in web dev again.
@@DavidBerglund 100% agreed, its like you read my mind. I had to learn tons of new bs just to throw them away after a tiny version update, AngularJS gave me ptsd lol. Svelte was the only sane framework i got to use.
I think HTMX coupled with alpinejs should do wonders, i mean whats wrong with VanillaJS, ES6 & ES7 does wonders.
I'm about to go full FastAPI and FastHTML on my new startup, i'm a 1000% commited now.
@@nerdg2 sounds that it could be a fun place to work :) Good luck!
I'm always excited everytime you introduce something new Jeremy. Appreciate you.
Awesome work! Perfect for prototyping and more fast fun projects!
I'm not a Python developer, but I love this. I'll be crucified for saying this, but It takes me back 25 years to a time when we streamed HTML from our Java servlets, and JavaScript was something the kids used for scrolling text and popping up banners 🙂. Then, before we knew it, the kids replaced the View in MVC with another nested MVC with its own entire ecosystem, and we "full stack" devs were relegated to the back end.
Wow, I sound like a bitter boomer, but I'm not. It's just refreshing to see a simpler alternative to the complexity that is synonymous with front-end development.
@@andreroodt4647 Nah. You sound fine. Never doubt yourself.
@@michaelnurse9089 "never doubt yourself" is terrible advice 😂 But yes, modern front end dev is amazingly complex and this approach looks very interesting for python devs.
I've been hoping that someone built an abstraction on top of HTMX
great 👍
Tip: if you get "Internal Server Error" around 31:43 when loading the Todos page, delete todos.db and try again. If that still happens, check carefully which parameters you passed into Todo(). Unlike Titled() which accepts a string by itself as the first argument, Todo() here requires the "title=" named keyword argument.
Thanks. Deleted todos.db and re-ran. Fixed.
Watching closely, the error was introduced when inserting without record id and primary key with the id. Once that is corrected, the insertion will work.
*Wow! Amazing work!* 🤩 As a heavy Streamlit user, this looks very interesting and promising. I gotta try it out!
I know you
For someone like me who hates JavaScript with passion, this is soooo beautiful👌🏾
Server side dynamic web pages with a single file. Now I see why you were challenging the status quo a few months back!
This is good for python community who want to get started with web development using python.
Omg, this is perfection and exactly what I needed! Thanks so much Jeremy & co. Long time fan btw ❤
This is game changer for prototyping FAST!
Thanks for posting this, Jeremy. It's a refreshing way to build web apps.
Excellent idea and contribution to the python world! 😊
Finally things look simple and clear for how to use Python for authoring HTMX based apps. Very nicely explained with all the responses, local updates, out of band updates etc.
On the other hand - I am getting sick from optimization on number of lines of code (one liners for def, if; star imports), breaking PEP8.
Actual quote from PEP8: "A Foolish Consistency is the Hobgoblin of Little Minds".
@@howardjeremyp Quoting Wikipedia: "A hobgoblin is a household spirit ... once considered helpful, but which since the spread of Christianity has often been considered mischievous." Regarding PEP8, I am still in the earlier stage and consider it helpful.
Thanks for your work anyway - it strongly simplifies HTMX templating in very creative way and this is helpful too.
This is wonderful, thank you Jeremy!
Nice Jeremy! Lovely tutorial for a lovely framework
I love this, thank you for making this. I hate HTML, CSS, JavaScript, and mostly familiar with Python and C#. I'm glad I can now finally (hopefully) use Python to make a website. I believe there might be a way to even use the 'fastHTML' page to call on some Django-made pages or other logic, right? Would be awesome to get some more in-depth tech documentation.
This is extremely good. I’m: reliving the “building a blog in 15 minutes” moment I had many years ago when Rails was presented. But Jeremy is much more charismatic than DHH.
This is really cool! Finally python is paying off. But one concern is that I went to the deployed app from this tutorial and tried using it. The app seemed very slow for a simple to-do list app. It was taking a moment to add or delete new todo. Makes me worry about how slow bigger projects would be.
super finally we can prototype application quickly for machine learning Algorithm
Very cool! The only thing I am not a fan of is this oob swap at the end, seems like clearing the input should not require returning anything
hey jeremy, this is an amazing idea and I can see it going to be a great way of Development in future. Do we have comparisons on response time of FastHTML with others like react?
No I haven't done anything like that, because it varies so much based on what you do and how you do it. But for most apps, latency of both react and fasthtml should be low enough to be a non-issue for users.
I love this a lot! I am wondering how much customization there is in fastHTML. Do you mind going over some more advanced styling, and/or transitions?
The default styling options are probably minimal. You can always insert JS elements and so have access to near infinite styling options if that is what you need. Most viewers don't care for fancy styling.
Finally Python has done some remarkable.
Would love to see some kind of bigger reference project with a complex data model, a lot of components, various customisations etc.
github.com/AnswerDotAI/fasthtml/blob/main/examples/adv_app.py
I'm in thought like this thing (frontend in django is not efficient ) , here comes FASTHtml , that's great
You are using Cursor with its Copilot++, right? Any review?
Looking forward to getting into it!
is there support for things like templates?
I kind of still like the separation it brings to the table
big fan of htmx though
Fantastic work. Huge thx!
Well I recently learned MERN myself. As a new developer, should I learn this? Because it seems so interesting.
looks great!!
I am new to all this, I have learend python for data analysis and also learned fastAPI for backend, can I use it for frontend with fastAPI to create a full stack app?
You can use FastHTML for both frontend and backend to create a full stack app :D
Does railway have any tools to manage the SQLite database? Backups, etc?
25:20 you said you can make the page respond to scrolling or moving the slider. How would you do that?
Amazing stuff!
How would one load Google Maps into a here?
it woud be nice if can use this with fastapi, a python framewor
Well, that's a great overview. Thank you so much!! We use DRF to create rest APIs using Django. And FastAPI to create rest APIs too that can be consumed by any frontend/client for that matter. What's up with this one? Can we do that stuff? If so or not, can you please make a walkthru in that perspective? Or is this like plain-old standalone Django with just templates that serve only HTML with no rest APIs?
It's neither of those things -- it's something new! You can do the same stuff that you do with DRF/FastAPI with a js frontend, but you don't need to write any js frontend. There's about a dozen examples and walkthrus in the repo so take a look.
@@howardjeremyp Oh god. That's a Triple BAM!!! Lovely one. Will take a look. So indebted for this to you Jeremy❣
Holy Moly, your webcam is amazing! What are you using?
I'm using an iPhone 14.
Curious to learn how this compares to Sameul Colvin's FastUI - similar name and you both seem to be aiming for a similar developer experience of writing low boilerplate web apps purely in Python and you both mention being FastAPI/htmx inspired.
FastUI is great, but uses a totally different approach. Try both and see what you like best!
hey how to get input from user?
Input("Name",id="username")
is the way it's passing back objects to app through a tuple really scalable? not sure how this works out beyond toy demos
Yes, it's more scalable in fact, since you can use the full power of python to refactor. Also the actual size of the html partials sent over the wire are often more compact than json APIs, and the browser has far less work to do -- there isn't a "hydration" process.
Hi Jeremy, thanks for sharing this. I love it. I try to follow your video but I couldn’t find the todos.db. could you share it? Thanks.
It's auto-generated when you run the app.
In order to have wider adoption of this wonderful library, we need to solid documentation so that people can take it from day one. For now, i am just struggling for get hand on
Amazing!
hey jeremy how did the html app know to create a Todo item when filling out the form?
Great question! It's because the `Todo` type annotation is there. So FastHTML tries to create an object of that type using the named items in the form.
@@howardjeremyp thanks!
thank you Jeremy
Would progressive web app features work with this such as SPA to provide navigation without reloads and access to device features on mobile such as offline storage on device with indexedDB or WebSQL on device?
It appears that link in the description mistakenly includes the trailing closed parenthesis.
Thanks! Fixed now. I always make that mistake...
What is the hotkey Jeremy uses to jump from a function to its code? 28:04
Hold down cmd or ctrl and click the name.
that's just ctrl+click
Do you know what he's using at 20:59?
@@howardjeremyp thank you 🫶...from FastAI to FastHTML I'll be there
thanks jeremy
Like Gradio, can we run FastHTML in Google Colab without using ngrok?
Not to my knowledge -- or at least I haven't seen that done yet. Gradio has some nifty tricks to make that work that we don't have in FastHTML!
@@howardjeremyp Okay, by the way, FastHTML is great. Even if you only know Python, you can still create websites or web apps with it 🔥
can this fastHTML mix with tailwind css ??
Yup for sure. That FastHTML home page uses tailwind, for instance.
Awesome.
I have been thinking about this idea for quite a while. A very huge first step. Thanks.
However we need a neater approach to code interactive web with Python. I would focus on interactivity, component based architecture, existing styling frameworks and browser-Python compatiblity first rather than database and backend.
Well done. Wish you best of luck. I'm looking forward for the day where I will use Python for my entire web app with fair confidence.
Cool thing Jeremy :)
the ) does not escape in the link in the description :D
hey guys. i'm an accountant and a python hobbist. are there any resources on the internet on how I can contribute to this project?
Cool!
Does it make sense to use FastHTML as pure frontend that calls an API backend created with FastAPI?
I see that here FastHTML is kind of doing both frontend and backend.
No it doesn't - FastHTML is designed for hypermedia applications, which is the design we recommend most people use for most projects. If you want to split out the API and deal with the complexity of that approach, then you should use something designed for that.
Very cool
Thanks Jeremy
This is dooe !!
I love it but wouldn't it be better to make Div, A, P etc. lowercase since Python is mostly written in lowercase and HTML also is lowercase?
Maybe, you don't know!
Div and other components are classes and it is a convention in python that all classes name must start with a capital letter.
Functions and other variables may be in lowercase but classes must be capitalised.
This is a convention and it is not compulsory to adhere to it. However, FastHTML follows this convention which improves the understanding of the project structure by python developers.
This bugged me as well. htpy is a package that generates HTML and it uses lowercase. I like how it looks but I'm not sure how complete it is or limiting etc
my
hx_swap_oob="true"
becomes
hx-swap:oob="true"
when rendered to HTML. And because of that issue the Input field is not cleared. Does anyone know how to solve this issue?
Solved it be passing the attribute as Input(**{'hx-swap-oob': 'true'}). But if anyone could point why this happened, it will a lot.
@@omlachake2551 without your suggestion, the input box would not clear and the input field was being returned to the end of the list.
Really cool idea. I think with more work and simplified commands could be great. Right now, it's probably good for pythons devs for small projects but not something I'd expect to see in many production sites. Code seems just as complex as righting out the html. Especially with all the tools available now. Html5 is super simple.
very nice
Does this replace flask ?
It can do, yes -- whether it's better than flask for your particular needs is something you'll need to try to find out though.
@@howardjeremyp thanks looking for something robust to build a full scale production app with the flexibility of css js and html for the frontend and robust flask app for back end applications
@@frag_itthen you're surely not going to pick this brand new shiny thing. Go with Flask/Django/FastAPI+Templates and HTMX. Proven tech. I'm saying this being genuinely excited about FastHTML
@@frag_itmaybe don't jump on a new shiny web framework for a new production app when you can use a more mature framework like Flask or Django with HTMX if you like. I'm excited for the future of this project though. But then again, if this framework let's you build and test and iterate on your ideas quickly. Why not!
@@DavidBerglund yes that’s true flask works well but as uy said good for further iteration
prediction: we may have AI frontend generators that use fasthtml to do the job.
like a better 'figma to code'
Had same idea!
This is insane...
Its tooo hard😮
Awesome, tutorial, How to 1) incorporate Login 2) integrate with a react component? Thanks
5k views in 21hrs 😮
Link includes the right ) FYI
Lol was about the write the same.
Move FastHTML and break stuff 😤
Side question: As a beginner, what do I need to learn to contribute to this project? I know python and web development. Still I didn't learn git and other things.
Are u using mojo to run it ?
mojo is a new programming language for performant parallel applications running on gpus, it's not related to webdev.
@@eitanporat9892 thank you, it's more clear now
Calc!
Too bad it’s in py
I am sorry but this is a rehash of the past, trying to abstract away the web (HTML & JavaScript) with a programming logic failed many years ago and here we are again.