FastUI & Pydantic - Build Interactive UIs with Declarative Python code

In this video, we'll see how to use FastUI - a new package in Python for building interactive UIs without writing JavaScript, and which integrates nicely with Pydantic and FastAPI (and other Python web frameworks)
FastUI is a project released by the creator of Pydantic, and as such is very nicely tied together with Pydantic model classes and functionality.
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugb...
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/po...
👾 Github: github.com/bug...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
FastUI: github.com/pyd...
FastUI Demo: fastui-demo.on...
python-multipart: github.com/and...
#python #webdevelopment #fastapi #pydantic

[@jefralston]

More videos on this framework please. You do a fantastic job in all of your videos. I love the way you explain things line by line.

[@bugbytes3923]

Got it - will have a think about what to do next. Thanks!

[@themarksmith]

@@bugbytes3923 Would love to see this working in Django with templates/postgres based data- excellent video as always!

[@mattmarshall1834]

This was a great tutorial. You have a great presentation style. I had never heard of this UI framework until I randomly saw it here on your profile. Please do more with FastUI.

[@bugbytes3923]

Thanks a lot for the nice words! I'll need to get some more prepared for FastUI, for sure.

[@mattmarshall1834]

@@bugbytes3923 It would be interesting to see it styled with Bootstrap.

[@walterj89]

I'm really happy to see this project become a thing. I've been looking at how to add a simple UI on top of the API's I've been making in FastAPI. There just wasn't much that tied in well with FastAPI without reimplementing code for another framework. Essentially I was just getting into writing a Streamlet program that just calls the API from FastAPI behind the scenes. I wasn't the most thrilled with that solution. This is a much better direction.

[@TimoRJensen]

ever tried PyWebIO?

[@malteplath]

Excellent video! I share the concern of abstraction overload: Using React to create a simple UI seems overkill, plus you are adding a whole ecosystem of unknown bugs/constraints. But as a reasonably simple interface for declarative definition of simple UIs, it looks very promising.

[@bugbytes3923]

Definitely a valid point, regarding abstraction overload.

[@dhariri]

Very interesting. I wonder why they chose to be generating a React application as the underlying browser technology (and not just HTML and bound event handlers on the generated tags)

[@Adrian_Galilea]

I guess because it's faster to do it this way in a manner that is both useful and easier to style. I would love it being HTMX but that would require much more human hours, no?

[@code_ho]

Depends on use cases and architecture you want to implement.

[@mikeckennedy]

Nice intro to something really different for python UIs.

[@bugbytes3923]

Thanks a lot! (Big fan of the podcast btw, awesome job!)

[@seydinaoumarsamabaly1806]

Wow always surprising us with new stuffs. Thank you so much Master !

[@bugbytes3923]

Thanks a lot!

[@mastajigga13]

Yes, I'm very interest in this fastUI library. Please could you go and show us what it is capable of ?

[@pleabargain]

FWIW, I used GPT4 to rewrite the basic app to manipulate a different data set. Another video on how to digest a different API and generate a UI for that API would be very interesting.

[@alexandremondaini]

it would be nice to have a pagination example with db in the backend. so as the user clicks on the page a new query is issued per page on the db. If there is a lot of data how one would return a table effciently ?

[@TheAwaeng]

that looks very promising !!

[@stannylou1636]

Great vid please do more on this FastUI like add css or something of that nature, thanks.

[@bugbytes3923]

Thanks a lot! Will add a new FastUI one tomorrow.

[@adhd_arti]

as always, best content I could find on the internet!

[@bugbytes3923]

Thanks a lot!

[@alexy.3512]

Interesting library, but that's about it. Going with HTMX, Phoenix Framework or Blazor makes more sense than a Python library that abstracts HTML even further by using.... React of all libraries.

Kudos to you dude, your videos are top quality.

[@bugbytes3923]

Thanks a lot for the nice comment, much appreciated!

[@artemshumeiko]

Great video! How do you find out about new libraries like this? Thanks

[@bugbytes3923]

Thank you! I typically look on Reddit and Twitter. This is a good resource to see what's trending too: github.com/explore

[@chrisrudy1969]

Very nice tutorial. Thank you!

