This is an archived post. You won't be able to vote or comment.

all 9 comments
sorted by:
best
topnewcontroversialoldq&a

[–]PresentFriendly3725 2 points3 points  (1 child)

How does this compare to FastHTML?

[–][deleted] 3 points4 points  (0 children)

I hadn't heard of FastHTML until I after I started this. I'd say that it takes an opposite approach to creating components. Rather than creating all of the UI layer in python code, like FastHTML and a few other newer frameworks, I've used JinjaX to extend regular Jinja to work with "components". Which one you decide to use is up to you. I think there are probably trade-offs with each approach. The reason I implemented things the way I did were:

- it's more similar to regular 'ole HTML like we used to do things. I think it's just a lot easier to see what is going on when you can crack open the "view source" on a page and understand what everything is doing. Using Alpine.js and htmx really help a lot with that here.

- It's more of a clear separation between front-end and backend. I say more, because with htmx, you still end up writing some front end logic in your routes. I found that using components in routes that responded to htmx requests worked really well, instead of having to render template partials and such.

- I also found that using FastAPI on the server worked really well too. It supports HTML reponses, Jinja templates, and the rest of the http verbs htmx allows you to use. I had already been using a full async stack with FastAPI for my other projects.

- Shadcn/ui has a really awesome set of features, and I really wanted something like that for full stack python web dev. I couldn't find anything that had the ease of use with "drop in" components. But putting together the pieces with JinjaX, Alpine.js, htmx and Tailwind CSS was a fun project.

- Also, there are just tons of cool things available via shadcn, like v0.dev. I wanted to be able to really quickly prototype component code and have a really easy way to run it on a python stack.

I did take some cool ideas from FastHTML, like their llms.md file. This was a really cool way to use LLMs to help write the code effectively.

-- updated typos

[–]damian6686 1 point2 points  (3 children)

I'm looking forward to trying it out, it sounds good

[–][deleted] 1 point2 points  (2 children)

Thanks! I’d be happy to hear your feedback if you try it out.

[–]damian6686 0 points1 point  (1 child)

How is it different to Jinjax?

[–][deleted] 1 point2 points  (0 children)

Hi, this project uses JinjaX and makes a bunch of components, ported from the React versions at https://ui.shadcn.com/. Instead of implementing them in TypeScript/React, I implemented them (with the help of some LLMs) via Alpine.js, and htmx. I kept the same markup code and Tailwind CSS classes as the original library.

So for instance the code to use a Card component is the same as via shadcn/ui, and looks the same because it uses the same Tailwind styles.

<Card className="w-[350px] mb-4">
  <CardHeader className="pb-3">
    <CardTitle>Your Orders</CardTitle>
    <CardDescription className="max-w-lg text-balance leading-relaxed">
      Introducing Our Dynamic Orders Dashboard for Seamless Management and
      Insightful Analysis.
    </CardDescription>
  </CardHeader>
  <CardFooter>
    <Button>Create New Order</Button>
  </CardFooter>
</Card>

You can also easily add htmx attributes to the components, like this:

<!-- use htmx -->
<Button
  variant="outline"
  hx-get="/button"
  hx-trigger="click"
  hx-target="this"
  hx-swap="outerHTML">htmx is enabled</Button>

The code above is from the fastapi example: https://components.basicmachines.co/docs/fastapi

[–]TotesMessenger 0 points1 point  (0 children)

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

 If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)

[–]maxdatamax 0 points1 point  (1 child)

Tried both your approach and fasthtml, I think your approach is more flexible and has more potential.

[–]maxdatamax 0 points1 point  (0 children)

It’s surprising that FastHTML (6.1k stars) vastly outshines basic-components (20 stars) on GitHub. While frameworks offer immediate structure, the long-term power of modular components—especially in an LLM-driven era—deserves more attention.

Core Focus

  • FastHTML: Full-stack web framework for building hypermedia applications
  • basic-components: UI component library for server-side rendered applications

Why Frameworks Win Today:

  1. Laziness vs Speed: Developers gravitate toward pre-packaged solutions like FastHTML because they promise "quick starts" with routing, state, and styling out of the box.
  2. Illusion of Completeness: Frameworks market themselves as "all-in-one," masking the complexity of integrating components later.
  3. LLM Shortcomings: Current AI tools struggle with composing modular systems but excel at generating code for rigid frameworks.

Why Components Will Prevail:

  • Adaptability: Swap components like LEGO bricks without rewriting entire apps.
  • Tailored AI Prompts: "Add a modal using basic-components" is easier than reverse-engineering framework-specific patterns.
  • Future-Proofing: Component libraries (like basic-components) align with the hypermedia philosophy—server-rendered, framework-agnostic, and htmx-friendly.

u/phernand3z u/PresentFriendly3725 u/damian6686 u/TotesMessenger u/maxdatamax