Hi, Jeremy from Answer.ai here. And today I'm joined by Isaac to talk about his new project called Monster UI. So good day, Isaac. How are you doing? I'm doing good. How about yourself? I'm great. 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.

This is an example of something built with Monster UI. 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 left-hand side is moving. Also, the thing at the top is changing, which one is emboldened, if you like.

So that's all written in Monster UI. This is written in Monster UI, a little ticket popped up written in Monster UI. This is written in Monster UI. And for all of these things, I can look at the code, click C code. And this blows my mind a bit. This is actually the entire thing.

It's all in one file. If I click Copy, I quite like-- this one's pretty amazing. Be interesting to see how to build this, perhaps, because there's a lot going on here. And I played around with this earlier today, and I noticed, actually, it's even got some functionality, like clicking on these Xs makes them disappear.

And if I click C code, it's all one file. So I'm just going to try copying that. Head over to VS Code and paste it. So you run it, main.py. And let's head over to-- oh, there it is. And it's super fast. And so what is that, 140 lines of code, which includes the sample data, the SVGs.

And the other thing I notice about this is that there isn't very much Tailwind or CSS or whatever. I see there's a space Y4 here, for instance. But on the whole, it's all very much-- you're just saying, oh, I want to space the stuff in here. I want to stack the stuff in here.

I want a navigation here. And it all just plays pretty much nicely. So I don't know. It feels like someone like me, Isaac, who's not at all really a designer, I feel like you've built this for me. I should be able to make something look this nice. Is that the idea, without fiddling around with CSS and Tailwind and whatnot?

ISAAC KOHANE: Yeah, that's exactly right. I built it for me. But I'm glad you appreciate it as well. I wanted something where I could easily build websites that really look nice without tons of optimizations and classes and strings and being an expert in CSS and JavaScript. And so I built this library so that you can make production-looking apps without knowing all of that information.

And we should say, so originally, I suggested you start on this project some months ago as being basically a wrapper for Franken UI. This is Franken UI. This is an example from Franken UI. It should look very familiar. And so the first thing we should mention, of course, is a huge amount of gratitude to Franken UI because we are actually building on top of their work.

But a big difference here is that in Franken UI, that requires a huge amount of code with lots of somewhat inscrutable kinds of classes and whatnot. Whereas the difference here is-- actually, this is tasks, so let's go back to tasks. The difference here is that your code basically has none of that.

It's got an icon. They're left-aligned. There's a centered bit. So what you've done here is you've taken the great work from Franken UI and taken advantage of FastHTML to use that kind of syntax. But you've also added some defaults and things. Would that be a fair description? Yeah, I mean, that's exactly right.

One of the things you see-- there's lots of examples. But when you have things on a page, you never want them super scrunched up. You always want a default spacing. And so there is a default spacing. And you've got some nice descriptions of that here as well, showing how I can change those things and what they all mean.

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 tweak yourself. Defaults are great. And when you need to, you can use Tailwind directly as well, at any piece on any component. And one of those examples I recognized as actually being from Daisy UI.

So Daisy UI is another really nice library. So this is kind of bringing in some of the best bits of multiple frameworks under a single unified banner. Yeah, and the themes all sync together. And you might see that code rendering. This code rendering is using HighlightJS. So that's another thing that's integrated in as well.

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 just black text, the reason it's got the syntax highlighting and the copy button, all that is-- So this site, of course, is written in FastHTML and Monster UI itself.

I get all these nice little things. Like when I hover over something, I get a little 3D effect. Actually, 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, there it is, cardT.hover. OK, and that's the class.

And just people not so familiar with FastHTML, we say CLS rather than CLASS, because class is a reserved word in Python. We should also mention that Franken UI, in turn, is built on top of something called ShadCN. ShadCN, again, looks very similar. ShadCN is different, though, that it's built with and for React.

So Franken UI is kind of nice. It extracts it out into something that everybody can use, regardless of what framework you use. And so we should also say a lot of gratitude to ShadCN for inspiring a whole lot of this, which obviously we and Franken UI have entirely taken their inspiration, even for the examples and for the components and so forth.

So that's been amazing. Yeah, it's interesting, these-- I mean, there's a lot of stuff in this documentation here, which I really like. So the way we can see all the different kinds of semantic HTML you can use, and if we can see highlighting and citing and quotes and dates all mapped to a mark to highlight and a quote to quote and a cite to cite.

This kind of semantic HTML is not so common nowadays, but 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 useful to note-- some people might recognize this, but this mark element, and this block quote, and this cite element, and this EM for emphasis.

Like, I didn't make these up. These are part of the HTML spec that I'm kind of building on top of. Oh, so I shouldn't have clicked on that. Let me actually do that. So we're doing cite. Here we are, right-click, Inspect. Here it is, cite. Block quote. Yeah, address.

And so it's nice, right, because I think people spend a lot of time deciding what elements to put into HTML. And so being able to use those is probably going to cover a lot of the things that you actually need. 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. And I see here you've got all this stuff added to it, 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.

Whereabouts is it? Keyboard shortcut. There we go. Which is pretty cool. That's right. I mean, the goal for me is to have it that if you just use the defaults almost all the time, you get something that looks reasonably good. And that lets you build nice and quickly, and then spends your time on the bits of UI that are really important for differentiators or interesting.

