MonsterUI: Beautiful Python Web Apps in Minutes

00:00:00.960 | Hi, Jeremy from Answer.ai here.

00:00:03.800 | And today I'm joined by Isaac to talk about his new project

00:00:08.480 | called Monster UI.

00:00:10.200 | So good day, Isaac.

00:00:11.800 | How are you doing?

00:00:13.080 | I'm doing good.

00:00:13.840 | How about yourself?

00:00:14.640 | I'm great.

00:00:16.120 | I am so pumped about this, I'm going

00:00:18.440 | to skip all forms of introduction

00:00:20.160 | and just jump straight into showing off this thing

00:00:24.080 | that you've built. This is an example of something

00:00:27.960 | built with Monster UI.

00:00:32.520 | And so Monster UI is providing the components for this.

00:00:36.400 | And it's got some neat things, like as I'm scrolling,

00:00:38.720 | you might see, watching, that the thing on the left-hand side

00:00:42.480 | is moving.

00:00:43.280 | Also, the thing at the top is changing,

00:00:46.280 | which one is emboldened, if you like.

00:00:48.840 | So that's all written in Monster UI.

00:00:55.320 | This is written in Monster UI, a little ticket popped up

00:00:58.480 | written in Monster UI.

00:01:01.640 | This is written in Monster UI.

00:01:05.760 | And for all of these things, I can look at the code,

00:01:10.640 | click C code.

00:01:12.600 | And this blows my mind a bit.

00:01:17.800 | This is actually the entire thing.

00:01:19.280 | It's all in one file.

00:01:21.480 | If I click Copy, I quite like--

00:01:26.680 | this one's pretty amazing.

00:01:29.520 | Be interesting to see how to build this, perhaps,

00:01:32.640 | because there's a lot going on here.

00:01:34.960 | And I played around with this earlier today,

00:01:36.840 | and I noticed, actually, it's even got some functionality,

00:01:39.300 | like clicking on these Xs makes them disappear.

00:01:42.800 | And if I click C code, it's all one file.

00:01:50.560 | So I'm just going to try copying that.

00:01:53.160 | Head over to VS Code and paste it.

00:01:56.280 | So you run it, main.py.

00:02:02.000 | And let's head over to--

00:02:06.640 | oh, there it is.

00:02:13.760 | And it's super fast.

00:02:18.080 | And so what is that, 140 lines of code,

00:02:21.560 | which includes the sample data, the SVGs.

00:02:27.280 | And the other thing I notice about this

00:02:34.080 | is that there isn't very much Tailwind or CSS or whatever.

00:02:40.160 | I see there's a space Y4 here, for instance.

00:02:45.160 | But on the whole, it's all very much--

00:02:49.880 | you're just saying, oh, I want to space the stuff in here.

00:02:53.760 | I want to stack the stuff in here.

00:02:56.680 | I want a navigation here.

00:03:00.720 | And it all just plays pretty much nicely.

00:03:04.520 | So I don't know.

00:03:05.640 | It feels like someone like me, Isaac, who's not

00:03:08.560 | at all really a designer, I feel like you've built this for me.

00:03:13.800 | I should be able to make something look this nice.

00:03:17.880 | Is that the idea, without fiddling around with CSS

00:03:20.640 | and Tailwind and whatnot?

00:03:22.240 | ISAAC KOHANE: Yeah, that's exactly right.

00:03:23.960 | I built it for me.

00:03:24.760 | But I'm glad you appreciate it as well.

00:03:26.840 | I wanted something where I could easily

00:03:29.160 | build websites that really look nice without tons

00:03:35.600 | of optimizations and classes and strings

00:03:40.640 | and being an expert in CSS and JavaScript.

00:03:44.440 | And so I built this library so that you

00:03:49.000 | can make production-looking apps without knowing

00:03:56.280 | all of that information.

00:03:58.680 | And we should say, so originally, I

00:04:02.880 | suggested you start on this project

00:04:05.520 | some months ago as being basically a wrapper

00:04:10.120 | for Franken UI.

00:04:13.000 | This is Franken UI.

00:04:13.880 | This is an example from Franken UI.

00:04:15.040 | It should look very familiar.

00:04:16.280 | And so the first thing we should mention, of course,

00:04:18.480 | is a huge amount of gratitude to Franken UI

00:04:21.560 | because we are actually building on top of their work.

00:04:27.720 | But a big difference here is that in Franken UI,

00:04:36.800 | that requires a huge amount of code

