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
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"
)
Rendering
Call .render() to convert the entire tree into an HTML string:
html_string = page.render()
print(html_string)
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>
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!"))
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.
