# Tutorial: PhiaUI in Livebook
Build a simple interactive **Task Manager** UI using PhiaUI components rendered live inside a Livebook notebook. This tutorial shows how to prototype Phoenix LiveView component layouts, explore PhiaUI's visual system, and build interactive demos — all without running a Phoenix server.
## What you'll build
- A task list rendered with PhiaUI `table` and `badge` components
- A quick-add form using `phia_input` and `button`
- A stat summary bar with `stat_card` and `badge_delta`
- Dark mode toggle that affects the notebook preview
## How PhiaUI renders in Livebook
PhiaUI uses [`kino_live_component`](https://hex.pm/packages/kino_live_component), a Kino package that runs a minimal Phoenix endpoint inside Livebook. This allows fully styled function components — including Tailwind CSS — to render directly in notebook outputs.
> **Note**: `kino_live_component` requires Livebook 0.12+ and Elixir 1.17+.
---
## Step 1 — Create a new Livebook notebook
Open [Livebook](https://livebook.dev) (local or livebook.dev) and create a new notebook named **"PhiaUI Task Manager"**.
---
## Step 2 — Add dependencies
In the first Elixir cell, install PhiaUI and `kino_live_component`:
```elixir
Mix.install([
{:phia_ui, "~> 0.1.11"},
{:kino_live_component, "~> 0.0.5"},
{:kino, "~> 0.14"}
])
```
Run the cell. Hex will fetch and compile both packages.
---
## Step 3 — Configure the Kino endpoint
`kino_live_component` needs a minimal Phoenix endpoint to serve the Tailwind CSS and run component rendering. Add this in the next cell:
```elixir
defmodule NotebookEndpoint do
use Phoenix.Endpoint, otp_app: :phia_ui_notebook
plug(Plug.Static,
at: "/",
from: {:phia_ui, "priv/static"},
gzip: false
)
socket("/live", Phoenix.LiveView.Socket,
websocket: [connect_info: [session: @session_options]]
)
plug(Plug.Session, @session_options)
plug(:router)
def router(conn, _opts), do: conn
@session_options [
store: :cookie,
key: "_phia_key",
signing_salt: "phia_notebook"
]
end
Application.put_env(:phia_ui_notebook, NotebookEndpoint,
url: [host: "localhost"],
secret_key_base: String.duplicate("a", 64),
live_view: [signing_salt: "phia_salt"],
render_errors: [formats: [html: PhiaUi.ErrorHTML], layout: false],
pubsub_server: PhiaUiNotebook.PubSub,
server: false
)
{:ok, _} = Supervisor.start_link([
{Phoenix.PubSub, name: PhiaUiNotebook.PubSub},
NotebookEndpoint
], strategy: :one_for_one)
```
---
## Step 4 — Import PhiaUI components
```elixir
import PhiaUi.Components.Buttons
import PhiaUi.Components.Inputs
import PhiaUi.Components.Display
import PhiaUi.Components.Feedback
import PhiaUi.Components.Cards
import PhiaUi.Components.Data
```
---
## Step 5 — Render your first component
Use `KinoLiveComponent.render/2` to render any PhiaUI component:
```elixir
alias KinoLiveComponent, as: KLC
KLC.render(NotebookEndpoint, fn assigns ->
~H"""
"""
end)
```
> **Note**: In Livebook, forms don't fire LiveView events — they are static renders. For interactive forms, move the logic to a real Phoenix LiveView. Use Livebook to prototype the UI, then copy the HEEx template into your LiveView.
---
## Step 9 — Explore other components
Try rendering more PhiaUI components in subsequent cells:
```elixir
# Alert
KLC.render(NotebookEndpoint, fn assigns ->
~H"""
<.alert variant="success">
<:icon><.icon name="check-circle" />
Task completed successfully.
<.alert variant="warning">
<:icon><.icon name="alert-triangle" />
3 tasks are overdue.
<.alert variant="destructive">
<:icon><.icon name="x-circle" />
Failed to sync with server.
"""
end)
```
---
## Step 10 — Dark mode preview
Toggle to dark mode to preview components in both colour schemes:
```elixir
KLC.render(NotebookEndpoint, fn assigns ->
~H"""
"""
end)
```
---
## Next steps
Now that you can render PhiaUI components in Livebook:
1. **Explore the full component catalog** in the Components section of the sidebar
2. **Build a real LiveView** — copy your HEEx templates from the notebook
3. **Run a tutorial** — see [Analytics Dashboard](tutorial-dashboard.md) or [Booking Platform](tutorial-booking.md) for complete LiveView implementations
### Useful patterns when prototyping in Livebook
| Goal | Approach |
|---|---|
| Test a layout | Render with `KLC.render/2`, iterate in the same cell |
| Try component variants | Render multiple instances side by side in one cell |
| Evaluate dark mode | Wrap the render in `
` |
| Share a component demo | Export the notebook as `.livemd` and share the file |
| Move to production | Copy the `~H"""` block directly into your LiveView |
---
## Resources
- [`kino_live_component` on Hex](https://hex.pm/packages/kino_live_component) — the Kino package used here
- [Livebook documentation](https://livebook.dev/docs) — notebook features and tips
- [PhiaUI component catalog](https://hexdocs.pm/phia_ui) — all 829 components with examples
- [Phoenix LiveView docs](https://hexdocs.pm/phoenix_live_view) — official LiveView reference