Kind of gets you 80% or 90% of the way there, and maybe 5% or 10% of the time. And because also we are using fast HTML, we can add the live equals true, which means that we can then change payment method to payment. And you can see it automatically changes without me having to refresh there.

Change it back again. Press Save. It's come back again here. And I think that's kind of nice for experimenting with these little changes. So for example, maybe I wanted to change the border to make it a bit thicker. Would border 4 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 3. So you can kind of-- that's interesting. There is no 3. 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.

Is that something you use a bit as you're doing it? You kind of-- Yeah, I always use it, and I'm always doing it. There's things like, if you're doing UI kind of all the time and using Tailwind a lot, you might remember that there's a border 2, and a border 1, and a border 4, but not a border 3.

I don't use it enough to have that memorized. And so this quick iteration is critical. Also things like DiceBear, which is an icon service. I can see you're using that to get these automatic icons, which is very convenient for quick prototyping. 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-- in fact, 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.

And I did want to mention, actually, one thing that I love that you've done with MonsterUI is that you're following the LLMs.txt standard. And so I did actually grab this really nice list of examples and so forth, which I added to Visual Studio Code. And I do find that I could grab this and say, change this example to use a left-aligned div container instead of a grid.

And yeah, it's there, which is cool. So that's a really nice feature for me, is that I can use LLMs to help me. And because it's built on top of Tailwind, the stuff that LLMs already know and that designers already know about Tailwind, you can still take advantage of.

Although perhaps the thing I like best, though, is I don't necessarily know about what options to use for text. So your classes, you've done as enums. So I can select from options or my different lower-level text types-- capitalize, lowercase, muted. Again, I can choose from. And that works pretty much everywhere.

So it's cool that for a class, you can have not only a string, but you can also have these enums you've built, tuples of them, tuples of enums and strings, just strings. It makes it really-- You can add them together, too. You can use addition if you don't like tuples.

Uh-huh, yeah. Yeah, I think that's pretty amazing. So this idea of a server-side kind of rendered library, it's pretty new. 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, without losing any of the flexibility.

So you've got the full power of all HTML, all Tailwind, all DAISY, all HTTP. It's not like the kind of dashboard-type things which give you your own little mini-language. And so, Isaac, I know you've been building all kinds of stuff, like a kind of new type of dynamic blog from scratch.

You've built stuff for our legal team. Yeah, what's your experience been like of using FastHTML and HTMX and Monster UI, this kind of very new and fairly revolutionary approach to writing web apps? Well, it's been great. I actually always wanted to do a lot of web app development because sharing what you build with other people is a lot of fun.

It's pleasant. And it's kind of essential if you want to have something commercially viable. Someone else has to see it. And web apps is one way to do that. I had a really tough time with trying to set up stuff in prior frameworks. It all felt very complicated, lots of config files, lots of build steps, a hard time iterating.

I found FastHTML a lot easier. I found the styling was still challenging for me in FastHTML, which is when I started building Monster UI. And yeah, it's been great. I mean, I never would have imagined. I was having trouble with some of these services to create a Twitter threat.

And I found some things frustrating. And I built a SQLite-backed Twitter thread generator that I can store stuff in and change things with in a couple of hours. I built the blog in a couple of hours. And it's styled with Monster UI and Tailwind. And yeah, it's been great.

HTMX simplifies things a ton as well. It takes a little bit to get used to, a paradigm. But once you put a little bit of time in, it really makes a lot of sense. And it allows you to simplify your code and move really fast and have it look great as well.

So it's been great. So to get started, folks can just pip install Monster UI. And 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 localhost colon 5001, play with it, change things, see what happens. And then the other thing I do is 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 inspires ideas around things I could build or changing things I've already built. Any other suggestions for folks looking to get started with FastHTML and Monster UI, Isaac? I think that covers it. I mean, we have the FastHTML gallery, which has a lot of HTMX examples to understand a little bit more about HTMX, which is helpful for FastHTML.

But yeah, I'd say just kind of start playing with stuff, start building stuff. I think going through the API reference for Monster UI is particularly important. It's not an API reference like you go through and you just see doc strings where it's hard to tell how it renders. There's examples built in that are practical.

And you can play with them. You can try and shrink them and see if they're responsive automatically. You can 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 that really helps to understand what's there is the visual aspect of the docs as well.

And all of these examples are actual running web applications that you can play with. They're not static images, so for example-- Yeah, and with that, you can be confident that the code on the left works because the code on the left is what's running. That's it. That's the whole code for infinite scroll, which is crazy.

And so yeah, OK, so I mean, that's not Monster UI, but it's kind of Monster UI and FastHTML go hand in hand. And these kind of-- nice to see some of these Daisy UI examples, 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 what they feel is missing, what they want to build. So yeah, reach out and-- Open source project on GitHub so people can add issues, PRs for new components, and so forth. Yeah, can't wait to see what people built with Monster UI.

So congrats, Isaac, for the release. And thank you for the folks behind ShedCN, FrankenUI, and Daisy. And thanks for your time today. Yeah, and thank you for your help and support. Not just today, but throughout the whole process. This has been great. And look forward to seeing what everyone builds soon.

Thank you, sir.