MonsterUI: Beautiful Python Web Apps in Minutes

hi um Jeremy from answer AI here and today I'm joined by Isaac to talk about his new project called um monster UI so uh good night Isaac how you doing I'm doing good how about yourself I'm great um I am so pumped about this I'm going to skip all forms of introduction and just jump straight into showing off this thing that you've built um this is an example of something built with mon UI um and so monster UI is providing the components for this and it's got some neat things like as I'm scrolling you might see watching that the thing on the right left hand side is moving also the thing at the top is changing uh which one is uh emboldened if you like um uh so that's all written in Monster UI this is written in Monster UI a little ticket P popped up written in Monster UI this is written in Monster UI um and for all of these things I can look at the code click C code and um this blows my mind a bit this is actually the entire thing it's all in one file if I click copy um I quite like this one's pretty amazing um be to see how to build this perhaps uh because there's a lot going on here and I played around with this earlier today and I noticed actually see if you got some functionality like clicking on these X's makes them disappear um and if I click C code um it's all one file um so I'm just going to try copying that head over to vs code and paste it um see run main. pi and uh let's head over [Music] to oh there it is and it's super fast uh and so what is that 140 lines of code which includes the sample data um svgs um and the other thing I notice about this is that there isn't like very much Tailwind or css or whatever I see there's like a space y4 here for instance but on the whole it's all very much you're just saying like oh I want to space the stuff in here I want to Stack the stuff in here I want a navigation here and it just it all displays pretty much nicely so I don't know it feels like from someone like me Isaac who's not at all really a designer um I feel like you've built this for me I like I should be able to make something look this nice is that the idea without fiddling around the CSS and toil wind and whatnot yeah that's exactly right I mean I built it for me but you know I'm glad you appreciate it as well you know I wanted something where I could easily build we sites that um that really look nice without uh tons of optimizations and classes and strings and and and being an expert in CSS and JavaScript and so uh yeah I built this Library so that you know you can make production looking apps without um yeah without without knowing all of that information and you know we should say so originally um I suggested you kind of start on this project some months ago as being basically a rapper for Franken UI and this is Franken U this is an example from Franken U it should look very familiar and so the first thing we should mention of course is is huge amount of gratitude to Frank and UI because we are actually building on top of their work um but you know a big difference here is that um in Franken UI uh that requires a huge amount of code um with lots of somewhat inscrutable kinds of you know classes and whatnot um where else the difference here you know is actually let's this is tasks so let's go back to tasks the difference here is that your code basically has none of that you know it's got an icon and they're left a line there's a centered bit um so kind of what you've done here is you've taken the great work from Franken UI and taking advantage of fast HTML to you know use that kind of syntax but you've also kind of added some defaults and things would that be a fair description yeah I mean that's exactly right you know um one of the things you see there's there's lots of examples but you know when you when you have things on a page you never want them like super scrunched up you always want a default spacing and so there is default spacing um and you got some nice descriptions of That here as well saying showing how I can change those things and what they all mean um but out of the box you get pretty good defaults yeah exactly I mean you'll always have small things that you want to modify and you know tweak yourself um defaults are great and when you need to um you can use Tailwind directly as well any piece on any component um so you can one of those examples I recognized as actually being from Daisy UI so Daisy UI is another really nice uh Library so this is kind of bringing in some of the best bits of of multiple Frameworks under a single unified Banner yeah and you know the themes uh themes all sync together and you know you might see that uh code rendering this code rendering is uh using highlight JS so that's another another thing that's integrated in as well uh where do I see the code rendering Oh you mean when I clicked on C code yeah any of this code where it has the code highlighting instead of it being you know just black text um the reason it's got the syntax highlighting is and the copy button all that is so this site this site of course is written in fast HTML and wants to UI itself get all these nice little things like when I B over something I get a little 3d effect actually if if you go to C code I can show you how that's done which is kind of neat so if you look for card T uhuh card two. hover okay and that's the class and uh just people not so familiar with fast HTML we say CLS rather than CLS because class is a reserved word in Python um we should also mention that um Franken UI in turn is built on top of something called Shaden um uh Shaden again looks very similar Shaden is different though that it's built um uh with and for react so Franken UI is kind of nice it extracts out into something that everybody can use regardless of what framework you use um and so we should also say a lot of gratitude to Shad Cen for you know inspiring a whole lot of this um which obviously we've we and Frank and UI have um entirely taken their inspiration even for the examples and for the components and so forth so that's been amazing um yeah it's interesting you know these uh I mean there's a lot of stuff in this documentation here um which I really like so the way you know we can see all the different kinds of semantic HTML you can use and if we you can see like highlighting and sighting and quotes and dates all maap to you know a mark to highlight and a quote to quote and a sight to site this kind of semantic HTML is not so common nowadays but I you know I think it's a kind of thing that might actually help me to be able to write things that work well yeah and I think it's it's useful to note uh some people might recognize this but um you know this Mark element and this block quote this this site element and this em for emphasis like I didn't I didn't make these up these are part of the HTML spec that I'm kind of building on top of um um oh so I shouldn't have clicked on that let me actually do that so we're doing site here we are right click inspect here it is site block quote yep address and so it's nice right because um I think you know people spend a lot of time deciding what elements to put into HTML um and so being able to use those it's probably going to cover a lot of the things you actually need um and by default they're all going to look reasonable a lot of people don't realize that there's actually a keyboard shortcut element in HTML um and I see here you know you've got all this stuff added to it but but that's happening behind the scenes but when I use that keyboard shortcut I don't have to worry about any of that you do it all for us um where abouts is it uh keyboard shortcut keyboard is pretty cool that's right I mean the goal for for for me is to have it that you know you just use the defaults almost all the time you get something that looks reasonably good um and that lets you you know build nice and quickly and then spends your time on on on the the bits of UI that are really important or differentiators or or interesting um kind of get you a 80 or 90% of the way there and you know maybe 5 or 10% of the time and you know it because also we are using fast HTML um we can add the live equals true um which means that we can then change payment method to payment um and you can see it automatically changes without me having to refresh there change it back again press save there it's come back again here and I think that's kind of nice for experimenting with these little changes so for example maybe uh I wanted to change the border to make it a bit thicker but border four potentially work try that and we should see there you go The Border's been made a bit thicker like oh it's a bit too thick change that to three so you can kind of uh uh that's interesting there is no three so that's also good to know that's presumably a Tailwind thing which I wouldn't have known about so it's nice to get that real time feedback um is that something you use you're doing it you kind of yeah I always use it and I'm always doing it there's things like you know if you're if you're doing UI kind of all the time and using Tailwind a lot you might remember that there's a border two and a border one and a border four but not a border three I don't use it enough to have that memorized and so uh this click iteration is also things like dice bear which is an icon service I can see you're using that to get these automatic icons which is very convenient for quick prototyping um I feel like this is perhaps one of the best or maybe the best example I've seen of this idea that perhaps we can start to uh in fact I know I know a number of companies are moving away from stuff like figma and instead basically having the designers work directly with the HTML potentially using language models um and I did want to mention actually one thing that I I love that you've done with monster UI is that you're following the um uh lm. text standard um and so uh I did actually grab this really nice list of examples and so forth um which I added to visual studio code um and I do find that I could um grab this and say um change this example to use a left aligned div container instead of a grid um and yeah it's it's there you know is cool um so that's a really nice feature for me is that I can you know use llms to to help me and because it's built on top of um Tailwind you know the stuff that llms already know and that designers already know about Tailwind you can still take advantage of um although perhaps the thing I like best though is you know I don't necessarily know about like what options to use for text so you know your classes you've done as enums so I can like select from options for my different kind of lower level text types capitalize lowercase muted again I can choose from and that's like works pretty much everywhere so it's cool that like for a class you can have not only a string but you can also have these enums you've built tles of them tles of enums and strings just strings um you know you can add them together too you can use addition if you like couples yeahhuh yeah so yeah yeah I think that's pretty amazing it's it's you know this idea of a server side um kind of rendered Library um it's it's pretty new you know um it's not something that we've necessarily quite seen before in this way but it's part of our Vision at answer AI for making coding dramatically easier for everybody both humans and AI um without you losing any of the flexibility so you've got the full power of all HTML all Tailwind all Daisy all HTTP you know it's not like the kind of dashboard type things which give you on your own little mini language um and so Isaac I know you've been building all kinds of stuff like a kind of new type of dynamic blog you know from scratch um you've built stuff for our legal team um yeah what's your experience been like of of using past HTML and HTM X and monster UA this kind of very new and fairly revolutionary approach to writing web apps well it's been it's been great you know I um I actually always wanted to do a lot of web app development because you know sharing what you build with other people is um you know a lot of fun it's it's Pleasant and you know it's kind of essential if you want to have something commercially viable someone else has to see it and uh web apps is one way to do that um I had a really tough time with um trying to set up stuff in Prior Frameworks it all felt very complicated lots of config files lots of B build steps had a hard time iterating I found fast HTML a lot easier um I found you know styling was still challenging for me in fast HTML which is you know when I started building you know Monster UI and um yeah it's been great I mean I I was having um and I never would imagined I was having trouble with um some of these services to create a Twitter threat um and um I found some things frustrating and uh I built a SQL I back Twitter thread generator that I can store stuff in and change things with in in a couple of hours I built you know the blog in a in a couple of hours and it's um styled with monster UI and tailwind and uh yeah it's been great HTM X simplifies things a ton as well it's um it takes a little bit to get used to a paradigm but um you know once you you put a little bit of time in it it really makes a lot of sense and it allows you to simplify your code and you know move really fast and um have it look great as as well so it's it's been great um so to get started folks can just pip install moner UI um and um I would say going through and just doing what I just did which is pasting some of the examples into vs code or cursor or Vim or whatever and run it it's a standalone single file there's nothing else to do you just run it and then you go to Local Host colon 51 play with it um change things see what happens and then you know the other thing I do is uh the I've just been going through your API reference just to see what all the stuff you have is and I try to use each piece and I often find it kind of inspires ideas around things I could build or changing things I've already built um uh any other suggestions for folks um looking to get started with fast HTML and Monster I Isaac I think that covers it I mean we have the fast HTML Gallery which has a lot of HTM X examples um to to understand a little bit more about HTM X which is helpful for fast HTML um but yeah I'd say um just kind of start start playing with stuff start building stuff I think going through the API reference for Monster UI is is particularly important it's not U an API reference like you know you go through and you just see um you know dock strings where it's like hard to tell how it renders there's examples built in that are that are practical and you can play with them you can try and Shrink them and see if they're responsive automatically um you can um you know see see a few example forms if you go to the card section you can see what a Blog card might look like and the code for it and so um that really helps to to understand what's there um is the visual aspect of the of the docs as well and all of these um examples are actual running web applications that you can play with um uh they're not static images um so for example yeah and with that you could be confident that the code on the left works because the code on the left is what's running you know right um that's it that's the whole code for infinite scroll which is C crazy and so yeah okay so I mean that's not monster UI but it's kind of uh moner UI and fast HTML go hand in hand so um uh and you know these kind of nice to see some of these Daisy UI examples um which perhaps some of these will start adding some more Monster UI to the gallery as well yeah and I'd love to see what people build and uh you know what they're they feel is missing what they want to build um so yeah reach out an open source project on GitHub so people can add add issues PRS for new components and so forth um yeah can't wait to see what people buildt with monster UI so congrats uh Isaac for the release and thank you for the folks behind Chet CN Franken UI and Daisy um and uh thanks for your time today yeah thank you for your your help and support and not just today but you know throughout the whole process this has been great and look forward to seeing what everyone builds soon thank you sir

MonsterUI ( https://monsterui.answer.ai/ ) is a Python/fasthtml library that simplifies web development by combining the best of modern UI frameworks like FrankenUI, Tailwind, DaisyUI, and HighlightJS. Through live coding examples, we'll show you how to create professional-looking web applications with minimal code and zero configuration. We take you through several complete UIs in minimal lines of code, featuring responsive layouts, dynamic updates, and polished UI components, and explain how MonsterUI provides smart defaults and semantic HTML elements while maintaining full access to underlying frameworks when needed. You'll learn how to: - Build production-ready UIs without CSS expertise - Live code examples with real-time updates - Integrate with popular services like DiceBear for avatars - Use the built-in dark/light mode support - Take advantage of HTML components with modern styling You can install it from pip; for comprehensive docs and live interactive examples see https://monsterui.answer.ai/ . 0:00 - Introduction 0:25 - MonsterUI Overview 1:25 - Cards Example Deep Dive 3:05 - What MonsterUI does 8:28 - Semantic Typography 11:05 - Iterating on UI 13:05 - AI context usage 14:45 - Style discoverability 15:35 - The vision 17:00 - Isaac’s experience 18:33 - How to get started 21:22 - Stay in touch