---
title: PrefabApp
description: The application object that ties together view, state, theme, and assets.
icon: box
---

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:

```python
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`:

```python
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=`:

```python
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:

```python
wire = await sandbox.run(code)
app = PrefabApp.from_json(wire, state={"extra": "value"})
```

## Fields

| Field | Type | Description |
|-------|------|-------------|
| `view` | `Component \| dict` | Component tree to render (set automatically in context manager mode) |
| `state` | `dict` | Initial client-side state |
| `theme` | `Theme` | Theme to apply — see [Themes](/styling/themes) |
| `css_class` | `str` | Additional CSS/Tailwind classes for the root container. Stacks on top of `pf-app-root`. |
| `defs` | `list[Define]` | Reusable component definitions |
| `stylesheets` | `list[str]` | CSS URLs or inline CSS to load in `<head>` |
| `scripts` | `list[str]` | External JS URLs to load in `<head>` |
| `connect_domains` | `list[str]` | Domains to allow in CSP `connect-src` (for Fetch actions) |
| `title` | `str` | HTML 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:

```python
with PrefabApp(state={"count": 0, "items": []}) as app:
    Text("Count: {{ count }}")
```

Pass state directly to the `PrefabApp` constructor:

```python
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.
