Probo UI : Future of Python based UI

Python Rendered Objects for Backend-Oriented User Interfaces (Probo-UI).

Probo UI stands for Python Rendered Objects for Backend-Oriented UI is A Python-Native server-side Template Rendering Framework and Meta-framework for Django.Write Type-Safe Template Components, structure in HTML and styling in CSS with extra Logic in pure Python.that transforms Python objects into performant HTML/CSS with help with HTMX, creating a seamless bridge between Django's backend logic and the frontend interface. No context switching. No template spaghetti.

📣 Version 1.4.0 is Live!

Probo UI has officially reached stable v1.3 status. It is a backend-first UI framework.

Why Probo?

• use your python skill in making dynamic UI templates.
• Explicit, readable ad reusable layout
• Easier refactoring than HTML templates (it's python)
• IDE-friendly & type-safe

For the deeper reasoning behind these choices, see Purpose & Philosophy ↓

⚡ Purpose & Philosophy

Traditional Django development often requires context-switching between Python (views.py) and HTML/Jinja (templates/). Logic gets split, and typos in templates cause runtime errors.

Probo UI solves this by bringing the Frontend into Python:

🧠 Type-Safe UI: Write HTML in Python. If your code compiles, your HTML is valid.

🎨 Just-In-Time (JIT) CSS: Styles live with components. Probo UI scans your active components and generates a minified CSS bundle on the fly. No unused styles.

🛡️ Logic Gates: Built-in State Management. Components automatically hide themselves if required data (like user.is_authenticated) or permissions are missing.

🔌 Framework-Agnostic & Django-Ready: Build your UI completely standalone, or drop it into a Django project. When Django is present, Probo UI automatically enables deep integration with Django Forms and Requests via the RDT.

Some ProboUI Architecture & Concepts

• Push & Clear: When creating HTML elements via the Element object, the final output is pushed to the element attribute. The content and attributes used in that specific session are then cleared to maintain a clean state. To allow for cumulative processing, arguments can be passed to the class to "stash" previous results, serving as the content for the subsequent execution chain.

• SSDOM (Server-Side DOM): Unlike traditional string-based templates, ProboUI treats HTML as a live object tree in Python. This allows for direct manipulation of the structure, attributes, and children of a component after its definition but before it is finalized into a string.

• State Management: Enforces strict rendering constraints on components and elements via ComponentState and ElementState. To render an element, a props dictionary must be passed and validated against the expected schema; the rendering only proceeds if the state is valid.

• CSS Sharing: Performance optimization where components can share the same CSS objects. This prevents the definition of redundant style objects and reduces memory overhead during large-scale renders.

• Shared Execution: An internal efficiency pattern where every HTML tag is generated by the same unified logic under the hood, ensuring zero logic duplication and a consistent output format across the entire framework.

• Head Registry: Instead of manually managing meta, link, and script tags, ProboUI uses a centralized registry. Developers use dedicated methods to register head elements, which the engine then constructs and optimizes automatically.

• Template Switching: The Template engine allows you to construct a page and then dynamically modify or rebase its structure based on an entirely different template hierarchy, providing extreme flexibility in multi-layout applications.

• Base Template: Provides a standardized, overrideable page structure that facilitates rapid development by allowing developers to inherit and manipulate a global foundation without starting from scratch.

• Attribute Managers: Utilizes the ElementAttributeManipulator to manage an element's attributes. This creates a clean separation of concerns between the element's core logic and its HTML attribute state.

• SDH (Static/Dynamic Hierarchy): Employs StaticData and DynamicData classes to resolve content within ElementState. The hierarchy prioritizes data in the order of Dynamic > Static > Content, which is used when binding these values to specific attribute values.

• URL Component Mapping: Implemented via the TemplateComponentMap (TCM), this concept maps components to specific URLs. It allows for effortless discovery and access via URL names or slugified versions, bypassing manual route registration.

• Django Syntax: Provides the ability to generate ProboUI output formatted as standard Django template syntax, allowing ProboUI components to be seamlessly embedded into existing .html templates within a Django environment.

• HTMX Integration: Native support for creating HTMX-based elements, enabling high-speed, dynamic UX updates (partial page refreshes) without writing custom JavaScript.

• Routing Engine: A built-in, Bottle-based server designed for rapid prototyping and testing of Python-based static web pages before production deployment.

• Configs & Shortcuts: Utilizes specialized data classes to group configuration info for each shortcut execution, streamlining the API and reducing repetitive boilerplate code.

• Component Styling: By linking CSS selectors directly to components and verifying their existence in the template, ProboUI prevents the delivery of "dead CSS" while still fully supporting standard CSS cascading.

• Bootstrap 5 Support: Native integration for BS5 design tokens and components, allowing developers to implement professional layouts using familiar utility classes and components with zero extra configuration.

• Probo-CLI: A command-line interface used to scaffold custom ProboUI packages as static web apps. It also enables "Django Mutation," automatically injecting the necessary Probo directories (components/, pages/, probo_tcm.py) into existing Django projects.

• proxy element: The ProxyElement provides a mechanism to embed external logic or third-party objects directly into the SSDOM. It facilitates the integration of arbitrary objects by accepting the object and an optional render callable, which is utilized if the object does not possess a native render method.

• Style Manager: The StyleManager helps adding inline styling to HTML onbjects like in js style with remove_style/add_style methods.

📦 Installation

        pip install probo-ui

🚀 Quick Example

Here is how you implement a reusable component in probo-ui:

from probo import (
    li,div,h1,ul,strong,
)
def user_card(username):

    user_id = f'User_789{username}1323'

    user_info = {'practical-info':['python','javascript','docker','django']}

    li_el = [li(info) for info in user_info['practical-info']]

    card = div(
        h1(username,strong(user_id)),
        ul(*li_el),
        Class='card',
        style='color:red;'
    )

    return card

# Render it
html= user_card("Admin")
print(html)

Output:

<div class='card'><h1>Admin<strong>User_789Admin1323</strong></h1><ul><li>python</li><li>javascript</li><li>docker</li><li>django</li></ul></div>

in case of permission/authorization:

from probo.components import (
    Component,ComponentState, ElementState,StateProps,
)
from probo import (
    div,h1,strong,ul,
)

def user_card(username):

    props = StateProps(required=True,prop_equals={'username':'admin'})
    
    user_id = f'User_789{username}1323'
    
    user_info = {'practical-info':['python','javascript','docker','django']}
    
    li_el = ElementState('li', d_state='practical-info',i_state=True, strict_dynamic=True,props=props,)
    
    user_comp_state = ComponentState(
        li_el,
        d_data=user_info,
    )

    card = Component(
        name="UserCard",
        template=div(
            h1(username,strong(user_id)),
            ul(li_el.placeholder),
            Class='card'),
        # Inject Data
        state=user_comp_state,
        props={'username':username}
    )

    return card

# Render it
html= user_card("Admin").render()

html2= user_card("admin").render()

Output:

• print(html)

    <div class='card'><h1>Admin<strong>User_789Admin1323</strong></h1><ul></ul></div>

• print(html2)

    <div class='card'><h1>Admin<strong>User_789Admin1323</strong></h1><ul><li>python</li><li>javascript</li><li>docker</li><li>django</li></ul></div>

🚀 Get Started →

💬 Community & Support Need help? Have a question that isn't a bug? Join our Discord Server to chat with other probo-ui developers.