MonsterUI: Python library for building front end UIs quickly in FastHTML apps

FastHTML moves back closer to the foundations of the web. The functional components are a direct 1-1 mapping of m-expressions to HTML tags (i.e children are positional parameters, attributes are named parameters). There's nothing new to learn there if you know HTML already. I've been using functional components for web apps for >25 years, including building Fastmail with them -- they work very nicely for me at least, and are standard in most functional programming communities. I like being able to treat my components directly as plain objects directly in python (including using the python debugger, profiler, etc, and using IDE standard python navigation), rather than having to switch to a separate templating language with its own way of doing things.

MonsterUI is mainly a FastHTML wrapper around FrankenUI -- a pure js/css/html version of shadcn. I like using native components like this, instead of needing special react/vue/svelte/etc framework libs. FastHTML's functional approach make server-rendered components feel a lot like jsx in react (jsx behind the scenes is a wrapper over a similar data structure to FastHTML's, but js doesn't natively provide the needed m-expression syntax, hence the need for jsx).

For newer devs that never really learned native HTTP/HTML ways of developing for the web, and have lived in the react/nextjs/etc world, FastHTML will seem very odd. But for anyone that grew up with Perl, PHP, etc, writing plain server handlers that deliver HTML directly to the server, FastHTML will feel quite natural. They are two different approaches, each with their pros and cons. At Answer.AI we've written a lot of useful apps in FastHTML now, including SSE and websockets, rich client interactions, etc, and it's been working nicely for us.

    icons = ("mail", "linkedin", "github")
    return Card(
        DivLAligned(
            DiceBearAvatar(name, h=24, w=24),
            Div(H3(name), P(role))),
        footer=DivFullySpaced(
            DivHStacked(UkIcon("map-pin", height=16), P(location)),
            DivHStacked(*(UkIconLink(icon, height=16) for icon in icons))))

The provided Python looks even more difficult to understand than typical HTML/CSS. DivLAligned? DivFullySpaced? What if I only want it partially spaced? DivHStacked? Oh no... Flex and Tailwind already do this, it's trivial, and crucially online documentation is plentiful and AI understands it just fine. This seems to be reinventing Tailwind with different names.

But look at the code for a table: https://monsterui.answer.ai/api_ref/docs_tables

It's just exactly the HTML but written weirdly in Python. This isn't higher level, this is the exact same abstraction level as HTML already gives you!

I am so frustrated with this stuff. I developed an ACTUAL higher level abstraction for tables in iommi (https://docs.iommi.rocks/tables.html) and it boils my blood when people call this stuff "higher level". It's not. Not even close.

So this is the stack you need to know in the real world when debugging an application made with it.

You could say that generative AI is an abstraction over all that. Or in other words I’m saying that’s a lot of edge cases to debug. Sorry to be sceptical.

On the other hand, I have been burned by every similar framework I've tried (e.g. Dash by plotly, many others) when I *need* to tweak one small thing in the frontend, and simply can't because of the way the framework functions. In which case, I have had to rewrite the feature from scratch. So I have found these tools okay for internal tools or proof-of-concept stage, but inadequate for real applications with real users where you need to quickly iterate on feedback in directions you cannot predict in advance.

Route functions consume a State object (arbitrarily whatever type you want) and return a Page object, which has the new State and a list of component objects, which are dataclasses that can be serialized to strings of HTML. We provide functions for Button, CheckBox, BulletedList, etc.

So far, it's been pretty effective for our CS1 course to let students develop nicely decomposed web applications in just Python. We can deploy through Github Pages thanks to our custom Skulpt bindings, and it even makes unit testing quite easy.

Components can be mixed and matched, Bootstrap v5 components is already in the works.

I already have a Storybook-like tool which can render and showcase such components.

Anyone want to vibe code that? I could use it for Django, instead of the horrible Django template language/HTMX/Tailwind/DaisyUI/etc..

I never want to write HTML/CSS/JS ever again. Give me Python UI components!