00:04:44.720 | with lots of somewhat inscrutable kinds of classes

00:04:51.760 | and whatnot.

00:04:53.320 | Whereas the difference here is--

00:04:57.360 | actually, this is tasks, so let's go back to tasks.

00:04:59.920 | The difference here is that your code basically

00:05:11.560 | has none of that.

00:05:13.120 | It's got an icon.

00:05:14.360 | They're left-aligned.

00:05:15.320 | There's a centered bit.

00:05:18.240 | So what you've done here is you've

00:05:20.560 | taken the great work from Franken UI

00:05:24.760 | and taken advantage of FastHTML to use that kind of syntax.

00:05:30.680 | But you've also added some defaults and things.

00:05:33.840 | Would that be a fair description?

00:05:36.760 | Yeah, I mean, that's exactly right.

00:05:39.400 | One of the things you see-- there's lots of examples.

00:05:42.720 | But when you have things on a page,

00:05:47.080 | you never want them super scrunched up.

00:05:49.480 | You always want a default spacing.

00:05:51.080 | And so there is a default spacing.

00:05:53.360 | And you've got some nice descriptions of that

00:05:55.280 | here as well, showing how I can change those things

00:05:58.480 | and what they all mean.

00:06:00.840 | But out of the box, you get pretty good defaults.

00:06:05.480 | Yeah, exactly.

00:06:06.280 | I mean, you'll always have small things that you want to modify

00:06:09.040 | and tweak yourself.

00:06:12.080 | Defaults are great.

00:06:13.080 | And when you need to, you can use Tailwind directly as well,

00:06:16.720 | at any piece on any component.

00:06:19.840 | And one of those examples I recognized as actually

00:06:24.120 | being from Daisy UI.

00:06:25.520 | So Daisy UI is another really nice library.

00:06:28.680 | So this is kind of bringing in some of the best bits

00:06:30.760 | of multiple frameworks under a single unified banner.

00:06:36.680 | Yeah, and the themes all sync together.

00:06:39.840 | And you might see that code rendering.

00:06:42.720 | This code rendering is using HighlightJS.

00:06:45.560 | So that's another thing that's integrated in as well.

00:06:48.120 | Where do I see the code rendering?

00:06:49.720 | Oh, you mean when I clicked on C code?

00:06:51.920 | Yeah, any of this code where it has the code highlighting.

00:06:54.480 | Instead of it being just black text,

00:06:57.600 | the reason it's got the syntax highlighting

00:06:59.880 | and the copy button, all that is--

00:07:01.440 | So this site, of course, is written in FastHTML and Monster

00:07:06.080 | UI itself.

00:07:08.400 | I get all these nice little things.

00:07:09.860 | Like when I hover over something,

00:07:11.920 | I get a little 3D effect.

00:07:14.800 | Actually, if you go to C code, I can show you

00:07:17.000 | how that's done, which is kind of neat.

00:07:19.480 | So if you look for card T, there it is, cardT.hover.

00:07:27.040 | OK, and that's the class.

00:07:28.720 | And just people not so familiar with FastHTML,

00:07:31.320 | we say CLS rather than CLASS, because class

00:07:34.960 | is a reserved word in Python.

00:07:36.280 | We should also mention that Franken UI, in turn,

00:07:44.520 | is built on top of something called ShadCN.

00:07:48.760 | ShadCN, again, looks very similar.

00:07:51.320 | ShadCN is different, though, that it's

00:07:52.880 | built with and for React.

00:07:57.200 | So Franken UI is kind of nice.

00:07:58.880 | It extracts it out into something

00:08:00.440 | that everybody can use, regardless

00:08:01.920 | of what framework you use.

00:08:04.440 | And so we should also say a lot of gratitude

00:08:07.480 | to ShadCN for inspiring a whole lot of this, which

00:08:14.280 | obviously we and Franken UI have entirely

00:08:20.200 | taken their inspiration, even for the examples

00:08:22.320 | and for the components and so forth.

00:08:23.880 | So that's been amazing.

00:08:25.760 | Yeah, it's interesting, these--

00:08:31.800 | I mean, there's a lot of stuff in this documentation here,

00:08:35.480 | which I really like.

00:08:36.720 | So the way we can see all the different kinds of semantic

00:08:42.520 | HTML you can use, and if we can see highlighting and citing

00:08:47.560 | and quotes and dates all mapped to a mark to highlight

00:08:56.200 | and a quote to quote and a cite to cite.

00:08:59.120 | This kind of semantic HTML is not so common nowadays,

