HTML Builder (el)

Build HTML with chaining syntax β€” attributes first, children after:

python
el.div(cls="card p-4 rounded shadow")(
    el.h2(cls="text-xl font-bold")("Title"),
    el.p(cls="text-gray-600")("Description")
)

Special Attributes

PythonHTML Output
cls= / className=class="..."
html_for=for="..."
x_on_click=x-on:click="..."
x_bind_href=x-bind:href="..."
The style attribute can be a string or a dict: el.div(style={"display": "flex"})()

Data Attributes & Custom Tags

You can pass any custom data-* attribute by using kwargs. You can also create entirely custom HTML tags using el.tag().

python
# Data attributes
el.div(data_user_id="123", data_role="admin")("Profile")
# Output: <div data-user-id="123" data-role="admin">Profile</div>

# Custom tags
el.tag("my-custom-element", cls="awesome")(
    el.span()("Inside custom element")
)
# Output: <my-custom-element class="awesome"><span>Inside custom element</span></my-custom-element>

Self-closing Tags

python
el.input(type="text", name="username")()
el.img(src="avatar.png", alt="Avatar")()
el.br()
PreviousRoutingNextTailwind CSS