DEV Community

YOUNESS MOJAHID
YOUNESS MOJAHID

Posted on

Introduction to Probo-ui — Write HTML Entirely in Python series Part: 03

#html #tutorial #python #webdev

Tag Classes — Building a Server-Side DOM

While tag functions return strings immediately, tag classes build a Server-Side DOM (SSDOM) — a live tree of nodes you can navigate, search, and mutate before rendering.

Creating SSDOM Nodes

Import uppercase classes:

from probo import DIV, H1, H2, P, SPAN, UL, LI, A, STRONG
Enter fullscreen mode Exit fullscreen mode

Use the same content + kwargs pattern:

page = DIV(
    H1("Dashboard"),
    P("Welcome back, ", STRONG("Admin"), "!"),
    UL(
        LI("📊 Analytics"),
        LI("👥 Users"),
        LI("⚙️ Settings"),
    ),
    Class="dashboard",
    Id="main-page"
)
Enter fullscreen mode Exit fullscreen mode

Rendering

Call .render() to convert the entire tree into an HTML string:

html_string = page.render()
print(html_string)
Enter fullscreen mode Exit fullscreen mode

Output:

<div class="dashboard" id="main-page">
  <h1>Dashboard</h1>
  <p>Welcome back, <strong>Admin</strong>!</p>
  <ul>
    <li>📊 Analytics</li>
    <li>👥 Users</li>
    <li>⚙️ Settings</li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Why Use Classes Instead of Functions?

Tag classes give you tree powers that functions can't:

# Access parent-child relationships
page.first_child        # → the H1 node
page.last_child         # → the UL node
page.get_child_count()  # → 3

# Search the tree
heading = page.css_selector("h1")

# Mutate the tree AFTER creation
page.add(P("New paragraph added later!"))
Enter fullscreen mode Exit fullscreen mode

When to Use Which?

Use Case Tag Functions Tag Classes
Simple static HTML ✅ ✅ Overkill
Need to modify after creation ❌ ✅
Streaming large pages ✅ ✅
HTMX partial updates ✅ ✅
Data pipeline binding ❌ ✅

Rule of thumb: Use functions for leaves, classes for containers you might need to modify.

Top comments (0)