A Flexbox Style Layout Manager for Py5

[TyTodd]

I've chosen to build a lot of my projects using processing. The ease of use and flexibility makes it a great prototyping tool, but sometimes its too flexible. One painpoint I often run into on every project is building the infrastructure to lay everything out in a neat and organized way, and its times like this I wish py5 had something like flexbox. I know JavaFX is a thing but sometimes that is too overly complicated for what I want to do and it doesn't flow very nicely with the other py5 rendering tools. So I finally had enough and I built a flexbox layout mananger for py5 using the same layout engine that powers React Native, yoga.
Wasn't sure if a layout manager would be that useful for processing but I've actually enjoyed using it so far. It allows you to control styling and layout in the draw loop with python logic.

count = 0
def draw():
    global count, last_print_time
    count += 1
    with layout:
        with Div(style=Style(background_color=(127*sin(count/10), 0, 127*cos(count/10)), width=count//2, height="50%")):
            with Div(style=Style(background_color=(0,255,0))):
                Div(style=Style(background_color=(255,0,0)))

It also integrates very well with the normal py5 flow. And you can create custom components (just like in React) to embed your animations in the layout.

class CustomSketch(Element):
    def __init__(self, circle_radius: int, circle_color: tuple, **kwargs):
        super().__init__(**kwargs)
        self.circle_radius = circle_radius
        self.circle_color = circle_color

    def draw(self):
        with self.canvas(set_origin=False, clip=True):
            py5.fill(*self.circle_color)
            py5.circle(py5.mouse_x, py5.mouse_y, self.circle_radius)
...
def draw():
    py5.no_stroke()
    global count, last_print_time
    count += 1
    with layout:
        CustomSketch(circle_radius=100,
                        circle_color=(255,0,0),
                        style=Style(background_color=(255,255,255),flex=1), width=width_, height=height_)
        with Div(style=Style(background_color="cyan", width="100%", height="50%", justify_content="center", align_items="center", align_content="center", font_size=40), name="div2"):
            Text("Woah look at that circle go!!!!")

If this is at all interesting to you, you think its useful, or you are interested in contributing feel free to respond to this thread or reach out on the project's github.
You can find the project here:
And here is the pypi page:

[hx2A]

Wow, @TyTodd , this is really amazing, I am thrilled that you made this! I just gave you your first github star. I love your tool-building creativity. It is so exciting for me as the author of the library that someone will come along and do something neat that I never would have thought of.

Something I've wanted to develop is the opportunity for others to make py5 extensions such as this so there can be community supplied libraries, similar to what Processing and p5.js have. This is the first one and I can definitely see myself and others using this.

[TyTodd]

Thanks for the star! I wasn't sure at first if what I was building was even useful, but the seal of approval from the authors is way more than I hoped for going into this. Also thanks for creating this library like I said I've used your library for a lot of projects including this project where I built Mario Kart irl for a popular YouTube channel. The extensions module sounds neat would love to see it in the future.

[hx2A]

Also thanks for creating this library like I said I've used your library for a lot of projects including this project where I built Mario Kart irl for a popular YouTube channel.

Wait, you built Mario Kart IRL with py5??? That is such a cool project. I'd like to hear more about that. This is is music to my ears. So thrilled that py5 helped contribute to something like this.