Skip to content

UI Framework

The custom UI framework in Lariv revolves around representing HTML trees as composable Python objects using the base Component class.

The Base Component

Every UI element inherits from components.base.Component.

class Component:
    def __init__(
        self,
        uid: str = "",
        classes: str = "",
        role: List[str] = None,
        children: List["Component"] = None,
        key: str | None = None,
        static_value: Any = None,
        url: Callable | str | None = None,
    ):
        ...

Instead of defining generic HTML, these components provide rich abstractions.

  • uid maps to standard HTML element IDs, useful for targeted internal DOM mutations via HTMX out-of-band swaps.
  • key binds the component to an associated data model field.
  • url accepts a string or a callable for dynamic endpoint generation.

Tree Manipulation

The base component abstracts basic DOM operations. Once a tree is instantiated, you can surgically mutate it prior to rendering:

  • component.find(uid) - Traverse the tree to find an element.
  • component.append(target_uid, component) - Append a child to an existing node.
  • component.insert_before(...), component.insert_after(...), component.replace(...), component.remove(...)

Security

Every component provides a built in declarative role check via check(request). When components are structurally evaluated via render(), any component lacking authorization quietly prunes itself and all descendants from the rendered HTML.

HTMX and Partial Renders

Views automatically detect HTMX target contexts using LarivHtmxMixin.

When an HTMX request requests a replacement of a specific target_uid, calling component.render_partial(target_uid, request=request) on the root of the UI tree will efficiently walk the tree, locate the targeted component, and strictly evaluate and return only that specific HTML scope.