00:09:01.520 | but I think it's a kind of thing that might actually

00:09:06.040 | help me to be able to write things that work well.

00:09:10.480 | Yeah, and I think it's useful to note--

00:09:13.000 | some people might recognize this,

00:09:14.480 | but this mark element, and this block quote,

00:09:18.520 | and this cite element, and this EM for emphasis.

00:09:22.000 | Like, I didn't make these up.

00:09:23.720 | These are part of the HTML spec that I'm

00:09:26.240 | kind of building on top of.

00:09:28.880 | Oh, so I shouldn't have clicked on that.

00:09:30.600 | Let me actually do that.

00:09:33.960 | So we're doing cite.

00:09:35.320 | Here we are, right-click, Inspect.

00:09:39.560 | Here it is, cite.

00:09:41.600 | Block quote.

00:09:43.200 | Yeah, address.

00:09:46.240 | And so it's nice, right, because I

00:09:49.800 | think people spend a lot of time deciding what

00:09:52.160 | elements to put into HTML.

00:09:55.000 | And so being able to use those is probably

00:09:58.280 | going to cover a lot of the things that you actually need.

00:10:01.880 | And by default, they're all going to look reasonable.

00:10:04.800 | A lot of people don't realize that there's actually

00:10:06.960 | a keyboard shortcut element in HTML.

00:10:12.400 | And I see here you've got all this stuff added to it,

00:10:15.200 | but that's happening behind the scenes.

00:10:18.560 | But when I use that keyboard shortcut,

00:10:21.960 | I don't have to worry about any of that.

00:10:23.720 | You do it all for us.

00:10:26.640 | Whereabouts is it?

00:10:29.640 | Keyboard shortcut.

00:10:30.600 | There we go.

00:10:31.760 | Which is pretty cool.

00:10:34.800 | That's right.

00:10:35.360 | I mean, the goal for me is to have it

00:10:38.440 | that if you just use the defaults almost all the time,

00:10:42.920 | you get something that looks reasonably good.

00:10:46.040 | And that lets you build nice and quickly,

00:10:48.400 | and then spends your time on the bits of UI

00:10:52.640 | that are really important for differentiators

00:10:54.600 | or interesting.

00:10:57.560 | Kind of gets you 80% or 90% of the way there,

00:11:00.840 | and maybe 5% or 10% of the time.

00:11:05.120 | And because also we are using fast HTML,

00:11:12.200 | we can add the live equals true, which

00:11:16.240 | means that we can then change payment method to payment.

00:11:23.240 | And you can see it automatically changes

00:11:25.480 | without me having to refresh there.

00:11:27.600 | Change it back again.

00:11:28.600 | Press Save.

00:11:31.080 | It's come back again here.

00:11:32.640 | And I think that's kind of nice for experimenting

00:11:36.160 | with these little changes.

00:11:37.960 | So for example, maybe I wanted to change the border

00:11:43.480 | to make it a bit thicker.

00:11:44.680 | Would border 4 potentially work?

00:11:46.880 | Try that.

00:11:47.920 | And we should see--

00:11:49.600 | there you go.

00:11:50.200 | The border's been made a bit thicker.

00:11:51.640 | Like, oh, it's a bit too thick.

00:11:52.960 | Change that to 3.

00:11:53.880 | So you can kind of--

00:11:56.720 | that's interesting.

00:11:57.440 | There is no 3.

00:11:58.200 | So that's also good to know.

00:11:59.360 | That's presumably a Tailwind thing,

00:12:01.200 | which I wouldn't have known about.

00:12:03.240 | So it's nice to get that real-time feedback.

00:12:07.160 | Is that something you use a bit as you're doing it?

00:12:09.600 | You kind of--

00:12:11.920 | Yeah, I always use it, and I'm always doing it.

00:12:13.960 | There's things like, if you're doing UI kind of all the time

00:12:19.120 | and using Tailwind a lot, you might remember

00:12:21.040 | that there's a border 2, and a border 1, and a border 4,

00:12:23.960 | but not a border 3.

00:12:25.880 | I don't use it enough to have that memorized.

00:12:28.320 | And so this quick iteration is critical.

00:12:32.000 | Also things like DiceBear, which is an icon service.

00:12:34.680 | I can see you're using that to get these automatic icons, which

00:12:37.400 | is very convenient for quick prototyping.

00:12:41.680 | I feel like this is perhaps one of the best, or maybe

00:12:45.360 | the best example I've seen of this idea