[@JOHNSMITH-ve3rq]

Totes. I’d love to see the build of a sophisticated app with this.

[@bugbytes3923]

Thanks, will have a think about what we can do!

[@itsfoss5268]

Love it.

[@bugbytes3923]

Thanks a lot!

[@robhafemeister3100]

Great video, looks promising.

[@bugbytes3923]

Thanks a lot!

[@hoangphamkhanhnhat]

Thank you very much, the video is very nice. I just wondering that: When we type "localhost:8000/api/" to address bar of browser, can it show the page that we design instead of json or raw data?

[@bugbytes3923]

Thanks! Yes, you can show web pages at your URL routes.

[@hoangphamkhanhnhat]

@@bugbytes3923 Thanks for your reply. I am very new in web development, so that would you please help me some hint to display the UI that I made with FastUI when user call an API (for example: localhost:8000/api/) on their web browser.

[@Ro1andDesign]

Great video, FastUI has some potential. However basic functions like a multi-column layout seem to still be missing.

[@bugbytes3923]

It's very early stages so I expect more to be added. But you can attach classes to each component - so it's (probably) possible to create a multi-column structure with Bootstrap classes. Maybe an idea for another video!

[@AmoahDevLabs]

Great one.

[@bugbytes3923]

Thanks a lot!

[@sigarlus]

HI, thanks for the introduction. I like fastapi. This is one of the missing pieces to get rid of Django easily. Is there a way to customize the bootstrap components?

[@bugbytes3923]

You can pass a "class_name" to components to customize the classes used (from Bootstrap, or custom CSS). I'm preparing another video which I'll release next week on database integration, will include a bit on styling!

[@sigarlus]

@@bugbytes3923wow, answer on x-mass eve. I am impressed. Thanks mate!

[@miriamramstudio3982]

Great video. Thanks

[@bugbytes3923]

Thanks so much!

[@MCUlfang]

Cannot import FormResponse because is not part of FastUI.forms no more

[@TheSpinnybrook]

Instead return c.FireEvent(event=GoToEvent(url="/endpoint"))

[@fabsync]

your videos are always great! It will be fantastic if you create a tutorial on django, postgres and flet like a todo app...!!

[@bugbytes3923]

Thanks a lot - will look into Flet asap!

[@fabsync]

Awesome! There is a huge following for flet alone and almost no good tutorials on that subject@@bugbytes3923

[@cunningham.s_law]

I wish I could just use jsx any babel equivalent in python or another transpiler that allows us to extend the syntax with a build step?

[@techinsider3611]

Great video . But i am watching Peaky Blinders now days so I enjoyed your accent as well 😂 What is this accent Scottish?

[@bugbytes3923]

Haha thank you - Peaky Blinders is great! Yes, from Glasgow, Scotland 😂

[@suen-tech]

Thk you Excellent choice

[@kerwbstomp]

how does this compare to streamlit and others like it?

[@JohnKabler]

I have built many apps with streamlit for various prototypes. I'm currently working with fastUI on a new project. It's a bit apples and oranges. Streamlit has a very unique operating model with the code being re-executed with every user interaction. This uniqueness has the benefit of making the development pattern. Far more approachable for somebody that is only used to working in Jupyter notebooks. However, it's a closed garden and you can't just inject a little bit of streamlit into an existing code base. Also, I find the performance to be lacking. FastUI is not for somebody that only knows how to write pandas code in a notebook. If you're the kind of person that knows how to work on back end APIs, this thing is a killer. It integrates into an existing fast API app very easily. Performance is phenomenal. They did a very good job of making sure the react front end is nice and snappy. And you get the SSE out of the box!

[@paolinomarmolaro6308]

The UI is very basic of course, how would you use this framework with a better UI?

[@guruware8612]

holy moly, a button!

[@ahsin.shabbir]

what do you think of generate AI writing the front-end UI code for you so you don't need to do as much styling? There are multi-modal models that can take an image of a design and implement most of the html/css with good accuracy

[@C0n3]

If you knwo htm,css and jQuery for example, actually you don't need fast ui

[@bugbytes3923]

True, it's more a tool to build simple webapps for people who aren't webdevs (data scientists, etc)

