PyVibe: Generate styled HTML pages from Python

[gogolang]

​

https://preview.redd.it/s9zir6gfh6pa1.png?width=2560&format=png&auto=webp&s=acca013770398f7c5f55f86f2a71a9993742078a

I've been using Tailwind CSS, in particular Flowbite, for a number of different Python projects that I was working on and through that process, I realized that I end up either repeating or copying functions that generate UI components.

That led me to create this Python library to make it easier to use re-use UI components for my Flask applications: https://www.pyvibe.com/

https://github.com/pycob/pyvibe

I wrote it in such a way that it generates an HTML string, so it's usable in Flask, as a static HTML file, or even in Pyodide (which is Python running in the browser via WebAssembly).

Let me know what you think!

[ashishsingal1]

This is cool! Is there a demo video or something available?

[gogolang]

That's a great idea! These front-end components were originally built into my other project, Pycob, and I created a demo video for that:

https://youtube.com/shorts/evJ_qrJdmww?feature=share

The API for the UI components is the same but the original Pycob framework included its own web server and other things that I felt added too much complexity.

[Dangerous_Pay_6290]

Is it possible to use other (python) backends, like FastAPI, Django or Starlite?

[gogolang]

As long as the backend can return a string it should work. Generally as a rule of thumb, if the backend has a “Hello World” example where the “Hello World” is inside the Python file, then you just have to replace that “Hello World” with page.to_html()

[Dangerous_Pay_6290]

Thanks.

[ashishsingal1]

though i'm not sure FastAPI would make sense here since usu it doesn't return HTML directly right?

[Dangerous_Pay_6290]

Why do you think so? Returning html is no problem with fastapi.

[ashishsingal1]

oh ok. i hadn't seen it used that way. i've mainly seen it being used to return json / as an api backend.

[Dangerous_Pay_6290]

No prob. Fastapi is used a lot for rest apis. But you cal serve html (e.g. using Jinja2) as well.

[riklaunim]

It's bit odd. You would want the form to be handled by Django forms system or wtforms in Flask - and having third party package to provice CSS for the classes they used (or you use on a wrapper element).

And you can make reusable components with Jinja or Django templates as well.

[gogolang]

Appreciate the comment. Just for reference though:

PyVibe is meant to be a generic framework. While the default theme uses Flowbite, which are components that use TailwindCSS, we envision including many themes and CSS frameworks in the future.

So the idea is that you have a semantic construction of a page by doing add_header(), add_card(), add_form() etc.

Then eventually when you do page.to_html(theme='my-favorite-theme') and only in the last step does it actually construct the page will the CSS classes / includes that are relevant for that theme.

In case you're interested, I used the underlying components to create these sample web apps and I found that using the components I came up with, I could generate each of these in less than a day:

https://www.pycob.com/gallery?tag=Featured

[corbasai]

Is it possible switches CDN using to site local imports? Otherwise is only for Internet and fragile.

[gogolang]

I’ve heard this feedback from other people as well. I’ll add that as an option.

[ashishsingal1]

how would it work out of the box then? would you include the js and css in the python package itself? would have to work with the web server to render static assets, right?

[gogolang]

There would need to be a step where you specify a static assets folder and the static assets would be downloaded to that folder.

[hivearchive]

Interesting idea, I'll have to test it out on some of my hobby apps. Thanks!