00:12:47.160 | that perhaps we can start to--

00:12:50.360 | in fact, I know a number of companies

00:12:51.840 | are moving away from stuff like Figma,

00:12:54.160 | and instead basically having the designers work directly

00:12:57.360 | with the HTML, potentially using language models.

00:13:03.120 | And I did want to mention, actually,

00:13:04.680 | one thing that I love that you've done with MonsterUI

00:13:09.040 | is that you're following the LLMs.txt standard.

00:13:16.560 | And so I did actually grab this really nice list of examples

00:13:26.880 | and so forth, which I added to Visual Studio Code.

00:13:32.960 | And I do find that I could grab this and say,

00:13:45.720 | change this example to use a left-aligned div container

00:13:59.440 | instead of a grid.

00:14:16.560 | And yeah, it's there, which is cool.

00:14:20.240 | So that's a really nice feature for me,

00:14:25.560 | is that I can use LLMs to help me.

00:14:30.880 | And because it's built on top of Tailwind, the stuff

00:14:36.960 | that LLMs already know and that designers already

00:14:39.560 | know about Tailwind, you can still take advantage of.

00:14:44.440 | Although perhaps the thing I like best, though,

00:14:46.440 | is I don't necessarily know about what

00:14:50.160 | options to use for text.

00:14:52.240 | So your classes, you've done as enums.

00:14:56.640 | So I can select from options or my different lower-level text

00:15:02.800 | types--

00:15:03.600 | capitalize, lowercase, muted.

00:15:07.480 | Again, I can choose from.

00:15:09.880 | And that works pretty much everywhere.

00:15:13.640 | So it's cool that for a class, you can have not only a string,

00:15:16.720 | but you can also have these enums you've built,

00:15:19.920 | tuples of them, tuples of enums and strings, just strings.

00:15:25.880 | It makes it really--

00:15:26.680 | You can add them together, too.

00:15:27.960 | You can use addition if you don't like tuples.

00:15:30.080 | Uh-huh, yeah.

00:15:33.240 | Yeah, I think that's pretty amazing.

00:15:36.480 | So this idea of a server-side kind of rendered library,

00:15:50.400 | it's pretty new.

00:15:52.960 | It's not something that we've necessarily quite seen before

00:15:56.240 | in this way.

00:15:57.720 | But it's part of our vision at Answer.ai

00:16:01.880 | for making coding dramatically easier for everybody,

00:16:06.400 | both humans and AI, without losing any of the flexibility.

00:16:13.680 | So you've got the full power of all HTML, all Tailwind,

00:16:17.360 | all DAISY, all HTTP.

00:16:21.200 | It's not like the kind of dashboard-type things

00:16:26.080 | which give you your own little mini-language.

00:16:30.880 | And so, Isaac, I know you've been

00:16:32.400 | building all kinds of stuff, like a kind

00:16:35.720 | of new type of dynamic blog from scratch.

00:16:39.640 | You've built stuff for our legal team.

00:16:42.640 | Yeah, what's your experience been like of using

00:16:45.120 | FastHTML and HTMX and Monster UI,

00:16:49.400 | this kind of very new and fairly revolutionary approach

00:16:54.200 | to writing web apps?

00:16:57.080 | Well, it's been great.

00:16:58.480 | I actually always wanted to do a lot of web app development

00:17:02.720 | because sharing what you build with other people

00:17:06.040 | is a lot of fun.

00:17:09.160 | It's pleasant.

00:17:09.840 | And it's kind of essential if you

00:17:11.360 | want to have something commercially viable.

00:17:13.760 | Someone else has to see it.

00:17:15.560 | And web apps is one way to do that.

00:17:19.480 | I had a really tough time with trying to set up

00:17:22.960 | stuff in prior frameworks.

00:17:24.600 | It all felt very complicated, lots of config files,

00:17:26.880 | lots of build steps, a hard time iterating.

00:17:30.360 | I found FastHTML a lot easier.

00:17:33.360 | I found the styling was still challenging for me

00:17:36.800 | in FastHTML, which is when I started building Monster UI.

00:17:41.200 | And yeah, it's been great.

00:17:42.760 | I mean, I never would have imagined.

00:17:46.400 | I was having trouble with some of these services

00:17:49.720 | to create a Twitter threat.

00:17:52.600 | And I found some things frustrating.

00:17:55.240 | And I built a SQLite-backed Twitter thread generator

00:18:01.520 | that I can store stuff in and change things