[@Viralglobaltrends]

Good approach but complicated syntax . Streamlit is bit easier for quick implementation .

[@samable9585]

why not streamlit or taipy?

[@naranyala_dev]

is it like JSX? can we use HTMX on it or not?

[@VitthalGusinge]

Can you cover SSE demo as well

[@bugbytes3923]

I'd like to add this, will try and schedule that into the plans.

[@pietraderdetective8953]

Below is not meant to critic the video, but instead my view on general: I don't get the overall anti-JS mindset in the Python community...Javascript itself is not that hard, it's arguably the 2nd easiest programming language next to Python. 1.5 year ago I started learning Python (I came from non-programming background), this year I learn Javascript. Now I can implement whatever (simple) JS I need for my webapp. No JS framework needed (avoid the JS framework hell), just use pure vanilla JS + HTML + vanilla CSS is more than enough. Also looking at FastUI official demo website, I think this will become like Bootstrap: everyone everywhere using the same template so everything looks similar. Great informative video though! can someone share FastUI project that showcase what a fullblown use of FastUI is capable of?

[@bugbytes3923]

Interesting perspective, thank you for sharing and the video suggestion! My own opinion (could be wrong) is that the Python community has a lot of programmers who are not necessarily web developers, but who want to build small apps for their work. For example - in the data/AI space - lots of developers and engineers who might prefer to spend their time elsewhere, rather than learning JS SPA frameworks or even building things out with JavaScript itself. This makes these options like HTMX and FastUI much more amenable - these tools can abstract away details and let the developer focus on the functionality in Python. However, if you're building enough web apps with enough complexity, then of course you'll be better served learning the underlying technologies like JavaScript/CSS etc.

[@pietraderdetective8953]

@@bugbytes3923 yes I agree I did use Bootstrap a lot on my early Python days and it did helped a lot to create a quick small/simple app...I think FastUI will achieve something similar: make it less painful / much easier to deal with frontend. So yeah it's ideal for people with not much interest on frontend stuff. The issue I got Bootstrap was too limiting / not flexible enough and most websites that use Bootstrap ends up looking similar --> this is my concern and hence why I asked if there's a project that showcases FastUI capabilities. If FastUI ends up being easy to use while maintaining flexibility and highly customizable --> this would be perfect ❤

[@techinsider3611]

I would also be very happy with this video if i have seen it two years ago . I hated js and was running away from js. Then just learned it and now i do most of the things in js . But still miss python and try to use it whenever possible . It is not something against js it is just mindset difference between python and js . In js we have callbacks i did not understand those earlier . Now python also supports async await but the i dreaded those in js . Python and is are similar bcz they are dynamic but there philosophy is totally different . Python developer should try Svelte if they fear js . They will love it as i do now 😂

[@BlueIced256]

@@bugbytes3923 I fully agree on that one! I am a data engineer and I use python a lot. Sometimes I need a quick web app to do some work like proof of concepts. I don't really care about learning all the web development stuff as it is not my job to create full-blown web applications. I think that FastUI is ideal for my purposes. Now I am usually building Rest API's and use Postman to load data for these purposes. But the problem there is that if users in the program have to work with Postman, then they are lost. Building a quick web app with FastUI will definitely be a game changer.

[@RocketLR]

isnt the point of react to not have to refresh the webpage for every click and action? :S

[@azi_and_razi]

And it doesn't (in FastUI). What I see in devtools is that page change downloads only new data in json format, not everything again.

[@Septumsempra8818]

Wow

[@danbailey9591]

Very similar to sqlpage.

[@bugbytes3923]

Interesting! Not heard of this one.

[@edhahaz]

Holy grail of dumpster fire

[@hrznn]

The sheer irony of Py developers calling their not fast things Fast(API)(UI). They're sipping that copium. (also notice how fast languages don't use fast in the name)

[@bugbytes3923]

It’s probably “fast enough” 😁

[@kevon217]

end game is FastPython

[@chukwujekwuchiaha6605]

That's right! FastAPI + FastUI = FastPython for everything mobile, web and desktop. PERIOD!!!

[@legaldesigndo]

Fast solutions with little coding

[@MariusHeier1]

Its fast dev not fast execution