Skip to main content

​
Install

pip install prefab-ui
Requires Python 3.10+.

​
Create an app

Save this as app.py:
app.py
from prefab_ui.app import PrefabApp
from prefab_ui.components import Button, Card, CardContent, CardFooter, Column, H3, Input, Muted
from prefab_ui.actions import ShowToast

with Column(css_class="max-w-md mx-auto") as view:
    with Card():
        with CardContent():
            with Column(gap=3):
                name_input = Input(name="name", placeholder="Your name...")
                H3(f"Hello, {name_input.rx}!")
                Muted("Type your name and watch the heading update in real time.")
        with CardFooter():
            Button("Say hi", on_click=ShowToast(f"Hey there, {name_input.rx}!"))

app = PrefabApp(view=view, state={"name": "world"})

​
Run it

prefab serve app.py --reload
Your browser opens to http://127.0.0.1:5175. The --reload flag watches your file for changes — every time you save app.py, the UI regenerates automatically. Here’s what you’ll see: Type in the input — the heading updates instantly. Click the button — toast notification. That’s reactive state, event handling, and a production component library, all from a dozen lines of Python. Try editing app.py while the server is running. Change the heading text, swap the button variant to "destructive", or add another Input — save the file and the browser updates immediately. This is the development loop: write Python, save, see it live.

​
What just happened

Prefab components nest using Python’s with statement — Card, Column, Input compose into a tree that compiles to JSON, which a bundled React renderer turns into real HTML. The Composition page walks through this in detail. Every form control syncs its value to a client-side state key. The .rx property returns a reactive reference — name_input.rx in an f-string becomes {{ name }} in the protocol, and any component containing it re-renders whenever the input changes. No server round-trip needed. Read more about reactive expressions. ShowToast is a client-side action — it runs entirely in the browser. Prefab has several of these (SetState, ToggleState, OpenLink), plus server actions like CallTool for when you need a backend.

​
Where to go from here