Pyodide HTML

HTML elements for pyodide, implemented as Python functions.

Quickstart

import micropip

micropip.install('pyodide-html')

import pyodide_html as html

ele = html.h1('Hello, world!')

js.document.body.appendChild(ele)

Motivation

In pyodide, you can create HTML elements using js.document, but it is extremely verbose. For example, a range input would look like:

import js

ele = js.document.createElement('input')
ele.type = 'range'
ele.min = 0
ele.max = 50
ele.value = 25
ele.step = 1

With pyodide_html, you can do all this with a single function call:

import pyodide_html as html

ele = html.input(type="range", min=0, max=50, value=25, step=1)

Usage

All the HTML tags are implemented as Python functions. For example, html.h1 creates a <h1> element, html.input creates an <input> element, and so on.

The signature of the function is:

html.element(*children, **props)

which is equivalent to calling <element **props>*children</element>.

Every element has an add method that lets you add new, or update existing children or props. It has the following signature:

html.element(*children, **props).add(*children, **props)

This is convenient if you want to initialize an element with certain props, then add/update the children or props later using add. For example:

import pyodide_html as html

# initialize your element
ele = html.div(className="container")

# Add children
ele.add(
    html.h1("My header"),
    html.p("Some paragraph here"),
    # ...
)

# You can add new props:
ele.add(style="background-color: lightgray")

# You can also update existing props:
ele.add(style="background-color: lightblue")

You can also chain add calls:

ele.add(style="...").add(className="...").add(html.div("a child"))

Note that add modifies an element in-place.

Documentation

See REFERENCE.txt (GitHub Link) for the API reference.

Contributing/Development

After cloning this repo, start with:

pip install -r dev-requirements.txt

You can then make the desired changes

xhluca / pyodide-html