> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Todo List
> A fully interactive todo list built with client-side state actions.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
Multiple todo lists with inline editing, validation, and dynamic groups — all running client-side with no server calls.
```python Python icon="python" expandable theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.app import PrefabApp
from prefab_ui.components import (
Button, Card, CardContent, CardFooter, CardHeader,
Checkbox, Column, Form, Grid, Input, Muted, Row, Separator,
)
from prefab_ui.components.control_flow import ForEach, If
from prefab_ui.actions import AppendState, PopState, SetState
from prefab_ui.rx import Rx
# Each group has a name, a list of todos, an input buffer, and a visibility flag
with Grid(min_column_width="12rem", gap=6, align="start") as view:
# Destructure to capture the group index (gi) and the group itself.
# Each ForEach auto-captures $item and $index into scoped let bindings,
# so nested loops don't shadow each other.
with ForEach("groups") as (gi, group):
with Card():
with CardHeader():
with Row(gap=2, align="center"):
Input(
name=f"groups.{gi}.name",
css_class="border-0 ring-0 shadow-none p-0 h-auto font-semibold text-lg focus-visible:ring-0 focus-visible:ring-offset-0",
)
Button("×", variant="ghost", size="sm", css_class="ml-auto", on_click=PopState("groups", gi))
with CardContent():
with Column(gap=4):
with Form(gap=0, on_submit=[
AppendState(f"groups.{gi}.todos", {"text": group.new_todo, "done": False}),
SetState(f"groups.{gi}.new_todo", ""),
]):
with Row(gap=2):
Input(name=f"groups.{gi}.new_todo", placeholder="Add a todo...")
Button("Add", disabled=~group.new_todo)
with Column(gap=2):
with If(group.todos.length()):
Separator(spacing=3)
with ForEach(f"groups.{gi}.todos") as (ti, todo):
with If(~todo.done | group.show_done):
with Row(gap=2, align="center"):
Checkbox(name=f"groups.{gi}.todos.{ti}.done")
Input(
name=f"groups.{gi}.todos.{ti}.text",
css_class="border-0 ring-0 shadow-none p-0 h-auto focus-visible:ring-0 focus-visible:ring-offset-0",
)
Button("×", variant="ghost", size="sm", css_class="ml-auto", on_click=PopState(f"groups.{gi}.todos", ti))
with CardFooter():
with Row(gap=2, align="center", css_class="w-full justify-between"):
Muted(f"{group.todos.length()} items")
with Row(gap=1, align="center"):
Checkbox(name=f"groups.{gi}.show_done", css_class="h-3 w-3")
Muted("Show done")
with Card(css_class="border-dashed p-3"):
Button(
"+",
variant="ghost",
size="lg",
css_class="text-4xl text-muted-foreground w-full h-full min-h-48 rounded-md",
on_click=AppendState("groups", {"name": "New List", "todos": [], "new_todo": "", "show_done": True}),
)
app = PrefabApp(
state={
"groups": [
{
"name": "Work",
"todos": [
{"text": "Find Magrathea", "done": False},
{"text": "Escape Vogons", "done": False},
],
"new_todo": "",
"show_done": True,
},
{
"name": "Personal",
"todos": [
{"text": "Have lunch at Milliways", "done": True},
{"text": "Buy towel", "done": False},
],
"new_todo": "",
"show_done": True,
},
],
},
view=view,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "pf-app-root",
"type": "Div",
"children": [
{
"cssClass": "gap-6 items-start",
"type": "Grid",
"minColumnWidth": "12rem",
"children": [
{
"let": {"_loop_11": "{{ $item }}", "_loop_11_idx": "{{ $index }}"},
"type": "ForEach",
"key": "groups",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{
"cssClass": "border-0 ring-0 shadow-none p-0 h-auto font-semibold text-lg focus-visible:ring-0 focus-visible:ring-offset-0",
"name": "groups.{{ _loop_11_idx }}.name",
"type": "Input",
"inputType": "text",
"disabled": false,
"readOnly": false,
"required": false
},
{
"cssClass": "ml-auto",
"type": "Button",
"label": "\u00d7",
"variant": "ghost",
"size": "sm",
"disabled": false,
"onClick": {"action": "popState", "key": "groups", "index": "{{ _loop_11_idx }}"}
}
]
}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"cssClass": "gap-0",
"type": "Form",
"onSubmit": [
{
"action": "appendState",
"key": "groups.{{ _loop_11_idx }}.todos",
"value": {"text": "{{ _loop_11.new_todo }}", "done": false}
},
{"action": "setState", "key": "groups.{{ _loop_11_idx }}.new_todo", "value": ""}
],
"children": [
{
"cssClass": "gap-2",
"type": "Row",
"children": [
{
"name": "groups.{{ _loop_11_idx }}.new_todo",
"type": "Input",
"inputType": "text",
"placeholder": "Add a todo...",
"disabled": false,
"readOnly": false,
"required": false
},
{
"type": "Button",
"label": "Add",
"variant": "default",
"size": "default",
"disabled": "{{ !_loop_11.new_todo }}"
}
]
}
]
},
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{
"type": "Condition",
"cases": [
{
"when": "{{ _loop_11.todos | length }}",
"children": [{"cssClass": "my-3", "type": "Separator", "orientation": "horizontal"}]
}
]
},
{
"let": {"_loop_12": "{{ $item }}", "_loop_12_idx": "{{ $index }}"},
"type": "ForEach",
"key": "groups.{{ _loop_11_idx }}.todos",
"children": [
{
"type": "Condition",
"cases": [
{
"when": "{{ !_loop_12.done || _loop_11.show_done }}",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{
"name": "groups.{{ _loop_11_idx }}.todos.{{ _loop_12_idx }}.done",
"value": false,
"type": "Checkbox",
"disabled": false,
"required": false
},
{
"cssClass": "border-0 ring-0 shadow-none p-0 h-auto focus-visible:ring-0 focus-visible:ring-offset-0",
"name": "groups.{{ _loop_11_idx }}.todos.{{ _loop_12_idx }}.text",
"type": "Input",
"inputType": "text",
"disabled": false,
"readOnly": false,
"required": false
},
{
"cssClass": "ml-auto",
"type": "Button",
"label": "\u00d7",
"variant": "ghost",
"size": "sm",
"disabled": false,
"onClick": {
"action": "popState",
"key": "groups.{{ _loop_11_idx }}.todos",
"index": "{{ _loop_12_idx }}"
}
}
]
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "CardFooter",
"children": [
{
"cssClass": "gap-2 items-center w-full justify-between",
"type": "Row",
"children": [
{"content": "{{ _loop_11.todos | length }} items", "type": "Muted"},
{
"cssClass": "gap-1 items-center",
"type": "Row",
"children": [
{
"cssClass": "h-3 w-3",
"name": "groups.{{ _loop_11_idx }}.show_done",
"value": false,
"type": "Checkbox",
"disabled": false,
"required": false
},
{"content": "Show done", "type": "Muted"}
]
}
]
}
]
}
]
}
]
},
{
"cssClass": "border-dashed p-3",
"type": "Card",
"children": [
{
"cssClass": "text-4xl text-muted-foreground w-full h-full min-h-48 rounded-md",
"type": "Button",
"label": "+",
"variant": "ghost",
"size": "lg",
"disabled": false,
"onClick": {
"action": "appendState",
"key": "groups",
"value": {"name": "New List", "todos": [], "new_todo": "", "show_done": true}
}
}
]
}
]
}
]
},
"state": {
"groups.{{ _loop_11_idx }}.todos.{{ _loop_12_idx }}.done": false,
"groups.{{ _loop_11_idx }}.show_done": false,
"groups": [
{
"name": "Work",
"todos": [
{"text": "Find Magrathea", "done": false},
{"text": "Escape Vogons", "done": false}
],
"new_todo": "",
"show_done": true
},
{
"name": "Personal",
"todos": [
{"text": "Have lunch at Milliways", "done": true},
{"text": "Buy towel", "done": false}
],
"new_todo": "",
"show_done": true
}
]
}
}
```
## How It Works
The state is an array of groups, each containing a `name`, a `todos` array, and a `new_todo` input buffer. [ForEach](/docs/components/foreach) iterates the groups, and a nested ForEach iterates each group's todos.
**Nested loops** — `with ForEach("groups") as (gi, group)` destructures the loop binding into an index (`gi`) and item (`group`), matching Python's `enumerate` convention. Each ForEach automatically captures `$item` and `$index` into scoped `let` bindings, so the outer loop's `group` and `gi` survive even after the inner loop shadows `$item` and `$index`. The inner `ForEach(f"groups.{gi}.todos") as (ti, todo)` uses `gi` to target the right group and `ti` to target individual todos.
**Inline editing** — instead of showing todo text as a `Text` component, each item uses a borderless `Input` styled with `border-0 shadow-none p-0` so it looks like plain text but is directly editable. [Dot-path auto-binding](/docs/actions/update-state#dot-paths) handles the read and write — the input's `name` points at the exact item in state (`f"groups.{gi}.todos.{ti}.text"`).
**Disabling the Add button** — `disabled=~group.new_todo` evaluates to true when the input is empty, so the button stays disabled until you type something. `group` is the outer ForEach's item, so `group.new_todo` accesses the group's input buffer.
**Hiding completed items** — each group has a `show_done` flag toggled by a small checkbox in the footer. Inside the inner todo loop, `If(~todo.done | group.show_done)` checks the todo's completion against the group's visibility flag. Both references survive nesting because ForEach's auto-bind captured them.
**Adding a group** — the dashed card at the end appends a new group object with `AppendState("groups", {...})`. ForEach picks it up and renders a new card automatically.