diff --git a/.gitignore b/.gitignore
index d4777d2..1d3e6d4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.perry-cache/
 # ---> macOS
 # General
 .DS_Store
diff --git a/simple-ui/main-2.ts b/simple-ui/main-2.ts
new file mode 100644
index 0000000..0714a07
--- /dev/null
+++ b/simple-ui/main-2.ts
@@ -0,0 +1,13 @@
+import { App, VStack, Text, Button, State } from "perry/ui"
+
+const count = State(0)
+
+App({
+    title: "Counter",
+    width: 400,
+    height: 300,
+    body: VStack(16, [
+        Text(`Count: ${count.value}`),
+        Button("Increment", () => count.set(count.value + 1)),
+    ]),
+})
diff --git a/simple-ui/main-with-style.ts b/simple-ui/main-with-style.ts
new file mode 100644
index 0000000..cccc56f
--- /dev/null
+++ b/simple-ui/main-with-style.ts
@@ -0,0 +1,26 @@
+import {
+    App, VStack, Text, Button, State,
+    textSetFontSize, textSetColor,
+    setCornerRadius, setPadding,
+    widgetSetBackgroundColor,
+} from "perry/ui"
+
+const count = State(0)
+
+const label = Text(`Count: ${count.value}`)
+textSetFontSize(label, 24)
+textSetColor(label, 0.2, 0.2, 0.2, 1.0)        // RGBA in [0,1] — same as #333333
+
+const btn = Button("Increment", () => count.set(count.value + 1))
+setCornerRadius(btn, 8)
+widgetSetBackgroundColor(btn, 0.0, 0.478, 1.0, 1.0)  // system blue
+
+const stack = VStack(20, [label, btn])
+setPadding(stack, 20, 20, 20, 20)
+
+App({
+    title: "Styled Counter",
+    width: 400,
+    height: 300,
+    body: stack,
+})
diff --git a/simple-ui/todo.ts b/simple-ui/todo.ts
new file mode 100644
index 0000000..8cc948c
--- /dev/null
+++ b/simple-ui/todo.ts
@@ -0,0 +1,53 @@
+import {
+    App,
+    Text,
+    Button,
+    TextField,
+    VStack,
+    HStack,
+    State,
+    ForEach,
+    Spacer,
+    Divider,
+} from "perry/ui"
+
+const todos = State<string[]>([])
+const count = State(0)
+const input = State("")
+
+App({
+    title: "Todo App",
+    width: 480,
+    height: 600,
+    body: VStack(16, [
+        Text("My Todos"),
+
+        HStack(8, [
+            TextField("What needs to be done?", (value: string) => input.set(value)),
+            Button("Add", () => {
+                const text = input.value
+                if (text.length > 0) {
+                    todos.set([...todos.value, text])
+                    count.set(count.value + 1)
+                    input.set("")
+                }
+            }),
+        ]),
+
+        Divider(),
+
+        ForEach(count, (i: number) =>
+            HStack(8, [
+                Text(todos.value[i]),
+                Spacer(),
+                Button("Delete", () => {
+                    todos.set(todos.value.filter((_, idx) => idx !== i))
+                    count.set(count.value - 1)
+                }),
+            ]),
+        ),
+
+        Spacer(),
+        Text(`${count.value} items`),
+    ]),
+})