00:18:03.480 | with in a couple of hours.

00:18:05.080 | I built the blog in a couple of hours.

00:18:08.560 | And it's styled with Monster UI and Tailwind.

00:18:11.600 | And yeah, it's been great.

00:18:13.480 | HTMX simplifies things a ton as well.

00:18:15.880 | It takes a little bit to get used to, a paradigm.

00:18:18.560 | But once you put a little bit of time in,

00:18:22.200 | it really makes a lot of sense.

00:18:23.560 | And it allows you to simplify your code and move really fast

00:18:27.800 | and have it look great as well.

00:18:31.640 | So it's been great.

00:18:34.080 | So to get started, folks can just pip install Monster UI.

00:18:38.680 | And I would say going through and just doing

00:18:43.560 | what I just did, which is pasting some of the examples

00:18:46.360 | into VS Code or Cursor or Vim or whatever and run it.

00:18:50.560 | It's a standalone single file.

00:18:52.120 | There's nothing else to do.

00:18:53.240 | You just run it.

00:18:53.880 | And then you go to localhost colon 5001, play with it,

00:18:59.800 | change things, see what happens.

00:19:02.560 | And then the other thing I do is I've just

00:19:06.360 | been going through your API reference

00:19:08.160 | just to see what all the stuff you have is.

00:19:10.720 | And I try to use each piece.

00:19:13.640 | And I often find it inspires ideas

00:19:17.840 | around things I could build or changing

00:19:19.760 | things I've already built.

00:19:22.440 | Any other suggestions for folks looking

00:19:25.600 | to get started with FastHTML and Monster UI, Isaac?

00:19:31.320 | I think that covers it.

00:19:32.400 | I mean, we have the FastHTML gallery,

00:19:34.160 | which has a lot of HTMX examples to understand a little bit more

00:19:37.760 | about HTMX, which is helpful for FastHTML.

00:19:40.760 | But yeah, I'd say just kind of start playing with stuff,

00:19:44.200 | start building stuff.

00:19:45.480 | I think going through the API reference for Monster UI

00:19:47.880 | is particularly important.

00:19:49.480 | It's not an API reference like you go through

00:19:53.120 | and you just see doc strings where it's

00:19:58.560 | hard to tell how it renders.

00:20:00.240 | There's examples built in that are practical.

00:20:02.800 | And you can play with them.

00:20:04.520 | You can try and shrink them and see if they're

00:20:06.360 | responsive automatically.

00:20:08.800 | You can see a few example forms.

00:20:13.600 | If you go to the card section, you

00:20:15.040 | can see what a blog card might look like and the code for it.

00:20:18.200 | And so that really helps to understand

00:20:21.400 | what's there is the visual aspect of the docs as well.

00:20:25.680 | And all of these examples are actual running web applications

00:20:35.640 | that you can play with.

00:20:38.240 | They're not static images, so for example--

00:20:47.160 | Yeah, and with that, you can be confident

00:20:49.200 | that the code on the left works because the code on the left

00:20:51.840 | is what's running.

00:20:54.560 | That's it.

00:20:55.640 | That's the whole code for infinite scroll, which is crazy.

00:20:59.160 | And so yeah, OK, so I mean, that's not Monster UI,

00:21:01.400 | but it's kind of Monster UI and FastHTML go hand in hand.

00:21:06.200 | And these kind of-- nice to see some of these Daisy UI

00:21:12.000 | examples, which perhaps some of these

00:21:15.400 | will start adding some more Monster UI to the gallery

00:21:19.680 | as well.

00:21:22.480 | Yeah, and I'd love to see what people build

00:21:24.280 | and what they feel is missing, what they want to build.

00:21:29.520 | So yeah, reach out and--

00:21:30.880 | Open source project on GitHub so people

00:21:32.880 | can add issues, PRs for new components, and so forth.

00:21:37.600 | Yeah, can't wait to see what people built with Monster UI.

00:21:40.360 | So congrats, Isaac, for the release.

00:21:42.800 | And thank you for the folks behind ShedCN, FrankenUI,

00:21:46.840 | and Daisy.

00:21:49.280 | And thanks for your time today.

00:21:51.960 | Yeah, and thank you for your help and support.

00:21:54.480 | Not just today, but throughout the whole process.

00:21:56.840 | This has been great.

00:21:57.640 | And look forward to seeing what everyone builds soon.

00:22:01.400 | Thank you, sir.

MonsterUI: Beautiful Python Web Apps in Minutes

Chapters