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 Badge, Card, CardContent, CardFooter, Column, H3, Input, Muted, Row
from prefab_ui.rx import Rx

name = Rx("name").default("world")

with PrefabApp(css_class="max-w-md mx-auto") as app:
    with Card():

        with CardContent():
            with Column(gap=3):
                H3(f"Hello, {name}!")
                Muted("Type below and watch this update in real time.")
                Input(name="name", placeholder="Your name...")

        with CardFooter():
            with Row(gap=2):
                Badge(f"Name: {name}", variant="default")
                Badge("Prefab", variant="success")

​
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 and watch the heading and badge update instantly. That’s reactive state 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 a badge 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 a live interface. The Composition page walks through this in detail. Rx("name") creates a reactive reference to a client-side state key. When used in an f-string like f"Hello, {name}!", it compiles to {{ name }} in the protocol. Any component containing that reference re-renders whenever the value changes. The Input(name="name") automatically syncs its value to the same key, so typing in the input updates the heading and badge instantly — no server round-trip needed. Read more about reactive expressions. Prefab has a full set of client-side actions (SetState, ShowToast, ToggleState, OpenLink), plus server actions like CallTool for when you need a backend.

​
Where to go from here