diff --git a/examples/kanban/src/main.rs b/examples/kanban/src/main.rs
index 20baccd..bfba402 100644
--- a/examples/kanban/src/main.rs
+++ b/examples/kanban/src/main.rs
@@ -35,6 +35,11 @@ struct Card {
     column: usize,
 }
 
+#[derive(Hemplate)]
+struct AppShell {
+    body: SafeHtml,
+}
+
 #[derive(Hemplate)]
 #[hemplate = "partials"]
 struct BoardColumns {
@@ -232,32 +237,8 @@ fn page_html(board: &BoardState) -> SafeHtml {
 }
 
 fn shell(body: SafeHtml) -> SafeHtml {
-    // Explicit full-page composition boundary for already-rendered hemplate fragments.
     // req: html_safety/001 req: html_safety/002 req: axum_integration/001
-    SafeHtml::trusted(format!(
-        r#"<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>slhx Kanban</title>
-  <script src="/slhx.js" defer></script>
-  <style>
-    body {{ font-family: system-ui, sans-serif; margin: 2rem; }}
-    form {{ display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }}
-    .columns {{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }}
-    .column {{ border: 1px solid #ddd; border-radius: .5rem; padding: 1rem; background: #fafafa; }}
-    .card {{ background: white; border: 1px solid #ccc; border-radius: .5rem; margin: .75rem 0; padding: .75rem; }}
-    .card menu {{ display: flex; gap: .35rem; padding: 0; margin: .5rem 0 0; }}
-    .presence {{ color: #376; }}
-    button, input, select {{ font: inherit; }}
-  </style>
-</head>
-<body>
-  {body}
-</body>
-</html>"#
-    ))
+    slhx::render(&AppShell { body })
 }
 
 fn render_options() -> SafeHtml {
diff --git a/examples/kanban/templates/app_shell.heml b/examples/kanban/templates/app_shell.heml
new file mode 100644
index 0000000..0bfcb2b
--- /dev/null
+++ b/examples/kanban/templates/app_shell.heml
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>slhx Kanban</title>
+  <script src="/slhx.js" defer></script>
+  <style>
+    body { font-family: system-ui, sans-serif; margin: 2rem; }
+    form { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
+    .columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
+    .column { border: 1px solid #ddd; border-radius: .5rem; padding: 1rem; background: #fafafa; }
+    .card { background: white; border: 1px solid #ccc; border-radius: .5rem; margin: .75rem 0; padding: .75rem; }
+    .card menu { display: flex; gap: .35rem; padding: 0; margin: .5rem 0 0; }
+    .presence { color: #376; }
+    button, input, select { font: inherit; }
+  </style>
+</head>
+<body>{+= self.body =+}</body>
+</html>
