Active prototype · built in public

Python UI in the browser.

Build reactive interfaces with Python components, precise DOM updates, client-side routing, and the scientific ecosystem-without adopting a JavaScript UI framework.

PythonComponents and application logic in one language

Fine-grainedUpdate the binding that changed, not a virtual tree

Browser-nativeDirect DOM and Web API access through PyScript

App-readyRouting, resources, forms, lifecycle, diagnostics

01 / Familiar by design

State becomes interface. Nothing in between.

Swipe through three real components. Every output is rendered by the state, values, labels, and interactions visible in its highlighted Python source.

tasks.py

from framework import For, button, computed, div, signal

tasks = signal((("Ship landing page", True),
                ("Test the PWA", False),
                ("Write the guide", False)))
filter_by = signal("All")
visible = computed(lambda: tuple(
    task for task in tasks()
    if filter_by() == "All" or task[1] == (filter_by() == "Done")
))

def TaskList():
    return div(
        For(visible, key=lambda task: task[0], render=lambda task:
            button("✓" if task[1] else "○", task[0])),
        div(lambda: f"{len(visible())} tasks shown"),
    )

Live framework output

Today

Launch checklist

3 tasks shown

weather.py

from framework import For, button, div, signal

forecasts = (("Berlin", "18°", "Cloudy", "64%"),
             ("Lisbon", "27°", "Sunny", "39%"),
             ("Oslo", "11°", "Rain", "81%"))
selected = signal(0)

def WeatherCard():
    return div(
        For(forecasts, key=lambda day: day[0], render=lambda day:
            button(day[0], on_click=lambda _: selected.set(forecasts.index(day)))),
        div(lambda: forecasts[selected()][0]),
        div(lambda: forecasts[selected()][1]),
        div(lambda: forecasts[selected()][2]),
        div(lambda: f"Humidity {forecasts[selected()][3]}"),
    )

Live framework output

Berlin

18°

Cloudy

Humidity 64%

cart.py

from framework import For, button, computed, div, signal

cart = signal((("Field Notes", 18, 2),
               ("Canvas Tote", 24, 1)))
total = computed(lambda: sum(price * qty for _, price, qty in cart()))

def change(name, step):
    cart.set(tuple((item, price, max(0, qty + step))
                   if item == name else (item, price, qty)
                   for item, price, qty in cart()))

def ShoppingCart():
    return div(
        For(cart, key=lambda item: item[0], render=lambda item:
            div(item[0], f"${item[1]}")),
        div("Total", lambda: f"${total()}"),
    )

Live framework output

Your cart

Studio goods

Field Notes$18 each

Canvas Tote$24 each

Total$60

02 / The complete toolkit

Small primitives. Serious applications.

The framework covers the state, rendering, lifecycle, navigation, and debugging concerns needed to move from an interactive widget to a maintained product.

01 - STATE

Signals & computed values

Track dependencies automatically, derive state lazily, group changes with batches, and run scoped effects.

02 - DOM

Declarative components

Compose native elements through Python builders with reactive text, classes, attributes, properties, and events.

03 - DATA

Resources & forms

Model async loading, failures, field state, validation, and submission without rebuilding those conventions per screen.

04 - ROUTING

Client navigation

Prefetch route shells, preserve the active Pyodide runtime, update history, and await teardown before navigation.

05 - LIFECYCLE

Cleanup that scales

Own event proxies, effects, async tasks, media sessions, and keyed row cleanup within component scopes.

06 - DX

Diagnostics built in

Inject browser capabilities, collect structured runtime diagnostics, and mark real navigation and render performance.

03 / How it works

Python all the way to the DOM.

PyScript boots Python in WebAssembly. The framework gives that runtime a precise reactive layer, while a narrow host boundary keeps browser-only capabilities explicit and testable.

Your components

Plain Python functions describe native browser elements and subscribe to state by reading signals.

Reactive graph

Signals remember their exact consumers; batching and lifecycle scopes keep updates predictable.

PyScript runtime

Pyodide runs application code and provides access to Python packages inside the browser.

Native browser

Bindings update DOM nodes directly. Host adapters cover media, maps, history, and other Web APIs.

04 / Proof, not promises

Built against real application pressure.

Three real products exercise scientific computation, camera and image APIs, offline behavior, PDF generation, realtime media, WebSockets, routing, persisted data, forms, visualization, and responsive UI.

Scientific Python

Scientific calculator

Evaluate, differentiate, integrate, and plot in an installable, offline-ready, mobile-first Python PWA.

Camera and documents

Document scanner

Capture or import pages, enhance and reorder them locally, then export a private multi-page PDF.

Realtime application

Live radio studio

Broadcast audio, listen live, manage episodes, chat, poll an audience, and navigate without rebooting Python.

05 / API surface

An understandable core.

The primitives fit together without hiding the browser. Learn the reactive model once, then apply it from a single component to a routed application.

signal()Reactive state with getter semantics and explicit updates.

computed()Memoized values derived from other reactive state.

effect()Side effects with automatic dependency tracking and cleanup.

component()Lifecycle-scoped component execution and ownership.

For()Keyed repeated children with stable DOM identity.

resource()Reactive loading, value, and error state for async work.

form()Fields, touched state, errors, validation, and submit flow.

RouterCached shell fetching, history, teardown, and page boot.

BrowserHostInjectable boundary around browser runtime capabilities.

DiagnosticsStructured errors and context available as reactive state.

Build the browser app you wanted Python to own.

Launch the live example