Skip to main content
Every Prefab UI is wrapped in a PrefabApp. It holds your component tree, state, theme, and external assets together as a single unit.

​
Creating an App

​
Context manager

The natural way to build an app. Components inside the with block become the view: 
from prefab_ui.app import PrefabApp
from prefab_ui.components import Heading, Slider, Text
from prefab_ui.themes import Presentation

with PrefabApp(state={"volume": 75}, theme=Presentation(accent="blue")) as app:
    Heading("Dashboard")
    slider = Slider(value=75, name="volume")
    Text(f"Volume: {slider.rx}%")
The context manager creates an implicit root Column, so children stack vertically. State, theme, and styling are declared upfront — by the time the first component renders, the app envelope is established. The root Column gets a pf-app-root CSS class that themes target for default padding. Add your own classes via css_class: 
with PrefabApp(css_class="max-w-3xl mx-auto") as app:
    Heading("Centered and constrained")

​
Passing a view

If you build the tree separately, pass it via view=: 
with Column(css_class="p-6") as view:
    Heading("Hello")

app = PrefabApp(view=view, state={"greeting": "Hello"})

​
From wire data

PrefabApp.from_json() wraps pre-serialized wire protocol data, for example from sandboxed execution. Keyword arguments override values from the wire: 
wire = await sandbox.run(code)
app = PrefabApp.from_json(wire, state={"extra": "value"})

​
Fields

FieldTypeDescription
viewComponent | dictComponent tree to render (set automatically in context manager mode)
statedictInitial client-side state
themeThemeTheme to apply — see Themes
css_classstrAdditional CSS/Tailwind classes for the root container. Stacks on top of pf-app-root.
defslist[Define]Reusable component definitions
stylesheetslist[str]CSS URLs or inline CSS to load in <head>
scriptslist[str]External JS URLs to load in <head>
connect_domainslist[str]Domains to allow in CSP connect-src (for Fetch actions)
titlestrHTML page title (default: "Prefab")

​
Methods

app.html() returns a complete, self-contained HTML page with the Prefab renderer and all data baked in. app.to_json() returns the wire-format envelope — a dict with $prefab, view, state, defs, and theme. app.csp() computes Content Security Policy domains from the app’s asset configuration.

​
State

state sets the initial values that template expressions like {{ count }} resolve against: 
with PrefabApp(state={"count": 0, "items": []}) as app:
    Text("Count: {{ count }}")
Pass state directly to the PrefabApp constructor: 
with PrefabApp(state={"count": 0, "items": []}) as app:
    Text("Count: {{ count }}")

​
Stylesheets

The stylesheets field accepts both URLs and inline CSS. URLs become <link> tags; inline CSS (detected by {) becomes a <style> tag. For theming, prefer theme= over inline stylesheets.