From 1cd7c7a63082e63ed7ade6947e13029635060ad0 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Thu, 25 Jun 2026 11:45:46 +0100
Subject: [PATCH 01/13] =?UTF-8?q?examples:=20migrate=20templ=20=E2=86=92?=
 =?UTF-8?q?=20gsx=20(source)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{components.templ => components.gsx}      |  63 ++--
 examples/blog/admin/dashboard.gsx             |  78 +++++
 examples/blog/admin/dashboard.templ           |  79 -----
 .../blog/admin/{login.templ => login.gsx}     |  13 +-
 .../blog/admin/{posts.templ => posts.gsx}     |  70 +++--
 .../blog/admin/{users.templ => users.gsx}     |  37 ++-
 .../blog/{category.templ => category.gsx}     |  42 ++-
 examples/blog/blog/components.templ           |  47 ---
 examples/blog/blog/home.gsx                   |  49 ++++
 examples/blog/blog/home.templ                 |  52 ----
 examples/blog/blog/post.gsx                   |  69 +++++
 examples/blog/blog/post.templ                 |  72 -----
 examples/blog/blog/search.gsx                 |  69 +++++
 examples/blog/blog/search.templ               |  73 -----
 .../{components.templ => components.gsx}      |  89 +++---
 .../ui/layout/{layout.templ => layout.gsx}    |  16 +-
 examples/htmx-render-target/pages.gsx         | 149 ++++++++++
 examples/htmx-render-target/pages.templ       | 270 ------------------
 examples/htmx/pages.gsx                       |  80 ++++++
 examples/htmx/pages.templ                     | 104 -------
 examples/lint-misuse/pages.gsx                |  38 +++
 examples/lint-misuse/pages.templ              |  19 --
 examples/simple/{pages.templ => pages.gsx}    |  47 ++-
 examples/todo/{pages.templ => pages.gsx}      |  89 +++---
 24 files changed, 762 insertions(+), 952 deletions(-)
 rename examples/blog/admin/{components.templ => components.gsx} (65%)
 create mode 100644 examples/blog/admin/dashboard.gsx
 delete mode 100644 examples/blog/admin/dashboard.templ
 rename examples/blog/admin/{login.templ => login.gsx} (77%)
 rename examples/blog/admin/{posts.templ => posts.gsx} (54%)
 rename examples/blog/admin/{users.templ => users.gsx} (71%)
 rename examples/blog/blog/{category.templ => category.gsx} (58%)
 delete mode 100644 examples/blog/blog/components.templ
 create mode 100644 examples/blog/blog/home.gsx
 delete mode 100644 examples/blog/blog/home.templ
 create mode 100644 examples/blog/blog/post.gsx
 delete mode 100644 examples/blog/blog/post.templ
 create mode 100644 examples/blog/blog/search.gsx
 delete mode 100644 examples/blog/blog/search.templ
 rename examples/blog/ui/components/{components.templ => components.gsx} (60%)
 rename examples/blog/ui/layout/{layout.templ => layout.gsx} (89%)
 create mode 100644 examples/htmx-render-target/pages.gsx
 delete mode 100644 examples/htmx-render-target/pages.templ
 create mode 100644 examples/htmx/pages.gsx
 delete mode 100644 examples/htmx/pages.templ
 create mode 100644 examples/lint-misuse/pages.gsx
 delete mode 100644 examples/lint-misuse/pages.templ
 rename examples/simple/{pages.templ => pages.gsx} (74%)
 rename examples/todo/{pages.templ => pages.gsx} (80%)

diff --git a/examples/blog/admin/components.templ b/examples/blog/admin/components.gsx
similarity index 65%
rename from examples/blog/admin/components.templ
rename to examples/blog/admin/components.gsx
index 4100748..c0a15d0 100644
--- a/examples/blog/admin/components.templ
+++ b/examples/blog/admin/components.gsx
@@ -1,6 +1,7 @@
-// Admin-local templ functions. StatsGrid and RecentPostsCard are standalone
-// function components so the dashboard's Props+RenderTarget switch can refresh
-// each widget independently with target.Is(StatsGrid) / target.Is(RecentPostsCard).
+// Admin-local gsx functions. StatsGrid, RecentPostsCard and PostsTable are
+// standalone function components so the dashboard's Props+RenderTarget switch
+// can refresh each widget independently with target.Is(StatsGrid) /
+// target.Is(RecentPostsCard).
 package admin
 
 import (
@@ -9,47 +10,49 @@ import (
 	"github.com/jackielii/structpages/examples/blog/ui/components"
 )
 
-templ statCell(label string, value int) {
+// StatCell — capitalized (gsx components must be Capitalized; the templ name
+// was lowercase `statCell`).
+component StatCell(label string, value int) {
 	<div class="rounded-lg border bg-white p-4 text-center shadow-sm">
-		<div class="text-3xl font-semibold text-slate-900">{ value }</div>
-		<div class="mt-1 text-xs uppercase tracking-wide text-slate-500">{ label }</div>
+		<div class="text-3xl font-semibold text-slate-900">{value}</div>
+		<div class="mt-1 text-xs uppercase tracking-wide text-slate-500">{label}</div>
 	</div>
 }
 
-templ StatsGrid(stats store.Stats) {
+component StatsGrid(stats store.Stats) {
 	<div id={ structpages.ID(ctx, StatsGrid) } class="grid grid-cols-2 gap-3 md:grid-cols-4">
-		@statCell("Posts", stats.Posts)
-		@statCell("Drafts", stats.Drafts)
-		@statCell("Comments", stats.Comments)
-		@statCell("Categories", stats.Categories)
+		<StatCell label="Posts" value={stats.Posts}/>
+		<StatCell label="Drafts" value={stats.Drafts}/>
+		<StatCell label="Comments" value={stats.Comments}/>
+		<StatCell label="Categories" value={stats.Categories}/>
 	</div>
 }
 
-templ RecentPostsCard(posts []store.Post) {
+component RecentPostsCard(posts []store.Post) {
 	<div id={ structpages.ID(ctx, RecentPostsCard) }>
-		@components.Card("Recent posts") {
+		<components.Card title="Recent posts">
 			<ul class="divide-y text-sm">
-				if len(posts) == 0 {
+				{ if len(posts) == 0 {
 					<li class="py-2 text-slate-500">No posts yet.</li>
-				}
-				for _, p := range posts {
+				} }
+				{ for _, p := range posts {
 					<li class="flex items-center justify-between py-2">
 						<a class="hover:underline" href={ components.URL(ctx, postEditPage{}, "id", p.ID) }>
-							{ p.Title }
+							{p.Title}
 						</a>
-						if p.Published {
+						{ if p.Published {
 							<span class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800">live</span>
 						} else {
 							<span class="rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700">draft</span>
-						}
+						} }
 					</li>
-				}
+				} }
 			</ul>
-		}
+		</components.Card>
 	</div>
 }
 
-templ PostsTable(posts []store.Post) {
+component PostsTable(posts []store.Post) {
 	<div id={ structpages.ID(ctx, PostsTable) } class="overflow-hidden rounded-lg border bg-white shadow-sm">
 		<table class="w-full text-sm">
 			<thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
@@ -61,19 +64,19 @@ templ PostsTable(posts []store.Post) {
 				</tr>
 			</thead>
 			<tbody>
-				for _, p := range posts {
+				{ for _, p := range posts {
 					<tr class="border-t">
 						<td class="px-3 py-2 font-medium">
-							<a class="hover:underline" href={ components.URL(ctx, postEditPage{}, "id", p.ID) }>{ p.Title }</a>
+							<a class="hover:underline" href={ components.URL(ctx, postEditPage{}, "id", p.ID) }>{p.Title}</a>
 						</td>
 						<td class="px-3 py-2">
-							if p.Published {
+							{ if p.Published {
 								<span class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800">published</span>
 							} else {
 								<span class="rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700">draft</span>
-							}
+							} }
 						</td>
-						<td class="px-3 py-2 text-slate-500">{ p.CreatedAt.Format("Jan 2, 2006") }</td>
+						<td class="px-3 py-2 text-slate-500">{p.CreatedAt.Format("Jan 2, 2006")}</td>
 						<td class="px-3 py-2 text-right">
 							<form
 								method="POST"
@@ -88,10 +91,10 @@ templ PostsTable(posts []store.Post) {
 							</form>
 						</td>
 					</tr>
-				}
-				if len(posts) == 0 {
+				} }
+				{ if len(posts) == 0 {
 					<tr><td colspan="4" class="px-3 py-6 text-center text-slate-500">No posts yet.</td></tr>
-				}
+				} }
 			</tbody>
 		</table>
 	</div>
diff --git a/examples/blog/admin/dashboard.gsx b/examples/blog/admin/dashboard.gsx
new file mode 100644
index 0000000..fe95051
--- /dev/null
+++ b/examples/blog/admin/dashboard.gsx
@@ -0,0 +1,78 @@
+package admin
+
+import (
+	"net/http"
+
+	"github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/auth"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type dashboardPage struct{}
+
+type dashboardProps struct {
+	User        store.User
+	Stats       store.Stats
+	RecentPosts []store.Post
+}
+
+// Props demonstrates the Props + RenderTarget pattern. Each widget is a
+// standalone gsx function (StatsGrid, RecentPostsCard) so HTMX refresh
+// requests with HX-Target: #stats-grid or #recent-posts-card resolve here
+// and only the touched data is loaded — no full page work.
+//
+// Returns dashboardProps directly — gsx now emits method components as
+// func (p dashboardPage) Page(props dashboardProps) gsx.Node without a wrapper struct.
+func (p dashboardPage) Props(r *http.Request, s *store.Store, target structpages.RenderTarget) (dashboardProps, error) {
+	switch {
+	case target.Is(StatsGrid):
+		return dashboardProps{}, structpages.RenderComponent(StatsGrid(StatsGridProps{Stats: s.Stats()}))
+
+	case target.Is(RecentPostsCard):
+		posts, _ := s.ListPosts(store.PostFilter{IncludeDraft: true, PageSize: 5})
+		return dashboardProps{}, structpages.RenderComponent(RecentPostsCard(RecentPostsCardProps{Posts: posts}))
+	}
+
+	user, _ := auth.UserFromContext(r.Context())
+	posts, _ := s.ListPosts(store.PostFilter{IncludeDraft: true, PageSize: 5})
+	return dashboardProps{
+		User:        user,
+		Stats:       s.Stats(),
+		RecentPosts: posts,
+	}, nil
+}
+
+component (p dashboardPage) Page(props dashboardProps) {
+	<layout.AdminShell title="Dashboard" current={props.User}>
+		<header class="mb-6 flex items-end justify-between">
+			<h1 class="text-2xl font-semibold">Dashboard</h1>
+			<div class="flex gap-2 text-xs">
+				<button
+					class="rounded border px-2 py-1 hover:bg-white"
+					hx-get={ structpages.URLFor(ctx, dashboardPage{}) }
+					hx-target={ structpages.IDTarget(ctx, StatsGrid) }
+					hx-swap="outerHTML"
+				>↻ Stats</button>
+				<button
+					class="rounded border px-2 py-1 hover:bg-white"
+					hx-get={ structpages.URLFor(ctx, dashboardPage{}) }
+					hx-target={ structpages.IDTarget(ctx, RecentPostsCard) }
+					hx-swap="outerHTML"
+				>↻ Recent posts</button>
+			</div>
+		</header>
+		<section class="space-y-6">
+			<StatsGrid stats={props.Stats}/>
+			<RecentPostsCard posts={props.RecentPosts}/>
+			<components.Card title="Try it">
+				<ul class="list-disc space-y-1 pl-5 text-sm text-slate-700">
+					<li>Click ↻ Stats — only the StatsGrid widget refreshes (check Network tab).</li>
+					<li>Click ↻ Recent posts — only that card reloads, with its own DB query.</li>
+					<li>Hard refresh — the full document re-renders via Page().</li>
+				</ul>
+			</components.Card>
+		</section>
+	</layout.AdminShell>
+}
diff --git a/examples/blog/admin/dashboard.templ b/examples/blog/admin/dashboard.templ
deleted file mode 100644
index 4d692dc..0000000
--- a/examples/blog/admin/dashboard.templ
+++ /dev/null
@@ -1,79 +0,0 @@
-package admin
-
-import (
-	"net/http"
-
-	"github.com/jackielii/structpages"
-	"github.com/jackielii/structpages/examples/blog/auth"
-	"github.com/jackielii/structpages/examples/blog/store"
-	"github.com/jackielii/structpages/examples/blog/ui/components"
-	"github.com/jackielii/structpages/examples/blog/ui/layout"
-)
-
-type dashboardPage struct{}
-
-type dashboardProps struct {
-	User        store.User
-	Stats       store.Stats
-	RecentPosts []store.Post
-}
-
-// Props demonstrates the Props + RenderTarget pattern. Each widget is a
-// standalone templ function (StatsGrid, RecentPostsCard) so HTMX refresh
-// requests with HX-Target: #stats-grid or #recent-posts-card resolve here
-// and only the touched data is loaded — no full page work.
-func (p dashboardPage) Props(r *http.Request, s *store.Store, target structpages.RenderTarget) (dashboardProps, error) {
-	switch {
-	case target.Is(StatsGrid):
-		return dashboardProps{}, structpages.RenderComponent(StatsGrid(s.Stats()))
-
-	case target.Is(RecentPostsCard):
-		posts, _ := s.ListPosts(store.PostFilter{IncludeDraft: true, PageSize: 5})
-		return dashboardProps{}, structpages.RenderComponent(RecentPostsCard(posts))
-	}
-
-	user, _ := auth.UserFromContext(r.Context())
-	posts, _ := s.ListPosts(store.PostFilter{IncludeDraft: true, PageSize: 5})
-	return dashboardProps{
-		User:        user,
-		Stats:       s.Stats(),
-		RecentPosts: posts,
-	}, nil
-}
-
-templ (p dashboardPage) Page(props dashboardProps) {
-	@layout.AdminShell("Dashboard", props.User) {
-		@p.Content(props)
-	}
-}
-
-templ (dashboardPage) Content(props dashboardProps) {
-	<header class="mb-6 flex items-end justify-between">
-		<h1 class="text-2xl font-semibold">Dashboard</h1>
-		<div class="flex gap-2 text-xs">
-			<button
-				class="rounded border px-2 py-1 hover:bg-white"
-				hx-get={ structpages.URLFor(ctx, dashboardPage{}) }
-				hx-target={ structpages.IDTarget(ctx, StatsGrid) }
-				hx-swap="outerHTML"
-			>↻ Stats</button>
-			<button
-				class="rounded border px-2 py-1 hover:bg-white"
-				hx-get={ structpages.URLFor(ctx, dashboardPage{}) }
-				hx-target={ structpages.IDTarget(ctx, RecentPostsCard) }
-				hx-swap="outerHTML"
-			>↻ Recent posts</button>
-		</div>
-	</header>
-	<section class="space-y-6">
-		@StatsGrid(props.Stats)
-		@RecentPostsCard(props.RecentPosts)
-		@components.Card("Try it") {
-			<ul class="list-disc space-y-1 pl-5 text-sm text-slate-700">
-				<li>Click ↻ Stats — only the StatsGrid widget refreshes (check Network tab).</li>
-				<li>Click ↻ Recent posts — only that card reloads, with its own DB query.</li>
-				<li>Hard refresh — the full document re-renders via Page().</li>
-			</ul>
-		}
-	</section>
-}
diff --git a/examples/blog/admin/login.templ b/examples/blog/admin/login.gsx
similarity index 77%
rename from examples/blog/admin/login.templ
rename to examples/blog/admin/login.gsx
index 5bbdfb7..55091d0 100644
--- a/examples/blog/admin/login.templ
+++ b/examples/blog/admin/login.gsx
@@ -2,7 +2,10 @@ package admin
 
 import "github.com/jackielii/structpages/examples/blog/ui/components"
 
-templ loginShell(username, errMsg string) {
+// LoginShell is invoked from login.go (LoginPage.ServeHTTP). gsx requires
+// component names to be Capitalized (lowercase = HTML element), so the templ
+// `loginShell` becomes `LoginShell`.
+component LoginShell(username, errMsg string) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
@@ -12,14 +15,14 @@ templ loginShell(username, errMsg string) {
 		</head>
 		<body class="bg-slate-100 text-slate-900">
 			<main class="mx-auto max-w-sm px-4 py-16">
-				@components.Card("Sign in") {
+				<components.Card title="Sign in">
 					<form method="POST" class="space-y-3">
-						@components.Alert(components.AlertError, errMsg)
+						<components.Alert kind={components.AlertError} msg={errMsg}/>
 						<label class="block text-sm">
 							<span class="mb-1 block font-medium text-slate-700">Username</span>
 							<input
 								name="username"
-								value={ username }
+								value={username}
 								required
 								autofocus
 								class="w-full rounded border border-slate-300 px-2 py-1.5 text-sm"
@@ -42,7 +45,7 @@ templ loginShell(username, errMsg string) {
 						</button>
 						<p class="text-xs text-slate-500">Demo credentials: <code>admin</code> / <code>admin</code></p>
 					</form>
-				}
+				</components.Card>
 			</main>
 		</body>
 	</html>
diff --git a/examples/blog/admin/posts.templ b/examples/blog/admin/posts.gsx
similarity index 54%
rename from examples/blog/admin/posts.templ
rename to examples/blog/admin/posts.gsx
index caf897f..65fa8a7 100644
--- a/examples/blog/admin/posts.templ
+++ b/examples/blog/admin/posts.gsx
@@ -5,18 +5,20 @@ import (
 	"net/http"
 	"strconv"
 
+	"github.com/gsxhq/gsx"
 	"github.com/jackielii/structpages/examples/blog/auth"
 	"github.com/jackielii/structpages/examples/blog/store"
 	"github.com/jackielii/structpages/examples/blog/ui/components"
 	"github.com/jackielii/structpages/examples/blog/ui/layout"
 )
 
-// adminShellWith is a tiny templ wrapper used by handlers that need to
-// render a custom body inside AdminShell from Go code.
-templ adminShellWith(title string, user store.User, body templ.Component) {
-	@layout.AdminShell(title, user) {
-		@body
-	}
+// AdminShellWith is a tiny gsx wrapper used by handlers that need to render a
+// custom body inside AdminShell from Go code. The templ version took a
+// `templ.Component`; gsx's equivalent renderable value type is `gsx.Node`.
+component AdminShellWith(title string, user store.User, body gsx.Node) {
+	<layout.AdminShell title={title} current={user}>
+		{body}
+	</layout.AdminShell>
 }
 
 // --- List ---
@@ -34,18 +36,14 @@ func (postListPage) Props(r *http.Request, s *store.Store) (postListProps, error
 	return postListProps{User: user, Posts: posts}, nil
 }
 
-templ (p postListPage) Page(props postListProps) {
-	@layout.AdminShell("Posts", props.User) {
-		@p.Content(props)
-	}
-}
-
-templ (postListPage) Content(props postListProps) {
-	<header class="mb-4 flex items-center justify-between">
-		<h1 class="text-2xl font-semibold">All posts</h1>
-		<a class="rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700" href={ components.URL(ctx, postNewPage{}) }>New post</a>
-	</header>
-	@PostsTable(props.Posts)
+component (p postListPage) Page(props postListProps) {
+	<layout.AdminShell title="Posts" current={props.User}>
+		<header class="mb-4 flex items-center justify-between">
+			<h1 class="text-2xl font-semibold">All posts</h1>
+			<a class="rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700" href={ components.URL(ctx, postNewPage{}) }>New post</a>
+		</header>
+		<PostsTable posts={props.Posts}/>
+	</layout.AdminShell>
 }
 
 // --- New ---
@@ -63,11 +61,11 @@ func (postNewPage) Props(r *http.Request, s *store.Store) (postFormViewProps, er
 	return postFormViewProps{User: user, Categories: s.ListCategories()}, nil
 }
 
-templ (postNewPage) Page(props postFormViewProps) {
-	@layout.AdminShell("New post", props.User) {
+component (p postNewPage) Page(props postFormViewProps) {
+	<layout.AdminShell title="New post" current={props.User}>
 		<h1 class="mb-4 text-2xl font-semibold">New post</h1>
-		@postForm(props.Post, props.Categories, "")
-	}
+		<PostForm p={props.Post} cats={props.Categories} errMsg=""/>
+	</layout.AdminShell>
 }
 
 // --- Edit ---
@@ -87,36 +85,36 @@ func (postEditPage) Props(r *http.Request, s *store.Store) (postFormViewProps, e
 	return postFormViewProps{User: user, Categories: s.ListCategories(), Post: p}, nil
 }
 
-templ (postEditPage) Page(props postFormViewProps) {
-	@layout.AdminShell("Edit post", props.User) {
+component (p postEditPage) Page(props postFormViewProps) {
+	<layout.AdminShell title="Edit post" current={props.User}>
 		<h1 class="mb-4 text-2xl font-semibold">Edit post</h1>
-		@postForm(props.Post, props.Categories, "")
-	}
+		<PostForm p={props.Post} cats={props.Categories} errMsg=""/>
+	</layout.AdminShell>
 }
 
 // --- Shared form ---
 
-templ postForm(p store.Post, cats []store.Category, errMsg string) {
+component PostForm(p store.Post, cats []store.Category, errMsg string) {
 	<form method="POST" action={ postFormAction(ctx, p) } class="space-y-3">
-		@components.Alert(components.AlertError, errMsg)
-		@components.Input("title", "Title", p.Title, "")
-		@components.Input("slug", "Slug (auto if blank)", p.Slug, "")
+		<components.Alert kind={components.AlertError} msg={errMsg}/>
+		<components.Input name="title" label="Title" value={p.Title} errMsg=""/>
+		<components.Input name="slug" label="Slug (auto if blank)" value={p.Slug} errMsg=""/>
 		<label class="block text-sm">
 			<span class="mb-1 block font-medium text-slate-700">Category</span>
 			<select name="category_id" class="w-full rounded border border-slate-300 px-2 py-1.5 text-sm">
 				<option value="0">— pick one —</option>
-				for _, c := range cats {
-					<option value={ c.ID } selected?={ c.ID == p.CategoryID }>{ c.Name }</option>
-				}
+				{ for _, c := range cats {
+					<option value={c.ID} selected={ c.ID == p.CategoryID }>{c.Name}</option>
+				} }
 			</select>
 		</label>
-		@components.Textarea("body", "Body", p.Body, "")
+		<components.Textarea name="body" label="Body" value={p.Body} errMsg=""/>
 		<label class="flex items-center gap-2 text-sm">
-			<input type="checkbox" name="published" checked?={ p.Published }/>
+			<input type="checkbox" name="published" checked={p.Published}/>
 			Publish immediately
 		</label>
 		<div class="flex items-center gap-2">
-			@components.Button("Save", templ.Attributes{"type": "submit"})
+			<components.Button label="Save" { gsx.Attrs{"type": "submit"}... }/>
 			<a class="text-sm text-slate-500 hover:underline" href={ components.URL(ctx, postListPage{}) }>Cancel</a>
 		</div>
 	</form>
diff --git a/examples/blog/admin/users.templ b/examples/blog/admin/users.gsx
similarity index 71%
rename from examples/blog/admin/users.templ
rename to examples/blog/admin/users.gsx
index b6faa0c..f892bc1 100644
--- a/examples/blog/admin/users.templ
+++ b/examples/blog/admin/users.gsx
@@ -3,6 +3,7 @@ package admin
 import (
 	"net/http"
 
+	"github.com/gsxhq/gsx"
 	"github.com/jackielii/structpages/examples/blog/auth"
 	"github.com/jackielii/structpages/examples/blog/store"
 	"github.com/jackielii/structpages/examples/blog/ui/components"
@@ -21,24 +22,19 @@ func (userListPage) Props(r *http.Request, s *store.Store) (userListProps, error
 	return userListProps{User: user, Users: s.ListUsers()}, nil
 }
 
-templ (p userListPage) Page(props userListProps) {
-	@layout.AdminShell("Users", props.User) {
-		@p.Content(props)
-	}
-}
-
-templ (userListPage) Content(props userListProps) {
-	<h1 class="mb-4 text-2xl font-semibold">Users</h1>
-	<div class="grid gap-4 md:grid-cols-2">
-		@components.Card("Existing users") {
+component (p userListPage) Page(props userListProps) {
+	<layout.AdminShell title="Users" current={props.User}>
+		<h1 class="mb-4 text-2xl font-semibold">Users</h1>
+		<div class="grid gap-4 md:grid-cols-2">
+		<components.Card title="Existing users">
 			<ul class="divide-y text-sm">
-				for _, u := range props.Users {
+				{ for _, u := range props.Users {
 					<li class="flex items-center justify-between py-2">
 						<span>
-							{ u.Username }
-							if u.IsAdmin {
+							{u.Username}
+							{ if u.IsAdmin {
 								<span class="ml-2 rounded bg-slate-900 px-2 py-0.5 text-xs text-white">admin</span>
-							}
+							} }
 						</span>
 						<form
 							method="POST"
@@ -48,12 +44,12 @@ templ (userListPage) Content(props userListProps) {
 							<button class="text-xs text-red-600 hover:underline" type="submit">Delete</button>
 						</form>
 					</li>
-				}
+				} }
 			</ul>
-		}
-		@components.Card("Create user") {
+		</components.Card>
+		<components.Card title="Create user">
 			<form method="POST" action={ components.URL(ctx, userCreateHandler{}) } class="space-y-3">
-				@components.Input("username", "Username", "", "")
+				<components.Input name="username" label="Username" value="" errMsg=""/>
 				<label class="block text-sm">
 					<span class="mb-1 block font-medium text-slate-700">Password</span>
 					<input
@@ -67,8 +63,9 @@ templ (userListPage) Content(props userListProps) {
 					<input type="checkbox" name="is_admin"/>
 					Grant admin
 				</label>
-				@components.Button("Create", templ.Attributes{"type": "submit"})
+				<components.Button label="Create" { gsx.Attrs{"type": "submit"}... }/>
 			</form>
-		}
+		</components.Card>
 	</div>
+	</layout.AdminShell>
 }
diff --git a/examples/blog/blog/category.templ b/examples/blog/blog/category.gsx
similarity index 58%
rename from examples/blog/blog/category.templ
rename to examples/blog/blog/category.gsx
index 61e717e..fa89563 100644
--- a/examples/blog/blog/category.templ
+++ b/examples/blog/blog/category.gsx
@@ -15,7 +15,7 @@ type categoryPage struct{}
 type categoryProps struct {
 	Category   store.Category
 	Posts      []store.Post
-	Pagination components.PaginationProps
+	Pagination components.PageNav
 }
 
 func (categoryPage) Props(r *http.Request, s *store.Store) (categoryProps, error) {
@@ -34,13 +34,11 @@ func (categoryPage) Props(r *http.Request, s *store.Store) (categoryProps, error
 		PageSize:   store.DefaultPageSize,
 	})
 
-	// URL closure captures the request context so links re-use the current
-	// route params (slug auto-fills from r.PathValue).
 	ctx := r.Context()
 	return categoryProps{
 		Category: cat,
 		Posts:    posts,
-		Pagination: components.PaginationProps{
+		Pagination: components.PageNav{
 			Page:     page,
 			PageSize: store.DefaultPageSize,
 			Total:    total,
@@ -54,24 +52,20 @@ func (categoryPage) Props(r *http.Request, s *store.Store) (categoryProps, error
 	}, nil
 }
 
-templ (p categoryPage) Page(props categoryProps) {
-	@layout.PublicShell(props.Category.Name) {
-		@p.Content(props)
-	}
-}
-
-templ (categoryPage) Content(props categoryProps) {
-	<h1 class="mb-1 text-2xl font-semibold">{ props.Category.Name }</h1>
-	<p class="mb-6 text-sm text-slate-500">Posts filed under this category.</p>
-	<div class="space-y-4">
-		if len(props.Posts) == 0 {
-			<p class="text-sm text-slate-500">Nothing here yet.</p>
-		}
-		for _, post := range props.Posts {
-			@PostCard(post)
-		}
-	</div>
-	<div class="mt-6">
-		@components.Pagination(props.Pagination)
-	</div>
+component (p categoryPage) Page(props categoryProps) {
+	<layout.PublicShell title={props.Category.Name}>
+		<h1 class="mb-1 text-2xl font-semibold">{props.Category.Name}</h1>
+		<p class="mb-6 text-sm text-slate-500">Posts filed under this category.</p>
+		<div class="space-y-4">
+			{ if len(props.Posts) == 0 {
+				<p class="text-sm text-slate-500">Nothing here yet.</p>
+			} }
+			{ for _, post := range props.Posts {
+				<PostCard p={post}/>
+			} }
+		</div>
+		<div class="mt-6">
+			{ components.Pagination(props.Pagination) }
+		</div>
+	</layout.PublicShell>
 }
diff --git a/examples/blog/blog/components.templ b/examples/blog/blog/components.templ
deleted file mode 100644
index 500cb42..0000000
--- a/examples/blog/blog/components.templ
+++ /dev/null
@@ -1,47 +0,0 @@
-// Feature-local templ components for the public blog. These are templ
-// functions (not page methods) so other handlers in this package can target
-// them via RenderComponent — most notably the comment handler, which
-// re-renders CommentsList after a successful POST.
-package blog
-
-import (
-	"github.com/jackielii/structpages"
-	"github.com/jackielii/structpages/examples/blog/store"
-	"github.com/jackielii/structpages/examples/blog/ui/components"
-)
-
-templ PostMeta(p store.Post) {
-	<p class="text-xs text-slate-500">
-		Posted { p.CreatedAt.Format("Jan 2, 2006") }
-	</p>
-}
-
-templ PostCard(p store.Post) {
-	<article class="rounded-lg border bg-white p-5 shadow-sm">
-		<a class="text-lg font-semibold text-slate-900 hover:underline" href={ components.URL(ctx, postPage{}, "slug", p.Slug) }>
-			{ p.Title }
-		</a>
-		@PostMeta(p)
-		<p class="mt-2 line-clamp-2 text-sm text-slate-700">{ p.Body }</p>
-	</article>
-}
-
-// CommentsList is a standalone function component so the commentHandler
-// can re-render it from ServeHTTP via RenderComponent(CommentsList(...)).
-// It owns its own wrapper id, which doubles as the HTMX hx-target.
-templ CommentsList(comments []store.Comment) {
-	<div id={ structpages.ID(ctx, CommentsList) } class="space-y-3">
-		if len(comments) == 0 {
-			<p class="text-sm text-slate-500">No comments yet — be the first.</p>
-		}
-		for _, c := range comments {
-			<article class="rounded border bg-slate-50 p-3">
-				<header class="text-xs font-medium text-slate-700">
-					{ c.Author } · { c.CreatedAt.Format("15:04 Jan 2") }
-				</header>
-				<p class="mt-1 text-sm text-slate-800">{ c.Body }</p>
-			</article>
-		}
-		<p class="text-xs text-slate-400">Total: { len(comments) }</p>
-	</div>
-}
diff --git a/examples/blog/blog/home.gsx b/examples/blog/blog/home.gsx
new file mode 100644
index 0000000..566be3b
--- /dev/null
+++ b/examples/blog/blog/home.gsx
@@ -0,0 +1,49 @@
+package blog
+
+import (
+	"net/http"
+
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type homePage struct{}
+
+type homeProps struct {
+	Posts      []store.Post
+	Categories []store.Category
+}
+
+// Props loads page data. Returns homeProps directly — gsx now emits method
+// components as func (p homePage) Page(props homeProps) gsx.Node without a wrapper struct.
+func (homePage) Props(_ *http.Request, s *store.Store) (homeProps, error) {
+	posts, _ := s.ListPosts(store.PostFilter{PageSize: 5})
+	return homeProps{Posts: posts, Categories: s.ListCategories()}, nil
+}
+
+// Page renders the full document. The former Content() method is inlined here:
+// gsx's generated-props wrapping makes a separate Content(props) method
+// undispatchable by structpages alongside Page(props) (both would need the same
+// single Props-return type). See GAP notes.
+component (p homePage) Page(props homeProps) {
+	<layout.PublicShell title="Home">
+		<h1 class="mb-4 text-2xl font-semibold">Recent Posts</h1>
+		<div class="space-y-4">
+			{ for _, post := range props.Posts {
+				<PostCard p={post}/>
+			} }
+		</div>
+		<components.Card title="Browse by category">
+			<ul class="flex flex-wrap gap-2">
+				{ for _, c := range props.Categories {
+					<li>
+						<a class="rounded-full border px-3 py-1 text-sm hover:bg-slate-50" href={ components.URL(ctx, categoryPage{}, "slug", c.Slug) }>
+							{c.Name}
+						</a>
+					</li>
+				} }
+			</ul>
+		</components.Card>
+	</layout.PublicShell>
+}
diff --git a/examples/blog/blog/home.templ b/examples/blog/blog/home.templ
deleted file mode 100644
index d8be302..0000000
--- a/examples/blog/blog/home.templ
+++ /dev/null
@@ -1,52 +0,0 @@
-package blog
-
-import (
-	"net/http"
-
-	"github.com/jackielii/structpages/examples/blog/store"
-	"github.com/jackielii/structpages/examples/blog/ui/components"
-	"github.com/jackielii/structpages/examples/blog/ui/layout"
-)
-
-type homePage struct{}
-
-type homeProps struct {
-	Posts      []store.Post
-	Categories []store.Category
-}
-
-// Props demonstrates the simplest pattern: load data using a DI-injected
-// *store.Store. The framework passes *http.Request and *store.Store by
-// matching parameter types against the registry built in main.
-func (homePage) Props(_ *http.Request, s *store.Store) (homeProps, error) {
-	posts, _ := s.ListPosts(store.PostFilter{PageSize: 5})
-	return homeProps{Posts: posts, Categories: s.ListCategories()}, nil
-}
-
-// Page wraps the layout for full-document loads. HTMX nav links target
-// #content, which causes structpages to dispatch to Content() instead.
-templ (p homePage) Page(props homeProps) {
-	@layout.PublicShell("Home") {
-		@p.Content(props)
-	}
-}
-
-templ (homePage) Content(props homeProps) {
-	<h1 class="mb-4 text-2xl font-semibold">Recent Posts</h1>
-	<div class="space-y-4">
-		for _, post := range props.Posts {
-			@PostCard(post)
-		}
-	</div>
-	@components.Card("Browse by category") {
-		<ul class="flex flex-wrap gap-2">
-			for _, c := range props.Categories {
-				<li>
-					<a class="rounded-full border px-3 py-1 text-sm hover:bg-slate-50" href={ components.URL(ctx, categoryPage{}, "slug", c.Slug) }>
-						{ c.Name }
-					</a>
-				</li>
-			}
-		</ul>
-	}
-}
diff --git a/examples/blog/blog/post.gsx b/examples/blog/blog/post.gsx
new file mode 100644
index 0000000..88b100e
--- /dev/null
+++ b/examples/blog/blog/post.gsx
@@ -0,0 +1,69 @@
+package blog
+
+import (
+	"net/http"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type postPage struct{}
+
+type postProps struct {
+	Post     store.Post
+	Author   store.User
+	Category store.Category
+	Comments []store.Comment
+}
+
+func (postPage) Props(r *http.Request, s *store.Store) (postProps, error) {
+	slug := r.PathValue("slug")
+	p, err := s.GetPostBySlug(slug)
+	if err != nil {
+		return postProps{}, err
+	}
+	author, _ := s.GetUser(p.AuthorID)
+	category, _ := s.GetCategory(p.CategoryID)
+	return postProps{
+		Post:     p,
+		Author:   author,
+		Category: category,
+		Comments: s.ListComments(p.ID),
+	}, nil
+}
+
+component (p postPage) Page(props postProps) {
+	<layout.PublicShell title={props.Post.Title}>
+		<article class="space-y-3">
+			<h1 class="text-2xl font-semibold">{props.Post.Title}</h1>
+			<p class="text-sm text-slate-500">
+				by {props.Author.Username}
+				{ if props.Category.Slug != "" {
+					· <a class="hover:underline" href={ components.URL(ctx, categoryPage{}, "slug", props.Category.Slug) }>{props.Category.Name}</a>
+				} }
+			</p>
+			<div class="prose max-w-none text-slate-800">
+				<p>{props.Post.Body}</p>
+			</div>
+		</article>
+		<section class="mt-10 space-y-4">
+			<h2 class="text-lg font-semibold">Comments</h2>
+			<CommentsList comments={props.Comments}/>
+			<form
+				class="space-y-2 rounded border bg-white p-4"
+				hx-post={ structpages.URLFor(ctx, commentHandler{}, "slug", props.Post.Slug) }
+				hx-target={ structpages.IDTarget(ctx, CommentsList) }
+				hx-swap="outerHTML"
+				hx-on:htmx:after-request="this.reset()"
+			>
+				<h3 class="text-sm font-semibold">Add a comment</h3>
+				<components.Input name="author" label="Name" value="" errMsg=""/>
+				<components.Textarea name="body" label="Comment" value="" errMsg=""/>
+				<components.Button label="Post comment" { gsx.Attrs{"type": "submit"}... }/>
+			</form>
+		</section>
+	</layout.PublicShell>
+}
diff --git a/examples/blog/blog/post.templ b/examples/blog/blog/post.templ
deleted file mode 100644
index c78f3ab..0000000
--- a/examples/blog/blog/post.templ
+++ /dev/null
@@ -1,72 +0,0 @@
-package blog
-
-import (
-	"net/http"
-
-	"github.com/jackielii/structpages"
-	"github.com/jackielii/structpages/examples/blog/store"
-	"github.com/jackielii/structpages/examples/blog/ui/components"
-	"github.com/jackielii/structpages/examples/blog/ui/layout"
-)
-
-type postPage struct{}
-
-type postProps struct {
-	Post     store.Post
-	Author   store.User
-	Category store.Category
-	Comments []store.Comment
-}
-
-func (postPage) Props(r *http.Request, s *store.Store) (postProps, error) {
-	slug := r.PathValue("slug")
-	p, err := s.GetPostBySlug(slug)
-	if err != nil {
-		return postProps{}, err
-	}
-	author, _ := s.GetUser(p.AuthorID)
-	category, _ := s.GetCategory(p.CategoryID)
-	return postProps{
-		Post:     p,
-		Author:   author,
-		Category: category,
-		Comments: s.ListComments(p.ID),
-	}, nil
-}
-
-templ (p postPage) Page(props postProps) {
-	@layout.PublicShell(props.Post.Title) {
-		@p.Content(props)
-	}
-}
-
-templ (postPage) Content(props postProps) {
-	<article class="space-y-3">
-		<h1 class="text-2xl font-semibold">{ props.Post.Title }</h1>
-		<p class="text-sm text-slate-500">
-			by { props.Author.Username }
-			if props.Category.Slug != "" {
-				· <a class="hover:underline" href={ components.URL(ctx, categoryPage{}, "slug", props.Category.Slug) }>{ props.Category.Name }</a>
-			}
-		</p>
-		<div class="prose max-w-none text-slate-800">
-			<p>{ props.Post.Body }</p>
-		</div>
-	</article>
-	<section class="mt-10 space-y-4">
-		<h2 class="text-lg font-semibold">Comments</h2>
-		@CommentsList(props.Comments)
-		<form
-			class="space-y-2 rounded border bg-white p-4"
-			hx-post={ structpages.URLFor(ctx, commentHandler{}, "slug", props.Post.Slug) }
-			hx-target={ structpages.IDTarget(ctx, CommentsList) }
-			hx-swap="outerHTML"
-			hx-on:htmx:after-request="this.reset()"
-		>
-			<h3 class="text-sm font-semibold">Add a comment</h3>
-			@components.Input("author", "Name", "", "")
-			@components.Textarea("body", "Comment", "", "")
-			@components.Button("Post comment", templ.Attributes{"type": "submit"})
-		</form>
-	</section>
-}
diff --git a/examples/blog/blog/search.gsx b/examples/blog/blog/search.gsx
new file mode 100644
index 0000000..72a84f0
--- /dev/null
+++ b/examples/blog/blog/search.gsx
@@ -0,0 +1,69 @@
+package blog
+
+import (
+	"net/http"
+
+	"github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type searchPage struct{}
+
+type searchProps struct {
+	Query string
+	Posts []store.Post
+}
+
+// Props uses RenderTarget to load less when HTMX only wants the results
+// fragment. On the initial page load it returns the full searchProps; when the
+// Results fragment is targeted it renders just that component via RenderComponent.
+func (p searchPage) Props(r *http.Request, s *store.Store, target structpages.RenderTarget) (searchProps, error) {
+	q := r.URL.Query().Get("q")
+	sp := searchProps{Query: q}
+	if q != "" {
+		sp.Posts, _ = s.ListPosts(store.PostFilter{Search: q})
+	}
+	if target.Is(p.Results) {
+		return searchProps{}, structpages.RenderComponent(p.Results(sp))
+	}
+	return sp, nil
+}
+
+component (p searchPage) Page(props searchProps) {
+	<layout.PublicShell title="Search">
+		<h1 class="mb-4 text-2xl font-semibold">Search</h1>
+		<form
+			class="mb-6"
+			hx-get={ structpages.URLFor(ctx, searchPage{}) }
+			hx-target={ structpages.IDTarget(ctx, p.Results) }
+			hx-swap="outerHTML"
+			hx-trigger="input changed delay:250ms from:input, submit"
+			hx-push-url="true"
+		>
+			<input
+				name="q"
+				value={props.Query}
+				placeholder="Search posts..."
+				class="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+				autofocus
+			/>
+		</form>
+		<p.Results { props... }/>
+	</layout.PublicShell>
+}
+
+component (p searchPage) Results(props searchProps) {
+	<div id={ structpages.ID(ctx, searchPage.Results) } class="space-y-4">
+		{ if props.Query == "" {
+			<p class="text-sm text-slate-500">Type a query to search.</p>
+		} else if len(props.Posts) == 0 {
+			<p class="text-sm text-slate-500">No results for "{props.Query}".</p>
+		} else {
+			<p class="text-xs text-slate-500">{resultsCount(len(props.Posts))}</p>
+			{ for _, post := range props.Posts {
+				<PostCard p={post}/>
+			} }
+		} }
+	</div>
+}
diff --git a/examples/blog/blog/search.templ b/examples/blog/blog/search.templ
deleted file mode 100644
index a7d15a5..0000000
--- a/examples/blog/blog/search.templ
+++ /dev/null
@@ -1,73 +0,0 @@
-package blog
-
-import (
-	"net/http"
-
-	"github.com/jackielii/structpages"
-	"github.com/jackielii/structpages/examples/blog/store"
-	"github.com/jackielii/structpages/examples/blog/ui/layout"
-)
-
-type searchPage struct{}
-
-type searchProps struct {
-	Query string
-	Posts []store.Post
-}
-
-// Props uses RenderTarget to load less when HTMX only wants the results
-// fragment. On the initial page load we render the full layout; on
-// subsequent keystrokes we only return the Results partial.
-func (p searchPage) Props(r *http.Request, s *store.Store, target structpages.RenderTarget) (searchProps, error) {
-	q := r.URL.Query().Get("q")
-	props := searchProps{Query: q}
-	if q != "" {
-		props.Posts, _ = s.ListPosts(store.PostFilter{Search: q})
-	}
-	if target.Is(p.Results) {
-		return searchProps{}, structpages.RenderComponent(p.Results, props)
-	}
-	return props, nil
-}
-
-templ (p searchPage) Page(props searchProps) {
-	@layout.PublicShell("Search") {
-		@p.Content(props)
-	}
-}
-
-templ (p searchPage) Content(props searchProps) {
-	<h1 class="mb-4 text-2xl font-semibold">Search</h1>
-	<form
-		class="mb-6"
-		hx-get={ structpages.URLFor(ctx, searchPage{}) }
-		hx-target={ structpages.IDTarget(ctx, p.Results) }
-		hx-swap="outerHTML"
-		hx-trigger="input changed delay:250ms from:input, submit"
-		hx-push-url="true"
-	>
-		<input
-			name="q"
-			value={ props.Query }
-			placeholder="Search posts..."
-			class="w-full rounded border border-slate-300 px-3 py-2 text-sm"
-			autofocus
-		/>
-	</form>
-	@p.Results(props)
-}
-
-templ (searchPage) Results(props searchProps) {
-	<div id={ structpages.ID(ctx, searchPage.Results) } class="space-y-4">
-		if props.Query == "" {
-			<p class="text-sm text-slate-500">Type a query to search.</p>
-		} else if len(props.Posts) == 0 {
-			<p class="text-sm text-slate-500">No results for "{ props.Query }".</p>
-		} else {
-			<p class="text-xs text-slate-500">{ resultsCount(len(props.Posts)) }</p>
-			for _, post := range props.Posts {
-				@PostCard(post)
-			}
-		}
-	</div>
-}
diff --git a/examples/blog/ui/components/components.templ b/examples/blog/ui/components/components.gsx
similarity index 60%
rename from examples/blog/ui/components/components.templ
rename to examples/blog/ui/components/components.gsx
index 626ed6c..1e84124 100644
--- a/examples/blog/ui/components/components.templ
+++ b/examples/blog/ui/components/components.gsx
@@ -2,7 +2,7 @@
 // every feature package: buttons, form fields, alerts, cards, pagination,
 // and the styled error component used by the global error handler.
 //
-// Each function is a standalone templ component (not a method on a page
+// Each function is a standalone gsx component (not a method on a page
 // struct). That means they can be addressed by HTMX as targets via their
 // kebab-cased name — e.g. hx-target="#pagination" matches Pagination.
 package components
@@ -26,109 +26,110 @@ func alertClasses(kind AlertKind) string {
 	}
 }
 
-templ Alert(kind AlertKind, msg string) {
-	if msg != "" {
-		<div class={ "rounded border px-3 py-2 text-sm", alertClasses(kind) }>{ msg }</div>
-	}
+component Alert(kind AlertKind, msg string) {
+	{ if msg != "" {
+		<div class={ "rounded border px-3 py-2 text-sm", alertClasses(kind) }>{msg}</div>
+	} }
 }
 
-templ Card(title string) {
+component Card(title string) {
 	<section class="rounded-lg border bg-white p-5 shadow-sm">
-		if title != "" {
-			<h2 class="mb-3 text-base font-semibold text-slate-900">{ title }</h2>
-		}
-		{ children... }
+		{ if title != "" {
+			<h2 class="mb-3 text-base font-semibold text-slate-900">{title}</h2>
+		} }
+		{children}
 	</section>
 }
 
-templ Button(label string, attrs templ.Attributes) {
+// Button takes only its label; any extra attributes (type, hx-*, etc.) fall
+// through to the root <button> automatically — no explicit attrs param.
+component Button(label string) {
 	<button
-		{ attrs... }
 		class="inline-flex items-center rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700"
 	>
-		{ label }
+		{label}
 	</button>
 }
 
-templ Input(name, label, value, errMsg string) {
+component Input(name, label, value, errMsg string) {
 	<label class="block text-sm">
-		<span class="mb-1 block font-medium text-slate-700">{ label }</span>
+		<span class="mb-1 block font-medium text-slate-700">{label}</span>
 		<input
-			name={ name }
-			value={ value }
+			name={name}
+			value={value}
 			class={
 				"w-full rounded border px-2 py-1.5 text-sm",
-				templ.KV("border-slate-300", errMsg == ""),
-				templ.KV("border-red-400", errMsg != ""),
+				"border-slate-300": errMsg == "",
+				"border-red-400": errMsg != "",
 			}
 		/>
-		if errMsg != "" {
-			<span class="mt-1 block text-xs text-red-600">{ errMsg }</span>
-		}
+		{ if errMsg != "" {
+			<span class="mt-1 block text-xs text-red-600">{errMsg}</span>
+		} }
 	</label>
 }
 
-templ Textarea(name, label, value, errMsg string) {
+component Textarea(name, label, value, errMsg string) {
 	<label class="block text-sm">
-		<span class="mb-1 block font-medium text-slate-700">{ label }</span>
+		<span class="mb-1 block font-medium text-slate-700">{label}</span>
 		<textarea
-			name={ name }
+			name={name}
 			rows="6"
 			class={
 				"w-full rounded border px-2 py-1.5 text-sm",
-				templ.KV("border-slate-300", errMsg == ""),
-				templ.KV("border-red-400", errMsg != ""),
+				"border-slate-300": errMsg == "",
+				"border-red-400": errMsg != "",
 			}
-		>{ value }</textarea>
-		if errMsg != "" {
-			<span class="mt-1 block text-xs text-red-600">{ errMsg }</span>
-		}
+		>{value}</textarea>
+		{ if errMsg != "" {
+			<span class="mt-1 block text-xs text-red-600">{errMsg}</span>
+		} }
 	</label>
 }
 
 // Pagination is rendered as a standalone function component so HTMX requests
 // with HX-Target: #pagination resolve here regardless of which page hosts it.
-templ Pagination(p PaginationProps) {
+component Pagination(p PageNav) {
 	<nav id="pagination" class="flex items-center justify-between text-sm">
-		<span class="text-slate-500">{ p.Range() }</span>
+		<span class="text-slate-500">{p.Range()}</span>
 		<div class="flex gap-2">
-			if p.HasPrev() {
+			{ if p.HasPrev() {
 				<a class="rounded border px-2 py-1 hover:bg-slate-50" href={ p.URL(p.Page - 1) }>← Prev</a>
 			} else {
 				<span class="rounded border px-2 py-1 text-slate-300">← Prev</span>
-			}
-			<span class="px-2 py-1 text-slate-600">Page { p.Page } of { p.Pages() }</span>
-			if p.HasNext() {
+			} }
+			<span class="px-2 py-1 text-slate-600">Page {p.Page} of {p.Pages()}</span>
+			{ if p.HasNext() {
 				<a class="rounded border px-2 py-1 hover:bg-slate-50" href={ p.URL(p.Page + 1) }>Next →</a>
 			} else {
 				<span class="rounded border px-2 py-1 text-slate-300">Next →</span>
-			}
+			} }
 		</div>
 	</nav>
 }
 
 // ErrorPage is the full document rendered by main.errorHandler for non-HTMX
 // errors. ErrorBlock is the partial used for HTMX requests.
-templ ErrorPage(status int, msg string) {
+component ErrorPage(status int, msg string) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
 			<meta charset="utf-8"/>
-			<title>Error { status }</title>
+			<title>Error {status}</title>
 			<script src="https://cdn.tailwindcss.com"></script>
 		</head>
 		<body class="bg-slate-50 text-slate-900">
 			<main class="mx-auto max-w-md px-4 py-16">
-				@ErrorBlock(status, msg)
+				<ErrorBlock status={status} msg={msg}/>
 			</main>
 		</body>
 	</html>
 }
 
-templ ErrorBlock(status int, msg string) {
+component ErrorBlock(status int, msg string) {
 	<div class="rounded-lg border border-red-200 bg-red-50 p-6 text-center">
-		<div class="text-4xl font-semibold text-red-700">{ status }</div>
-		<p class="mt-2 text-red-700">{ msg }</p>
+		<div class="text-4xl font-semibold text-red-700">{status}</div>
+		<p class="mt-2 text-red-700">{msg}</p>
 		<a class="mt-4 inline-block text-sm text-red-700 underline" href="/">Back to home</a>
 	</div>
 }
diff --git a/examples/blog/ui/layout/layout.templ b/examples/blog/ui/layout/layout.gsx
similarity index 89%
rename from examples/blog/ui/layout/layout.templ
rename to examples/blog/ui/layout/layout.gsx
index 4675a1f..b28e7de 100644
--- a/examples/blog/ui/layout/layout.templ
+++ b/examples/blog/ui/layout/layout.gsx
@@ -1,5 +1,5 @@
 // Package layout exports the shared HTML shells used by every page.
-// Feature packages call PublicShell or AdminShell with { children... }
+// Feature packages call PublicShell or AdminShell with {children}
 // instead of writing their own <html> document.
 package layout
 
@@ -11,13 +11,13 @@ import (
 // PublicShell wraps reader-facing pages. Cross-feature links (e.g. the admin
 // link) use structpages.Ref so this package never imports admin or blog —
 // keeping the dependency graph one-way (features → ui).
-templ PublicShell(title string) {
+component PublicShell(title string) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
 			<meta charset="utf-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1"/>
-			<title>{ title } — structpages blog</title>
+			<title>{title} — structpages blog</title>
 			<script src="https://cdn.tailwindcss.com"></script>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 		</head>
@@ -33,20 +33,20 @@ templ PublicShell(title string) {
 				</div>
 			</header>
 			<main id="content" class="mx-auto max-w-3xl px-4 py-8">
-				{ children... }
+				{children}
 			</main>
 		</body>
 	</html>
 }
 
 // AdminShell wraps the authenticated admin app.
-templ AdminShell(title string, current store.User) {
+component AdminShell(title string, current store.User) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
 			<meta charset="utf-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1"/>
-			<title>Admin — { title }</title>
+			<title>Admin — {title}</title>
 			<script src="https://cdn.tailwindcss.com"></script>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 		</head>
@@ -62,7 +62,7 @@ templ AdminShell(title string, current store.User) {
 						<a class="hover:underline" href={ structpages.URLFor(ctx, structpages.Ref("postList")) }>Posts</a>
 						<a class="hover:underline" href={ structpages.URLFor(ctx, structpages.Ref("userList")) }>Users</a>
 						<span class="text-slate-400">|</span>
-						<span class="text-slate-300">{ current.Username }</span>
+						<span class="text-slate-300">{current.Username}</span>
 						<form method="POST" action={ structpages.URLFor(ctx, structpages.Ref("logout")) } class="m-0">
 							<button class="text-slate-300 hover:text-white" type="submit">Sign out</button>
 						</form>
@@ -70,7 +70,7 @@ templ AdminShell(title string, current store.User) {
 				</div>
 			</header>
 			<main id="content" class="mx-auto max-w-5xl px-4 py-8">
-				{ children... }
+				{children}
 			</main>
 		</body>
 	</html>
diff --git a/examples/htmx-render-target/pages.gsx b/examples/htmx-render-target/pages.gsx
new file mode 100644
index 0000000..76920b8
--- /dev/null
+++ b/examples/htmx-render-target/pages.gsx
@@ -0,0 +1,149 @@
+package main
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/jackielii/structpages"
+)
+
+// Shared standalone function components (can be used across multiple pages).
+// These demonstrate the power of RenderTarget — no wrapper methods needed.
+
+component UserStatsWidget(stats UserStats) {
+	<div class="widget">
+		<h3>User Statistics</h3>
+		<p>Active Users: { fmt.Sprintf("%d", stats.ActiveUsers) }</p>
+		<p>New Today: { fmt.Sprintf("%d", stats.NewToday) }</p>
+		<button
+			type="button"
+			hx-get={ urlFor(ctx, dashboard{}) }
+			hx-target={ idForTarget(ctx, UserStatsWidget) }
+		>Refresh Stats</button>
+	</div>
+}
+
+component SalesChartWidget(data SalesData) {
+	<div class="widget">
+		<h3>Sales Chart</h3>
+		<div class="chart">
+			{ for _, point := range data.Points {
+				<div class="bar" data-h={ fmt.Sprint(point.Value) } style="width: 30px; background: blue; display: inline-block; margin: 2px;"></div>
+			} }
+		</div>
+		<p>Total Sales: ${ fmt.Sprintf("%.2f", data.Total) }</p>
+		<button
+			type="button"
+			hx-get={ urlFor(ctx, dashboard{}) }
+			hx-target={ idForTarget(ctx, SalesChartWidget) }
+		>Refresh Sales</button>
+	</div>
+}
+
+component NotificationsList(notifications []Notification) {
+	<div class="widget">
+		<h3>Recent Notifications</h3>
+		<ul>
+			{ for _, n := range notifications {
+				<li>{ n.Message } <small>({ n.Time.Format("15:04") })</small></li>
+			} }
+		</ul>
+		<button
+			type="button"
+			hx-get={ urlFor(ctx, dashboard{}) }
+			hx-target={ idForTarget(ctx, NotificationsList) }
+		>Refresh Notifications</button>
+	</div>
+}
+
+// Dashboard page.
+
+type dashboard struct{}
+
+component (p dashboard) Page(props dashboardData) {
+	<Html>
+		<h1>Dashboard</h1>
+		<p>This example demonstrates the RenderTarget API with standalone function components.</p>
+		<p>Click "Refresh" buttons to see HTMX partial updates — each widget loads only its own data!</p>
+		<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;">
+			<div id={ idFor(ctx, UserStatsWidget) }>
+				<UserStatsWidget { props.Stats... } />
+			</div>
+			<div id={ idFor(ctx, SalesChartWidget) }>
+				<SalesChartWidget { props.Sales... } />
+			</div>
+			<div id={ idFor(ctx, NotificationsList) }>
+				<NotificationsList notifications={props.Notifications} />
+			</div>
+		</div>
+		<div style="margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 4px;">
+			<h4>How it works:</h4>
+			<ul>
+				<li>✅ <strong>Standalone functions</strong> — UserStatsWidget, SalesChartWidget, NotificationsList are shared components</li>
+				<li>✅ <strong>Conditional loading</strong> — Props checks target.Is() and loads only needed data</li>
+				<li>✅ <strong>RenderComponent (direct)</strong> — construct the gsx component with its props struct and pass directly</li>
+				<li>✅ <strong>No wrapper methods</strong> — No need to create dashboard.UserStats() method!</li>
+				<li>✅ <strong>HTMX integration</strong> — HTMXRenderTarget automatically handles partial updates</li>
+			</ul>
+		</div>
+	</Html>
+}
+
+// Html is the full-page layout.
+component Html() {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3" />
+			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
+			<title>RenderTarget API Example</title>
+			<style>
+				.widget {
+					padding: 1rem;
+					border: 1px solid #ddd;
+					border-radius: 8px;
+					background: white;
+				}
+				.widget h3 {
+					margin-top: 0;
+				}
+				.chart {
+					display: flex;
+					align-items: flex-end;
+					height: 150px;
+					margin: 1rem 0;
+				}
+			</style>
+		</head>
+		<body>
+			<main>
+				{children}
+			</main>
+		</body>
+	</html>
+}
+
+component ErrorPage(err error) {
+	<Html>
+		<ErrorComp err={err} />
+	</Html>
+}
+
+component ErrorComp(err error) {
+	<h1>Error</h1>
+	<p>{ err.Error() }</p>
+}
+
+// Helper functions
+
+func urlFor(ctx context.Context, page any, args ...any) (string, error) {
+	return structpages.URLFor(ctx, page, args...)
+}
+
+func idFor(ctx context.Context, v any) (string, error) {
+	return structpages.ID(ctx, v)
+}
+
+func idForTarget(ctx context.Context, v any) (string, error) {
+	return structpages.IDTarget(ctx, v)
+}
diff --git a/examples/htmx-render-target/pages.templ b/examples/htmx-render-target/pages.templ
deleted file mode 100644
index 9cb3b90..0000000
--- a/examples/htmx-render-target/pages.templ
+++ /dev/null
@@ -1,270 +0,0 @@
-package main
-
-import (
-	"context"
-	"fmt"
-	"math/rand/v2"
-	"net/http"
-	"time"
-
-	"github.com/jackielii/structpages"
-)
-
-// Shared standalone function components (can be used across multiple pages)
-// These demonstrate the power of RenderTarget - no need for wrapper methods!
-templ UserStatsWidget(stats UserStats) {
-	<div class="widget">
-		<h3>User Statistics</h3>
-		<p>Active Users: { fmt.Sprintf("%d", stats.ActiveUsers) }</p>
-		<p>New Today: { fmt.Sprintf("%d", stats.NewToday) }</p>
-		<button
-			type="button"
-			hx-get={ urlFor(ctx, dashboard{}) }
-			hx-target={ idForTarget(ctx, UserStatsWidget) }
-		>
-			Refresh Stats
-		</button>
-	</div>
-}
-
-templ SalesChartWidget(data SalesData) {
-	<div class="widget">
-		<h3>Sales Chart</h3>
-		<div class="chart">
-			for _, point := range data.Points {
-				<div class="bar" style={ fmt.Sprintf("height: %dpx; width: 30px; background: blue; display: inline-block; margin: 2px;", point.Value) }></div>
-			}
-		</div>
-		<p>Total Sales: ${ fmt.Sprintf("%.2f", data.Total) }</p>
-		<button
-			type="button"
-			hx-get={ urlFor(ctx, dashboard{}) }
-			hx-target={ idForTarget(ctx, SalesChartWidget) }
-		>
-			Refresh Sales
-		</button>
-	</div>
-}
-
-templ NotificationsList(notifications []Notification) {
-	<div class="widget">
-		<h3>Recent Notifications</h3>
-		<ul>
-			for _, n := range notifications {
-				<li>{ n.Message } <small>({ n.Time.Format("15:04") })</small></li>
-			}
-		</ul>
-		<button
-			type="button"
-			hx-get={ urlFor(ctx, dashboard{}) }
-			hx-target={ idForTarget(ctx, NotificationsList) }
-		>
-			Refresh Notifications
-		</button>
-	</div>
-}
-
-// Dashboard page using RenderTarget API
-
-type dashboard struct{}
-
-type DashboardProps struct {
-	Stats         UserStats
-	Sales         SalesData
-	Notifications []Notification
-}
-
-type UserStats struct {
-	ActiveUsers int
-	NewToday    int
-}
-
-type SalesData struct {
-	Points []DataPoint
-	Total  float64
-}
-
-type DataPoint struct {
-	Label string
-	Value int
-}
-
-type Notification struct {
-	Message string
-	Time    time.Time
-}
-
-// Props demonstrates conditional data loading with RenderTarget
-func (p dashboard) Props(r *http.Request, target structpages.RenderTarget) (DashboardProps, error) {
-	// Check which component is being requested and load only necessary data
-	switch {
-	case target.Is(UserStatsWidget):
-		// Only load user stats (lightweight query)
-		stats := loadUserStats()
-		comp := UserStatsWidget(stats)
-		// Use RenderComponent with target to render just this widget
-		return DashboardProps{}, structpages.RenderComponent(comp)
-
-	case target.Is(SalesChartWidget):
-		// Only load sales data (expensive query - avoid loading unnecessarily)
-		sales := loadSalesData()
-		return DashboardProps{}, structpages.RenderComponent(target, sales)
-
-	case target.Is(NotificationsList):
-		// Only load notifications
-		notifications := loadNotifications()
-		return DashboardProps{}, structpages.RenderComponent(target, notifications)
-
-	case target.Is(p.Page):
-		// Full page load - load all data
-		return DashboardProps{
-			Stats:         loadUserStats(),
-			Sales:         loadSalesData(),
-			Notifications: loadNotifications(),
-		}, nil
-
-	default:
-		// Fallback to full page
-		return DashboardProps{
-			Stats:         loadUserStats(),
-			Sales:         loadSalesData(),
-			Notifications: loadNotifications(),
-		}, nil
-	}
-}
-
-templ (p dashboard) Page(props DashboardProps) {
-	@html() {
-		<h1>Dashboard</h1>
-		<p>This example demonstrates the new RenderTarget API with standalone function components.</p>
-		<p>Click "Refresh" buttons to see HTMX partial updates - each widget loads only its own data!</p>
-		<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;">
-			<div id={ idFor(ctx, UserStatsWidget) }>
-				@UserStatsWidget(props.Stats)
-			</div>
-			<div id={ idFor(ctx, SalesChartWidget) }>
-				@SalesChartWidget(props.Sales)
-			</div>
-			<div id={ idFor(ctx, NotificationsList) }>
-				@NotificationsList(props.Notifications)
-			</div>
-		</div>
-		<div style="margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 4px;">
-			<h4>How it works:</h4>
-			<ul>
-				<li>✅ <strong>Standalone functions</strong> - UserStatsWidget, SalesChartWidget, NotificationsList are shared components</li>
-				<li>✅ <strong>Conditional loading</strong> - Props checks target.Is() and loads only needed data</li>
-				<li>✅ <strong>RenderComponent</strong> - Passes specific data to each widget</li>
-				<li>✅ <strong>No wrapper methods</strong> - No need to create dashboard.UserStats() method!</li>
-				<li>✅ <strong>HTMX integration</strong> - HTMXRenderTarget automatically handles partial updates</li>
-			</ul>
-		</div>
-	}
-}
-
-// Mock data loaders (simulating database queries)
-// Using random data to showcase HTMX partial updates
-func loadUserStats() UserStats {
-	return UserStats{
-		ActiveUsers: 1000 + rand.IntN(500),
-		NewToday:    10 + rand.IntN(90),
-	}
-}
-
-func loadSalesData() SalesData {
-	points := []DataPoint{
-		{Label: "Mon", Value: 30 + rand.IntN(100)},
-		{Label: "Tue", Value: 30 + rand.IntN(100)},
-		{Label: "Wed", Value: 30 + rand.IntN(100)},
-		{Label: "Thu", Value: 30 + rand.IntN(100)},
-		{Label: "Fri", Value: 30 + rand.IntN(100)},
-	}
-	total := 0.0
-	for _, p := range points {
-		total += float64(p.Value) * 100.0
-	}
-	return SalesData{
-		Points: points,
-		Total:  total,
-	}
-}
-
-func loadNotifications() []Notification {
-	messages := []string{
-		"New user registered",
-		"Payment received",
-		"System update available",
-		"New order placed",
-		"Report generated",
-		"Backup completed",
-	}
-	count := 3 + rand.IntN(3)
-	notifications := make([]Notification, count)
-	for i := 0; i < count; i++ {
-		notifications[i] = Notification{
-			Message: messages[rand.IntN(len(messages))],
-			Time:    time.Now().Add(-time.Duration(rand.IntN(120)) * time.Minute),
-		}
-	}
-	return notifications
-}
-
-// HTML layout
-templ html() {
-	<!DOCTYPE html>
-	<html lang="en">
-		<head>
-			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3"/>
-			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
-			<title>RenderTarget API Example</title>
-			<style>
-				.widget {
-					padding: 1rem;
-					border: 1px solid #ddd;
-					border-radius: 8px;
-					background: white;
-				}
-				.widget h3 {
-					margin-top: 0;
-				}
-				.chart {
-					display: flex;
-					align-items: flex-end;
-					height: 150px;
-					margin: 1rem 0;
-				}
-			</style>
-		</head>
-		<body>
-			<main>
-				{ children... }
-			</main>
-		</body>
-	</html>
-}
-
-// Error handling
-templ errorPage(err error) {
-	@html() {
-		@errorComp(err)
-	}
-}
-
-templ errorComp(err error) {
-	<h1>Error</h1>
-	<p>{ err.Error() }</p>
-}
-
-// Helper functions
-func urlFor(ctx context.Context, page any, args ...any) (string, error) {
-	s, err := structpages.URLFor(ctx, page, args...)
-	return s, err
-}
-
-func idFor(ctx context.Context, v any) (string, error) {
-	return structpages.ID(ctx, v)
-}
-
-func idForTarget(ctx context.Context, v any) (string, error) {
-	return structpages.IDTarget(ctx, v)
-}
diff --git a/examples/htmx/pages.gsx b/examples/htmx/pages.gsx
new file mode 100644
index 0000000..88c31a2
--- /dev/null
+++ b/examples/htmx/pages.gsx
@@ -0,0 +1,80 @@
+package main
+
+import (
+  "fmt"
+
+	"github.com/jackielii/structpages"
+)
+
+type index struct {
+	product `route:"/product Product"`
+	team    `route:"/team Team"`
+	contact `route:"/contact Contact"`
+  throw   `route:"/throw Throw"`
+}
+type product struct{}
+type team struct{}
+type contact struct{}
+type throw struct{}
+
+component (p index) Page()   { <Layout><p.Main/></Layout> }
+component (p index) Main() {
+	<h1>Welcome to the Index Page</h1>
+	<p>Navigate to the product, team, or contact pages using the links below:</p>
+  <a hx-get={ urlFor(ctx, throw{}) } hx-target="#main">Throw (Err)</a>
+}
+
+component (p product) Page() { <Layout><p.Main/></Layout> }
+component (p product) Main() {
+	<h1>Product Page</h1>
+	<p>This is the product page.</p>
+}
+
+component (p team) Page() { <Layout><p.Main/></Layout> }
+component (p team) Main() {
+	<h1>Team Page</h1>
+	<p>This is the team page.</p>
+}
+
+component (p contact) Page() { <Layout><p.Main/></Layout> }
+component (p contact) Main() {
+	<h1>Contact Page</h1>
+	<p>This is the contact page.</p>
+}
+
+func errFunc() (string, error ) { return "", fmt.Errorf("this is an error") }
+component (p throw) Page() { <p>{errFunc()}</p> }
+
+
+component Layout() {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3" />
+			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
+			<title>HTMX Example</title>
+		</head>
+		<body>
+			<header class="navbar">
+				<nav>
+					<ul role="list" hx-push-url="true" hx-target="#main">
+						<li><a hx-get={ urlFor(ctx, index{}) }>Home</a></li>
+						<li><a hx-get={ urlFor(ctx, product{}) }>Product</a></li>
+						<li><a hx-get={ urlFor(ctx, team{}) }>Team</a></li>
+						<li><a hx-get={ urlFor(ctx, contact{}) }>Contact</a></li>
+					</ul>
+				</nav>
+			</header>
+			<main id="main">{children}</main>
+		</body>
+	</html>
+}
+
+component ErrorPage(err error) { <Layout><ErrorComp err={err} /></Layout> }
+
+component ErrorComp(err error) {
+	<h1>Error</h1>
+	<p>{ err.Error() }</p>
+}
+
+var urlFor = structpages.URLFor
diff --git a/examples/htmx/pages.templ b/examples/htmx/pages.templ
deleted file mode 100644
index 94c3ce5..0000000
--- a/examples/htmx/pages.templ
+++ /dev/null
@@ -1,104 +0,0 @@
-package main
-
-import (
-	"context"
-	"github.com/jackielii/structpages"
-)
-
-type index struct {
-	product `route:"/product Product"`
-	team    `route:"/team Team"`
-	contact `route:"/contact Contact"`
-}
-
-templ (p index) Page() {
-	@html() {
-		@p.Main()
-	}
-}
-
-templ (index) Main() {
-	<h1>Welcome to the Index Page</h1>
-	<p>Navigate to the product, team, or contact pages using the links below:</p>
-}
-
-type product struct{}
-
-templ (p product) Page() {
-	@html() {
-		@p.Main()
-	}
-}
-
-templ (product) Main() {
-	<h1>Product Page</h1>
-	<p>This is the product page.</p>
-}
-
-type team struct{}
-
-templ (p team) Page() {
-	@html() {
-		@p.Main()
-	}
-}
-
-templ (team) Main() {
-	<h1>Team Page</h1>
-	<p>This is the team page.</p>
-}
-
-type contact struct{}
-
-templ (p contact) Page() {
-	@html() {
-		@p.Main()
-	}
-}
-
-templ (contact) Main() {
-	<h1>Contact Page</h1>
-	<p>This is the contact page.</p>
-}
-
-templ html() {
-	<!DOCTYPE html>
-	<html lang="en">
-		<head>
-			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3"/>
-			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
-			<title>HTMX Example</title>
-		</head>
-		<body>
-			<header class="navbar">
-				<nav>
-					<ul role="list">
-						<li><a hx-get={ urlFor(ctx, index{}) } hx-push-url="true" hx-target="#main">Home</a></li>
-						<li><a hx-get={ urlFor(ctx, product{}) } hx-push-url="true" hx-target="#main">Product</a></li>
-						<li><a hx-get={ urlFor(ctx, team{}) } hx-push-url="true" hx-target="#main">Team</a></li>
-						<li><a hx-get={ urlFor(ctx, contact{}) } hx-push-url="true" hx-target="#main">Contact</a></li>
-					</ul>
-				</nav>
-			</header>
-			<main id="main">
-				{ children... }
-			</main>
-		</body>
-	</html>
-}
-
-templ errorPage(err error) {
-	@html() {
-		@errorComp(err)
-	}
-}
-
-templ errorComp(err error) {
-	<h1>Error</h1>
-	<p>{ err.Error() }</p>
-}
-
-func urlFor(ctx context.Context, page any, args ...any) (templ.SafeURL, error) {
-	s, err := structpages.URLFor(ctx, page, args...)
-	return templ.SafeURL(s), err
-}
diff --git a/examples/lint-misuse/pages.gsx b/examples/lint-misuse/pages.gsx
new file mode 100644
index 0000000..3cfa58f
--- /dev/null
+++ b/examples/lint-misuse/pages.gsx
@@ -0,0 +1,38 @@
+package main
+
+import (
+	"context"
+	"fmt"
+	"strconv"
+
+	"github.com/jackielii/structpages"
+)
+
+// BadLinks mirrors the templ original — it deliberately uses hard-coded
+// internal URLs so the structpages-lint [url-attr] rule has targets to flag.
+// In gsx the component uses inline params just like the templ version.
+//
+// NOTE ON gsx AUTO-ESCAPING: gsx escapes URL-context attributes
+// (href, hx-get, action, …) by context. That means a dynamically-
+// constructed javascript: or data: URL would be neutralised, preventing
+// XSS via URL sinks. However, the [url-attr] lint rule catches a
+// different problem — routing-correctness: hard-coded path strings that
+// bypass structpages.URLFor break when routes are renamed. That class of
+// bug is orthogonal to XSS escaping, so gsx's auto-escaping does NOT
+// make these findings go away. The lint still has value in gsx projects.
+component BadLinks(id int, name string) {
+	<a href="/login">Hard-coded internal</a>
+	<a href={ "/" + "admin" }>Expression literal</a>
+	<a href={ "/items/" + strconv.Itoa(id) }>Concat</a>
+	<a href={ fmt.Sprintf("/users/%s", name) }>Sprintf</a>
+	<a hx-get={ "/api/items" }>Bad hx-get</a>
+	<form action={ "/submit" }>Bad action</form>
+	<a href="https://example.com/external">External (allowed)</a>
+}
+
+// urlFor is the app-level convenience wrapper used by gsx templates
+// (avoids repeating the package qualifier; returns (string, error) so
+// gsx auto-unwraps the error at the call site in URL-context attrs).
+func urlFor(ctx context.Context, page any, args ...any) (string, error) {
+	return structpages.URLFor(ctx, page, args...)
+}
diff --git a/examples/lint-misuse/pages.templ b/examples/lint-misuse/pages.templ
deleted file mode 100644
index 52ce673..0000000
--- a/examples/lint-misuse/pages.templ
+++ /dev/null
@@ -1,19 +0,0 @@
-package main
-
-import (
-	"fmt"
-	"strconv"
-)
-
-templ BadLinks(id int, name string) {
-	<a href="/login">Hard-coded internal</a>
-	<a href={ "/admin" }>Expression literal</a>
-	<a href={ "/items/" + strconv.Itoa(id) }>Concat</a>
-	<a href={ fmt.Sprintf("/users/%s", name) }>Sprintf</a>
-	<a hx-get={ "/api/items" }>Bad hx-get</a>
-	<form action={ "/submit" }>Bad action</form>
-	<a href="https://example.com/external">External (allowed)</a>
-
-	<!-- structpages:lint:ignore url-attr -->
-	<a href="/legacy">Suppressed</a>
-}
diff --git a/examples/simple/pages.templ b/examples/simple/pages.gsx
similarity index 74%
rename from examples/simple/pages.templ
rename to examples/simple/pages.gsx
index 91157f8..aaa6b6f 100644
--- a/examples/simple/pages.templ
+++ b/examples/simple/pages.gsx
@@ -1,53 +1,50 @@
 package main
 
-import "context"
 import "github.com/jackielii/structpages"
 
+// Page structs + route tags are plain Go — pass through unchanged.
 type index struct {
 	product `route:"/product Product"`
 	team    `route:"/team Team"`
 	contact `route:"/contact Contact"`
 }
+type product struct{}
+type team struct{}
+type contact struct{}
 
-templ (index) Page() {
-	@html() {
+component (p index) Page() {
+	<Layout>
 		<h1>Welcome to the Index Page</h1>
 		<p>Navigate to the product, team, or contact pages using the links below:</p>
-	}
+	</Layout>
 }
 
-type product struct{}
-
-templ (product) Page() {
-	@html() {
+component (p product) Page() {
+	<Layout>
 		<h1>Product Page</h1>
 		<p>This is the product page.</p>
-	}
+	</Layout>
 }
 
-type team struct{}
-
-templ (team) Page() {
-	@html() {
+component (p team) Page() {
+	<Layout>
 		<h1>Team Page</h1>
 		<p>This is the team page.</p>
-	}
+	</Layout>
 }
 
-type contact struct{}
-
-templ (contact) Page() {
-	@html() {
+component (p contact) Page() {
+	<Layout>
 		<h1>Contact Page</h1>
 		<p>This is the contact page.</p>
-	}
+	</Layout>
 }
 
-templ html() {
+component Layout() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
-			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3"/>
+			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3" />
 			<title>Simple Example</title>
 		</head>
 		<body>
@@ -61,13 +58,9 @@ templ html() {
 					</ul>
 				</nav>
 			</header>
-			<main>
-				{ children... }
-			</main>
+			<main>{children}</main>
 		</body>
 	</html>
 }
 
-func urlFor(ctx context.Context, page any, args ...any) (string, error) {
-	return structpages.URLFor(ctx, page, args...)
-}
+var urlFor = structpages.URLFor
diff --git a/examples/todo/pages.templ b/examples/todo/pages.gsx
similarity index 80%
rename from examples/todo/pages.templ
rename to examples/todo/pages.gsx
index 10fee51..49e0fc2 100644
--- a/examples/todo/pages.templ
+++ b/examples/todo/pages.gsx
@@ -1,9 +1,10 @@
 package main
 
 import (
-	"github.com/jackielii/structpages"
 	"net/http"
 	"strconv"
+
+	"github.com/jackielii/structpages"
 )
 
 type index struct {
@@ -12,13 +13,13 @@ type index struct {
 	deleteTodo `route:"DELETE /delete/{id} DeleteTodo"`
 }
 
-templ (p index) Page() {
-	@html() {
+component (p index) Page() {
+	<Layout>
 		<div class="todo-app">
 			<h1>TODO App</h1>
 			<form
-				hx-post={ structpages.URLFor(ctx, add{}) }
-				hx-target={ structpages.IDTarget(ctx, index.TodoList) }
+				hx-post={ urlFor(ctx, add{}) }
+				hx-target={ idTarget(ctx, index.TodoList) }
 				hx-swap="innerHTML"
 				hx-on:htmx:after-request="this.reset()"
 			>
@@ -32,15 +33,15 @@ templ (p index) Page() {
 					<button type="submit">Add Todo</button>
 				</div>
 			</form>
-			<div id={ structpages.ID(ctx, index.TodoList) }>
-				@p.TodoList()
+			<div id={ idFor(ctx, index.TodoList) }>
+				<p.TodoList/>
 			</div>
 		</div>
-	}
+	</Layout>
 }
 
-templ (p index) TodoList() {
-	@todoList()
+component (p index) TodoList() {
+	<TodoList/>
 }
 
 type add struct{}
@@ -81,42 +82,42 @@ func (d deleteTodo) ServeHTTP(w http.ResponseWriter, r *http.Request) error {
 	return structpages.RenderComponent(index.TodoList)
 }
 
-templ todoList() {
+component TodoList() {
 	<ul class="todo-list">
-		for _, todo := range getTodos() {
-			<li class={ "todo-item", templ.KV("completed", todo.Completed) }>
+		{ for _, todo := range getTodos() {
+			<li class={ "todo-item", "completed": todo.Completed }>
 				<div class="todo-content">
 					<input
 						type="checkbox"
-						checked?={ todo.Completed }
-						hx-post={ structpages.URLFor(ctx, toggle{}, "id", todo.ID) }
-						hx-target={ structpages.IDTarget(ctx, index.TodoList) }
+						checked={todo.Completed}
+						hx-post={ urlFor(ctx, toggle{}, "id", todo.ID) }
+						hx-target={ idTarget(ctx, index.TodoList) }
 						hx-swap="innerHTML"
 					/>
 					<span class="todo-text">{ todo.Text }</span>
 				</div>
 				<button
 					class="delete-btn"
-					hx-delete={ structpages.URLFor(ctx, deleteTodo{}, "id", todo.ID) }
-					hx-target={ structpages.IDTarget(ctx, index.TodoList) }
+					hx-delete={ urlFor(ctx, deleteTodo{}, "id", todo.ID) }
+					hx-target={ idTarget(ctx, index.TodoList) }
 					hx-swap="innerHTML"
 					hx-confirm="Are you sure you want to delete this todo?"
 				>
 					×
 				</button>
 			</li>
-		}
+		} }
 	</ul>
-	if len(getTodos()) == 0 {
+	{ if len(getTodos()) == 0 {
 		<p class="empty-state">No todos yet. Add one above!</p>
-	}
+	} }
 }
 
-templ html() {
+component Layout() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
-			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3"/>
+			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3" />
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 			<title>TODO App</title>
 			<style>
@@ -125,20 +126,20 @@ templ html() {
 					margin: 2rem auto;
 					padding: 2rem;
 				}
-				
+
 				.form-group {
 					display: flex;
 					gap: 0.5rem;
 					margin-bottom: 2rem;
 				}
-				
+
 				.form-group input {
 					flex: 1;
 					padding: 0.75rem;
 					border: 1px solid #ddd;
 					border-radius: 4px;
 				}
-				
+
 				.form-group button {
 					padding: 0.75rem 1.5rem;
 					background: #007bff;
@@ -147,16 +148,16 @@ templ html() {
 					border-radius: 4px;
 					cursor: pointer;
 				}
-				
+
 				.form-group button:hover {
 					background: #0056b3;
 				}
-				
+
 				.todo-list {
 					list-style: none;
 					padding: 0;
 				}
-				
+
 				.todo-item {
 					display: flex;
 					align-items: center;
@@ -167,26 +168,26 @@ templ html() {
 					margin-bottom: 0.5rem;
 					background: white;
 				}
-				
+
 				.todo-item.completed {
 					opacity: 0.6;
 				}
-				
+
 				.todo-item.completed .todo-text {
 					text-decoration: line-through;
 				}
-				
+
 				.todo-content {
 					display: flex;
 					align-items: center;
 					gap: 0.75rem;
 					flex: 1;
 				}
-				
+
 				.todo-text {
 					flex: 1;
 				}
-				
+
 				.delete-btn {
 					background: #dc3545;
 					color: white;
@@ -200,11 +201,11 @@ templ html() {
 					align-items: center;
 					justify-content: center;
 				}
-				
+
 				.delete-btn:hover {
 					background: #c82333;
 				}
-				
+
 				.empty-state {
 					text-align: center;
 					color: #666;
@@ -215,19 +216,23 @@ templ html() {
 		</head>
 		<body>
 			<main id="content">
-				{ children... }
+				{children}
 			</main>
 		</body>
 	</html>
 }
 
-templ errorPage(err error) {
-	@html() {
-		@errorComp(err)
-	}
+component ErrorPage(err error) {
+	<Layout>
+		<ErrorComp err={err} />
+	</Layout>
 }
 
-templ errorComp(err error) {
+component ErrorComp(err error) {
 	<h1>Error</h1>
 	<p>{ err.Error() }</p>
 }
+
+var urlFor = structpages.URLFor
+var idFor = structpages.ID
+var idTarget = structpages.IDTarget

From 5b43cc32cd546d73e9fa38a876ba6c423f88f498 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Thu, 25 Jun 2026 17:30:33 +0100
Subject: [PATCH 02/13] =?UTF-8?q?examples:=20pipeline=20ergonomics=20?=
 =?UTF-8?q?=E2=80=94=20{=20X=20|>=20url/id/target=20}=20via=20gen.WithFilt?=
 =?UTF-8?q?er?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rewrite the gsx examples to use gsx pipeline filters instead of ctx-threading
structpages.URLFor/ID/IDTarget calls. Each example wires url/id/target via a
cmd/gen generator (gen.WithFilter), regenerated .x.go included. Full working
examples (build green), comparing against the templ baseline (PR base).
---
 examples/blog/admin/components.gsx          |  11 +-
 examples/blog/admin/components.x.go         | 362 ++++++++++++++++
 examples/blog/admin/dashboard.gsx           |   8 +-
 examples/blog/admin/dashboard.x.go          | 155 +++++++
 examples/blog/admin/login.x.go              | 139 +++++++
 examples/blog/admin/posts.x.go              | 281 +++++++++++++
 examples/blog/admin/users.x.go              | 154 +++++++
 examples/blog/blog/category.gsx             |   3 +-
 examples/blog/blog/category.x.go            | 108 +++++
 examples/blog/blog/home.x.go                |  92 +++++
 examples/blog/blog/post.gsx                 |   5 +-
 examples/blog/blog/post.x.go                | 147 +++++++
 examples/blog/blog/search.gsx               |   6 +-
 examples/blog/blog/search.x.go              | 143 +++++++
 examples/blog/cmd/gen/main.go               |  21 +
 examples/blog/go.mod                        |   5 +-
 examples/blog/go.sum                        |   4 +
 examples/blog/ui/components/components.x.go | 419 +++++++++++++++++++
 examples/blog/ui/layout/layout.gsx          |  18 +-
 examples/blog/ui/layout/layout.x.go         | 320 ++++++++++++++
 examples/htmx-render-target/cmd/gen/main.go |  21 +
 examples/htmx-render-target/go.mod          |   5 +-
 examples/htmx-render-target/go.sum          |   4 +
 examples/htmx-render-target/pages.gsx       |  35 +-
 examples/htmx-render-target/pages.x.go      | 436 ++++++++++++++++++++
 examples/htmx/cmd/gen/main.go               |  21 +
 examples/htmx/go.sum                        |   1 +
 examples/htmx/pages.gsx                     |  14 +-
 examples/htmx/pages.x.go                    | 349 ++++++++++++++++
 examples/lint-misuse/cmd/gen/main.go        |  21 +
 examples/lint-misuse/go.mod                 |   7 +
 examples/lint-misuse/go.sum                 |  10 +
 examples/lint-misuse/pages.gsx              |  10 -
 examples/lint-misuse/pages.x.go             |  91 ++++
 examples/simple/cmd/gen/main.go             |  21 +
 examples/simple/go.mod                      |   5 +-
 examples/simple/go.sum                      |   4 +
 examples/simple/pages.gsx                   |  12 +-
 examples/simple/pages.x.go                  | 229 ++++++++++
 examples/todo/cmd/gen/main.go               |  21 +
 examples/todo/go.mod                        |   5 +-
 examples/todo/go.sum                        |   4 +
 examples/todo/pages.gsx                     |  18 +-
 examples/todo/pages.x.go                    | 320 ++++++++++++++
 44 files changed, 3970 insertions(+), 95 deletions(-)
 create mode 100644 examples/blog/admin/components.x.go
 create mode 100644 examples/blog/admin/dashboard.x.go
 create mode 100644 examples/blog/admin/login.x.go
 create mode 100644 examples/blog/admin/posts.x.go
 create mode 100644 examples/blog/admin/users.x.go
 create mode 100644 examples/blog/blog/category.x.go
 create mode 100644 examples/blog/blog/home.x.go
 create mode 100644 examples/blog/blog/post.x.go
 create mode 100644 examples/blog/blog/search.x.go
 create mode 100644 examples/blog/cmd/gen/main.go
 create mode 100644 examples/blog/ui/components/components.x.go
 create mode 100644 examples/blog/ui/layout/layout.x.go
 create mode 100644 examples/htmx-render-target/cmd/gen/main.go
 create mode 100644 examples/htmx-render-target/pages.x.go
 create mode 100644 examples/htmx/cmd/gen/main.go
 create mode 100644 examples/htmx/pages.x.go
 create mode 100644 examples/lint-misuse/cmd/gen/main.go
 create mode 100644 examples/lint-misuse/pages.x.go
 create mode 100644 examples/simple/cmd/gen/main.go
 create mode 100644 examples/simple/pages.x.go
 create mode 100644 examples/todo/cmd/gen/main.go
 create mode 100644 examples/todo/pages.x.go

diff --git a/examples/blog/admin/components.gsx b/examples/blog/admin/components.gsx
index c0a15d0..48bb963 100644
--- a/examples/blog/admin/components.gsx
+++ b/examples/blog/admin/components.gsx
@@ -5,7 +5,6 @@
 package admin
 
 import (
-	"github.com/jackielii/structpages"
 	"github.com/jackielii/structpages/examples/blog/store"
 	"github.com/jackielii/structpages/examples/blog/ui/components"
 )
@@ -20,7 +19,7 @@ component StatCell(label string, value int) {
 }
 
 component StatsGrid(stats store.Stats) {
-	<div id={ structpages.ID(ctx, StatsGrid) } class="grid grid-cols-2 gap-3 md:grid-cols-4">
+	<div id={ StatsGrid |> id } class="grid grid-cols-2 gap-3 md:grid-cols-4">
 		<StatCell label="Posts" value={stats.Posts}/>
 		<StatCell label="Drafts" value={stats.Drafts}/>
 		<StatCell label="Comments" value={stats.Comments}/>
@@ -29,7 +28,7 @@ component StatsGrid(stats store.Stats) {
 }
 
 component RecentPostsCard(posts []store.Post) {
-	<div id={ structpages.ID(ctx, RecentPostsCard) }>
+	<div id={ RecentPostsCard |> id }>
 		<components.Card title="Recent posts">
 			<ul class="divide-y text-sm">
 				{ if len(posts) == 0 {
@@ -53,7 +52,7 @@ component RecentPostsCard(posts []store.Post) {
 }
 
 component PostsTable(posts []store.Post) {
-	<div id={ structpages.ID(ctx, PostsTable) } class="overflow-hidden rounded-lg border bg-white shadow-sm">
+	<div id={ PostsTable |> id } class="overflow-hidden rounded-lg border bg-white shadow-sm">
 		<table class="w-full text-sm">
 			<thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
 				<tr>
@@ -81,8 +80,8 @@ component PostsTable(posts []store.Post) {
 							<form
 								method="POST"
 								action={ components.URL(ctx, postDeleteHandler{}, "id", p.ID) }
-								hx-post={ structpages.URLFor(ctx, postDeleteHandler{}, "id", p.ID) }
-								hx-target={ structpages.IDTarget(ctx, PostsTable) }
+								hx-post={ postDeleteHandler{} |> url("id", p.ID) }
+								hx-target={ PostsTable |> target }
 								hx-swap="outerHTML"
 								hx-confirm="Delete this post?"
 								class="inline"
diff --git a/examples/blog/admin/components.x.go b/examples/blog/admin/components.x.go
new file mode 100644
index 0000000..3dbaa5d
--- /dev/null
+++ b/examples/blog/admin/components.x.go
@@ -0,0 +1,362 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package admin
+
+import (
+	"context"
+	"io"
+	"strconv"
+
+	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+)
+
+// StatCell — capitalized (gsx components must be Capitalized; the templ name
+// was lowercase `statCell`).
+
+type StatCellProps struct {
+	Label string
+	Value int
+	Attrs gsx.Attrs
+}
+
+func StatCell(_gsxp StatCellProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		label := _gsxp.Label
+		value := _gsxp.Value
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:15:2
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("rounded-lg border bg-white p-4 text-center shadow-sm"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:16:3
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"text-3xl font-semibold text-slate-900\"")
+		_gsxgw.S(">")
+//line components.gsx:16:54
+		_gsxgw.Text(strconv.FormatInt(int64(value), 10))
+		_gsxgw.S("</div>")
+//line components.gsx:17:3
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"mt-1 text-xs uppercase tracking-wide text-slate-500\"")
+		_gsxgw.S(">")
+//line components.gsx:17:68
+		_gsxgw.Text(string(label))
+		_gsxgw.S("</div>")
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
+
+type StatsGridProps struct {
+	Stats store.Stats
+	Attrs gsx.Attrs
+}
+
+func StatsGrid(_gsxp StatsGridProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		stats := _gsxp.Stats
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:22:2
+		_gsxgw.S("<div")
+		if !_gsxp.Attrs.Has("id") {
+			_gsxv0, _gsxerr := _gsxf0.ID(ctx, (StatsGrid))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" id=\"")
+			_gsxgw.AttrValue(string(_gsxv0))
+			_gsxgw.S("\"")
+		}
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("grid grid-cols-2 gap-3 md:grid-cols-4"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:23:3
+		_gsxgw.Node(ctx, StatCell(StatCellProps{Label: "Posts", Value: stats.Posts}))
+//line components.gsx:24:3
+		_gsxgw.Node(ctx, StatCell(StatCellProps{Label: "Drafts", Value: stats.Drafts}))
+//line components.gsx:25:3
+		_gsxgw.Node(ctx, StatCell(StatCellProps{Label: "Comments", Value: stats.Comments}))
+//line components.gsx:26:3
+		_gsxgw.Node(ctx, StatCell(StatCellProps{Label: "Categories", Value: stats.Categories}))
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
+
+type RecentPostsCardProps struct {
+	Posts []store.Post
+	Attrs gsx.Attrs
+}
+
+func RecentPostsCard(_gsxp RecentPostsCardProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		posts := _gsxp.Posts
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:31:2
+		_gsxgw.S("<div")
+		if !_gsxp.Attrs.Has("id") {
+			_gsxv1, _gsxerr := _gsxf0.ID(ctx, (RecentPostsCard))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" id=\"")
+			_gsxgw.AttrValue(string(_gsxv1))
+			_gsxgw.S("\"")
+		}
+		_gsxgw.ClassMerged(_gsxp.Attrs.Class())
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:32:3
+		_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Recent posts", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line components.gsx:33:4
+			_gsxgw.S("<ul")
+			_gsxgw.S(" class=\"divide-y text-sm\"")
+			_gsxgw.S(">")
+//line components.gsx:34:5
+			if len(posts) == 0 {
+//line components.gsx:35:6
+				_gsxgw.S("<li")
+				_gsxgw.S(" class=\"py-2 text-slate-500\"")
+				_gsxgw.S(">")
+				_gsxgw.S("No posts yet.")
+				_gsxgw.S("</li>")
+			}
+//line components.gsx:37:5
+			for _, p := range posts {
+//line components.gsx:38:6
+				_gsxgw.S("<li")
+				_gsxgw.S(" class=\"flex items-center justify-between py-2\"")
+				_gsxgw.S(">")
+//line components.gsx:39:7
+				_gsxgw.S("<a")
+				_gsxgw.S(" class=\"hover:underline\"")
+				_gsxv2, _gsxerr := components.URL(ctx, postEditPage{}, "id", p.ID)
+				if _gsxerr != nil {
+					return _gsxerr
+				}
+				_gsxgw.S(" href=\"")
+				_gsxgw.URL(string(_gsxv2))
+				_gsxgw.S("\"")
+				_gsxgw.S(">")
+//line components.gsx:40:8
+				_gsxgw.Text(string(p.Title))
+				_gsxgw.S("</a>")
+//line components.gsx:42:7
+				if p.Published {
+//line components.gsx:43:8
+					_gsxgw.S("<span")
+					_gsxgw.S(" class=\"rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800\"")
+					_gsxgw.S(">")
+					_gsxgw.S("live")
+					_gsxgw.S("</span>")
+				} else {
+//line components.gsx:45:8
+					_gsxgw.S("<span")
+					_gsxgw.S(" class=\"rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700\"")
+					_gsxgw.S(">")
+					_gsxgw.S("draft")
+					_gsxgw.S("</span>")
+				}
+				_gsxgw.S("</li>")
+			}
+			_gsxgw.S("</ul>")
+			return _gsxgw.Err()
+		})}))
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
+
+type PostsTableProps struct {
+	Posts []store.Post
+	Attrs gsx.Attrs
+}
+
+func PostsTable(_gsxp PostsTableProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		posts := _gsxp.Posts
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:55:2
+		_gsxgw.S("<div")
+		if !_gsxp.Attrs.Has("id") {
+			_gsxv3, _gsxerr := _gsxf0.ID(ctx, (PostsTable))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" id=\"")
+			_gsxgw.AttrValue(string(_gsxv3))
+			_gsxgw.S("\"")
+		}
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("overflow-hidden rounded-lg border bg-white shadow-sm"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:56:3
+		_gsxgw.S("<table")
+		_gsxgw.S(" class=\"w-full text-sm\"")
+		_gsxgw.S(">")
+//line components.gsx:57:4
+		_gsxgw.S("<thead")
+		_gsxgw.S(" class=\"bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500\"")
+		_gsxgw.S(">")
+//line components.gsx:58:5
+		_gsxgw.S("<tr")
+		_gsxgw.S(">")
+//line components.gsx:59:6
+		_gsxgw.S("<th")
+		_gsxgw.S(" class=\"px-3 py-2\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Title")
+		_gsxgw.S("</th>")
+//line components.gsx:60:6
+		_gsxgw.S("<th")
+		_gsxgw.S(" class=\"px-3 py-2\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Status")
+		_gsxgw.S("</th>")
+//line components.gsx:61:6
+		_gsxgw.S("<th")
+		_gsxgw.S(" class=\"px-3 py-2\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Created")
+		_gsxgw.S("</th>")
+//line components.gsx:62:6
+		_gsxgw.S("<th")
+		_gsxgw.S(" class=\"px-3 py-2\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</th>")
+		_gsxgw.S("</tr>")
+		_gsxgw.S("</thead>")
+//line components.gsx:65:4
+		_gsxgw.S("<tbody")
+		_gsxgw.S(">")
+//line components.gsx:66:5
+		for _, p := range posts {
+//line components.gsx:67:6
+			_gsxgw.S("<tr")
+			_gsxgw.S(" class=\"border-t\"")
+			_gsxgw.S(">")
+//line components.gsx:68:7
+			_gsxgw.S("<td")
+			_gsxgw.S(" class=\"px-3 py-2 font-medium\"")
+			_gsxgw.S(">")
+//line components.gsx:69:8
+			_gsxgw.S("<a")
+			_gsxgw.S(" class=\"hover:underline\"")
+			_gsxv4, _gsxerr := components.URL(ctx, postEditPage{}, "id", p.ID)
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" href=\"")
+			_gsxgw.URL(string(_gsxv4))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+//line components.gsx:69:92
+			_gsxgw.Text(string(p.Title))
+			_gsxgw.S("</a>")
+			_gsxgw.S("</td>")
+//line components.gsx:71:7
+			_gsxgw.S("<td")
+			_gsxgw.S(" class=\"px-3 py-2\"")
+			_gsxgw.S(">")
+//line components.gsx:72:8
+			if p.Published {
+//line components.gsx:73:9
+				_gsxgw.S("<span")
+				_gsxgw.S(" class=\"rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800\"")
+				_gsxgw.S(">")
+				_gsxgw.S("published")
+				_gsxgw.S("</span>")
+			} else {
+//line components.gsx:75:9
+				_gsxgw.S("<span")
+				_gsxgw.S(" class=\"rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700\"")
+				_gsxgw.S(">")
+				_gsxgw.S("draft")
+				_gsxgw.S("</span>")
+			}
+			_gsxgw.S("</td>")
+//line components.gsx:78:7
+			_gsxgw.S("<td")
+			_gsxgw.S(" class=\"px-3 py-2 text-slate-500\"")
+			_gsxgw.S(">")
+//line components.gsx:78:44
+			_gsxgw.Text(string(p.CreatedAt.Format("Jan 2, 2006")))
+			_gsxgw.S("</td>")
+//line components.gsx:79:7
+			_gsxgw.S("<td")
+			_gsxgw.S(" class=\"px-3 py-2 text-right\"")
+			_gsxgw.S(">")
+//line components.gsx:80:8
+			_gsxgw.S("<form")
+			_gsxgw.S(" method=\"POST\"")
+			_gsxv5, _gsxerr := components.URL(ctx, postDeleteHandler{}, "id", p.ID)
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" action=\"")
+			_gsxgw.URL(string(_gsxv5))
+			_gsxgw.S("\"")
+			_gsxv6, _gsxerr := _gsxf0.URLFor(ctx, (postDeleteHandler{}), "id", p.ID)
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-post=\"")
+			_gsxgw.URL(string(_gsxv6))
+			_gsxgw.S("\"")
+			_gsxv7, _gsxerr := _gsxf0.IDTarget(ctx, (PostsTable))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-target=\"")
+			_gsxgw.AttrValue(string(_gsxv7))
+			_gsxgw.S("\"")
+			_gsxgw.S(" hx-swap=\"outerHTML\"")
+			_gsxgw.S(" hx-confirm=\"Delete this post?\"")
+			_gsxgw.S(" class=\"inline\"")
+			_gsxgw.S(">")
+//line components.gsx:89:9
+			_gsxgw.S("<button")
+			_gsxgw.S(" class=\"text-xs text-red-600 hover:underline\"")
+			_gsxgw.S(" type=\"submit\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Delete")
+			_gsxgw.S("</button>")
+			_gsxgw.S("</form>")
+			_gsxgw.S("</td>")
+			_gsxgw.S("</tr>")
+		}
+//line components.gsx:94:5
+		if len(posts) == 0 {
+//line components.gsx:95:6
+			_gsxgw.S("<tr")
+			_gsxgw.S(">")
+//line components.gsx:95:10
+			_gsxgw.S("<td")
+			_gsxgw.S(" colspan=\"4\"")
+			_gsxgw.S(" class=\"px-3 py-6 text-center text-slate-500\"")
+			_gsxgw.S(">")
+			_gsxgw.S("No posts yet.")
+			_gsxgw.S("</td>")
+			_gsxgw.S("</tr>")
+		}
+		_gsxgw.S("</tbody>")
+		_gsxgw.S("</table>")
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/admin/dashboard.gsx b/examples/blog/admin/dashboard.gsx
index fe95051..e304b16 100644
--- a/examples/blog/admin/dashboard.gsx
+++ b/examples/blog/admin/dashboard.gsx
@@ -51,14 +51,14 @@ component (p dashboardPage) Page(props dashboardProps) {
 			<div class="flex gap-2 text-xs">
 				<button
 					class="rounded border px-2 py-1 hover:bg-white"
-					hx-get={ structpages.URLFor(ctx, dashboardPage{}) }
-					hx-target={ structpages.IDTarget(ctx, StatsGrid) }
+					hx-get={ dashboardPage{} |> url }
+					hx-target={ StatsGrid |> target }
 					hx-swap="outerHTML"
 				>↻ Stats</button>
 				<button
 					class="rounded border px-2 py-1 hover:bg-white"
-					hx-get={ structpages.URLFor(ctx, dashboardPage{}) }
-					hx-target={ structpages.IDTarget(ctx, RecentPostsCard) }
+					hx-get={ dashboardPage{} |> url }
+					hx-target={ RecentPostsCard |> target }
 					hx-swap="outerHTML"
 				>↻ Recent posts</button>
 			</div>
diff --git a/examples/blog/admin/dashboard.x.go b/examples/blog/admin/dashboard.x.go
new file mode 100644
index 0000000..2ee649b
--- /dev/null
+++ b/examples/blog/admin/dashboard.x.go
@@ -0,0 +1,155 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package admin
+
+import (
+	"context"
+	"io"
+	"net/http"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages"
+	_gsxf0 "github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/auth"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type dashboardPage struct{}
+
+type dashboardProps struct {
+	User        store.User
+	Stats       store.Stats
+	RecentPosts []store.Post
+}
+
+// Props demonstrates the Props + RenderTarget pattern. Each widget is a
+// standalone gsx function (StatsGrid, RecentPostsCard) so HTMX refresh
+// requests with HX-Target: #stats-grid or #recent-posts-card resolve here
+// and only the touched data is loaded — no full page work.
+//
+// Returns dashboardProps directly — gsx now emits method components as
+// func (p dashboardPage) Page(props dashboardProps) gsx.Node without a wrapper struct.
+func (p dashboardPage) Props(r *http.Request, s *store.Store, target structpages.RenderTarget) (dashboardProps, error) {
+	switch {
+	case target.Is(StatsGrid):
+		return dashboardProps{}, structpages.RenderComponent(StatsGrid(StatsGridProps{Stats: s.Stats()}))
+
+	case target.Is(RecentPostsCard):
+		posts, _ := s.ListPosts(store.PostFilter{IncludeDraft: true, PageSize: 5})
+		return dashboardProps{}, structpages.RenderComponent(RecentPostsCard(RecentPostsCardProps{Posts: posts}))
+	}
+
+	user, _ := auth.UserFromContext(r.Context())
+	posts, _ := s.ListPosts(store.PostFilter{IncludeDraft: true, PageSize: 5})
+	return dashboardProps{
+		User:        user,
+		Stats:       s.Stats(),
+		RecentPosts: posts,
+	}, nil
+}
+
+func (p dashboardPage) Page(props dashboardProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line dashboard.gsx:48:2
+		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Dashboard", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line dashboard.gsx:49:3
+			_gsxgw.S("<header")
+			_gsxgw.S(" class=\"mb-6 flex items-end justify-between\"")
+			_gsxgw.S(">")
+//line dashboard.gsx:50:4
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"text-2xl font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Dashboard")
+			_gsxgw.S("</h1>")
+//line dashboard.gsx:51:4
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"flex gap-2 text-xs\"")
+			_gsxgw.S(">")
+//line dashboard.gsx:52:5
+			_gsxgw.S("<button")
+			_gsxgw.S(" class=\"rounded border px-2 py-1 hover:bg-white\"")
+			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (dashboardPage{}))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-get=\"")
+			_gsxgw.URL(string(_gsxv0))
+			_gsxgw.S("\"")
+			_gsxv1, _gsxerr := _gsxf0.IDTarget(ctx, (StatsGrid))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-target=\"")
+			_gsxgw.AttrValue(string(_gsxv1))
+			_gsxgw.S("\"")
+			_gsxgw.S(" hx-swap=\"outerHTML\"")
+			_gsxgw.S(">")
+			_gsxgw.S("↻ Stats")
+			_gsxgw.S("</button>")
+//line dashboard.gsx:58:5
+			_gsxgw.S("<button")
+			_gsxgw.S(" class=\"rounded border px-2 py-1 hover:bg-white\"")
+			_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (dashboardPage{}))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-get=\"")
+			_gsxgw.URL(string(_gsxv2))
+			_gsxgw.S("\"")
+			_gsxv3, _gsxerr := _gsxf0.IDTarget(ctx, (RecentPostsCard))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-target=\"")
+			_gsxgw.AttrValue(string(_gsxv3))
+			_gsxgw.S("\"")
+			_gsxgw.S(" hx-swap=\"outerHTML\"")
+			_gsxgw.S(">")
+			_gsxgw.S("↻ Recent posts")
+			_gsxgw.S("</button>")
+			_gsxgw.S("</div>")
+			_gsxgw.S("</header>")
+//line dashboard.gsx:66:3
+			_gsxgw.S("<section")
+			_gsxgw.S(" class=\"space-y-6\"")
+			_gsxgw.S(">")
+//line dashboard.gsx:67:4
+			_gsxgw.Node(ctx, StatsGrid(StatsGridProps{Stats: props.Stats}))
+//line dashboard.gsx:68:4
+			_gsxgw.Node(ctx, RecentPostsCard(RecentPostsCardProps{Posts: props.RecentPosts}))
+//line dashboard.gsx:69:4
+			_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Try it", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+				_gsxgw := gsx.W(_gsxw)
+//line dashboard.gsx:70:5
+				_gsxgw.S("<ul")
+				_gsxgw.S(" class=\"list-disc space-y-1 pl-5 text-sm text-slate-700\"")
+				_gsxgw.S(">")
+//line dashboard.gsx:71:6
+				_gsxgw.S("<li")
+				_gsxgw.S(">")
+				_gsxgw.S("Click ↻ Stats — only the StatsGrid widget refreshes (check Network tab).")
+				_gsxgw.S("</li>")
+//line dashboard.gsx:72:6
+				_gsxgw.S("<li")
+				_gsxgw.S(">")
+				_gsxgw.S("Click ↻ Recent posts — only that card reloads, with its own DB query.")
+				_gsxgw.S("</li>")
+//line dashboard.gsx:73:6
+				_gsxgw.S("<li")
+				_gsxgw.S(">")
+				_gsxgw.S("Hard refresh — the full document re-renders via Page().")
+				_gsxgw.S("</li>")
+				_gsxgw.S("</ul>")
+				return _gsxgw.Err()
+			})}))
+			_gsxgw.S("</section>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/admin/login.x.go b/examples/blog/admin/login.x.go
new file mode 100644
index 0000000..e956a2e
--- /dev/null
+++ b/examples/blog/admin/login.x.go
@@ -0,0 +1,139 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package admin
+
+import (
+	"context"
+	"io"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+)
+
+// LoginShell is invoked from login.go (LoginPage.ServeHTTP). gsx requires
+// component names to be Capitalized (lowercase = HTML element), so the templ
+// `loginShell` becomes `LoginShell`.
+
+type LoginShellProps struct {
+	Username string
+	ErrMsg   string
+}
+
+func LoginShell(_gsxp LoginShellProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		username := _gsxp.Username
+		errMsg := _gsxp.ErrMsg
+		_gsxgw := gsx.W(_gsxw)
+		_gsxgw.S("<!DOCTYPE html>")
+//line login.gsx:10:2
+		_gsxgw.S("<html")
+		_gsxgw.S(" lang=\"en\"")
+		_gsxgw.S(">")
+//line login.gsx:11:3
+		_gsxgw.S("<head")
+		_gsxgw.S(">")
+//line login.gsx:12:4
+		_gsxgw.S("<meta")
+		_gsxgw.S(" charset=\"utf-8\"")
+		_gsxgw.S("/>")
+//line login.gsx:13:4
+		_gsxgw.S("<title")
+		_gsxgw.S(">")
+		_gsxgw.S("Sign in — blog admin")
+		_gsxgw.S("</title>")
+//line login.gsx:14:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://cdn.tailwindcss.com\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+		_gsxgw.S("</head>")
+//line login.gsx:16:3
+		_gsxgw.S("<body")
+		_gsxgw.S(" class=\"bg-slate-100 text-slate-900\"")
+		_gsxgw.S(">")
+//line login.gsx:17:4
+		_gsxgw.S("<main")
+		_gsxgw.S(" class=\"mx-auto max-w-sm px-4 py-16\"")
+		_gsxgw.S(">")
+//line login.gsx:18:5
+		_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Sign in", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line login.gsx:19:6
+			_gsxgw.S("<form")
+			_gsxgw.S(" method=\"POST\"")
+			_gsxgw.S(" class=\"space-y-3\"")
+			_gsxgw.S(">")
+//line login.gsx:20:7
+			_gsxgw.Node(ctx, components.Alert(components.AlertProps{Kind: components.AlertError, Msg: errMsg}))
+//line login.gsx:21:7
+			_gsxgw.S("<label")
+			_gsxgw.S(" class=\"block text-sm\"")
+			_gsxgw.S(">")
+//line login.gsx:22:8
+			_gsxgw.S("<span")
+			_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Username")
+			_gsxgw.S("</span>")
+//line login.gsx:23:8
+			_gsxgw.S("<input")
+			_gsxgw.S(" name=\"username\"")
+			_gsxgw.S(" value=\"")
+			_gsxgw.AttrValue(string(username))
+			_gsxgw.S("\"")
+			_gsxgw.BoolAttr("required", true)
+			_gsxgw.BoolAttr("autofocus", true)
+			_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
+			_gsxgw.S("/>")
+			_gsxgw.S("</label>")
+//line login.gsx:31:7
+			_gsxgw.S("<label")
+			_gsxgw.S(" class=\"block text-sm\"")
+			_gsxgw.S(">")
+//line login.gsx:32:8
+			_gsxgw.S("<span")
+			_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Password")
+			_gsxgw.S("</span>")
+//line login.gsx:33:8
+			_gsxgw.S("<input")
+			_gsxgw.S(" type=\"password\"")
+			_gsxgw.S(" name=\"password\"")
+			_gsxgw.BoolAttr("required", true)
+			_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
+			_gsxgw.S("/>")
+			_gsxgw.S("</label>")
+//line login.gsx:40:7
+			_gsxgw.S("<button")
+			_gsxgw.S(" type=\"submit\"")
+			_gsxgw.S(" class=\"inline-flex w-full items-center justify-center rounded bg-slate-900 px-3 py-2 text-sm font-medium text-white hover:bg-slate-700\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Sign in")
+			_gsxgw.S("</button>")
+//line login.gsx:46:7
+			_gsxgw.S("<p")
+			_gsxgw.S(" class=\"text-xs text-slate-500\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Demo credentials: ")
+//line login.gsx:46:59
+			_gsxgw.S("<code")
+			_gsxgw.S(">")
+			_gsxgw.S("admin")
+			_gsxgw.S("</code>")
+			_gsxgw.S(" / ")
+//line login.gsx:46:80
+			_gsxgw.S("<code")
+			_gsxgw.S(">")
+			_gsxgw.S("admin")
+			_gsxgw.S("</code>")
+			_gsxgw.S("</p>")
+			_gsxgw.S("</form>")
+			return _gsxgw.Err()
+		})}))
+		_gsxgw.S("</main>")
+		_gsxgw.S("</body>")
+		_gsxgw.S("</html>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/admin/posts.x.go b/examples/blog/admin/posts.x.go
new file mode 100644
index 0000000..eac06c4
--- /dev/null
+++ b/examples/blog/admin/posts.x.go
@@ -0,0 +1,281 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package admin
+
+import (
+	"context"
+	"fmt"
+	"io"
+	"net/http"
+	"strconv"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages/examples/blog/auth"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+// AdminShellWith is a tiny gsx wrapper used by handlers that need to render a
+// custom body inside AdminShell from Go code. The templ version took a
+// `templ.Component`; gsx's equivalent renderable value type is `gsx.Node`.
+
+type AdminShellWithProps struct {
+	Title string
+	User  store.User
+	Body  gsx.Node
+}
+
+func AdminShellWith(_gsxp AdminShellWithProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		title := _gsxp.Title
+		user := _gsxp.User
+		body := _gsxp.Body
+		_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:19:2
+		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: title, Current: user, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:20:3
+			_gsxgw.Node(ctx, body)
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+// --- List ---
+
+type postListPage struct{}
+
+type postListProps struct {
+	User  store.User
+	Posts []store.Post
+}
+
+func (postListPage) Props(r *http.Request, s *store.Store) (postListProps, error) {
+	user, _ := auth.UserFromContext(r.Context())
+	posts, _ := s.ListPosts(store.PostFilter{IncludeDraft: true, PageSize: 50})
+	return postListProps{User: user, Posts: posts}, nil
+}
+
+func (p postListPage) Page(props postListProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:40:2
+		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Posts", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:41:3
+			_gsxgw.S("<header")
+			_gsxgw.S(" class=\"mb-4 flex items-center justify-between\"")
+			_gsxgw.S(">")
+//line posts.gsx:42:4
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"text-2xl font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("All posts")
+			_gsxgw.S("</h1>")
+//line posts.gsx:43:4
+			_gsxgw.S("<a")
+			_gsxgw.S(" class=\"rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700\"")
+			_gsxv0, _gsxerr := components.URL(ctx, postNewPage{})
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" href=\"")
+			_gsxgw.URL(string(_gsxv0))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+			_gsxgw.S("New post")
+			_gsxgw.S("</a>")
+			_gsxgw.S("</header>")
+//line posts.gsx:45:3
+			_gsxgw.Node(ctx, PostsTable(PostsTableProps{Posts: props.Posts}))
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+// --- New ---
+
+type postNewPage struct{}
+
+type postFormViewProps struct {
+	User       store.User
+	Categories []store.Category
+	Post       store.Post
+}
+
+func (postNewPage) Props(r *http.Request, s *store.Store) (postFormViewProps, error) {
+	user, _ := auth.UserFromContext(r.Context())
+	return postFormViewProps{User: user, Categories: s.ListCategories()}, nil
+}
+
+func (p postNewPage) Page(props postFormViewProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:65:2
+		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "New post", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:66:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("New post")
+			_gsxgw.S("</h1>")
+//line posts.gsx:67:3
+			_gsxgw.Node(ctx, PostForm(PostFormProps{P: props.Post, Cats: props.Categories, ErrMsg: ""}))
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+// --- Edit ---
+
+type postEditPage struct{}
+
+func (postEditPage) Props(r *http.Request, s *store.Store) (postFormViewProps, error) {
+	user, _ := auth.UserFromContext(r.Context())
+	id, err := strconv.Atoi(r.PathValue("id"))
+	if err != nil {
+		return postFormViewProps{}, fmt.Errorf("invalid post id: %w", err)
+	}
+	p, err := s.GetPost(id)
+	if err != nil {
+		return postFormViewProps{}, err
+	}
+	return postFormViewProps{User: user, Categories: s.ListCategories(), Post: p}, nil
+}
+
+func (p postEditPage) Page(props postFormViewProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:89:2
+		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Edit post", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:90:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Edit post")
+			_gsxgw.S("</h1>")
+//line posts.gsx:91:3
+			_gsxgw.Node(ctx, PostForm(PostFormProps{P: props.Post, Cats: props.Categories, ErrMsg: ""}))
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+// --- Shared form ---
+
+type PostFormProps struct {
+	P      store.Post
+	Cats   []store.Category
+	ErrMsg string
+	Attrs  gsx.Attrs
+}
+
+func PostForm(_gsxp PostFormProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		p := _gsxp.P
+		cats := _gsxp.Cats
+		errMsg := _gsxp.ErrMsg
+		_gsxgw := gsx.W(_gsxw)
+//line posts.gsx:98:2
+		_gsxgw.S("<form")
+		if !_gsxp.Attrs.Has("method") {
+			_gsxgw.S(" method=\"POST\"")
+		}
+		if !_gsxp.Attrs.Has("action") {
+			_gsxgw.S(" action=\"")
+			_gsxgw.URL(string(postFormAction(ctx, p)))
+			_gsxgw.S("\"")
+		}
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("space-y-3"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line posts.gsx:99:3
+		_gsxgw.Node(ctx, components.Alert(components.AlertProps{Kind: components.AlertError, Msg: errMsg}))
+//line posts.gsx:100:3
+		_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "title", Label: "Title", Value: p.Title, ErrMsg: ""}))
+//line posts.gsx:101:3
+		_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "slug", Label: "Slug (auto if blank)", Value: p.Slug, ErrMsg: ""}))
+//line posts.gsx:102:3
+		_gsxgw.S("<label")
+		_gsxgw.S(" class=\"block text-sm\"")
+		_gsxgw.S(">")
+//line posts.gsx:103:4
+		_gsxgw.S("<span")
+		_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Category")
+		_gsxgw.S("</span>")
+//line posts.gsx:104:4
+		_gsxgw.S("<select")
+		_gsxgw.S(" name=\"category_id\"")
+		_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
+		_gsxgw.S(">")
+//line posts.gsx:105:5
+		_gsxgw.S("<option")
+		_gsxgw.S(" value=\"0\"")
+		_gsxgw.S(">")
+		_gsxgw.S("— pick one —")
+		_gsxgw.S("</option>")
+//line posts.gsx:106:5
+		for _, c := range cats {
+//line posts.gsx:107:6
+			_gsxgw.S("<option")
+			_gsxgw.S(" value=\"")
+			_gsxgw.AttrValue(strconv.FormatInt(int64(c.ID), 10))
+			_gsxgw.S("\"")
+			_gsxgw.BoolAttr("selected", bool(c.ID == p.CategoryID))
+			_gsxgw.S(">")
+//line posts.gsx:107:61
+			_gsxgw.Text(string(c.Name))
+			_gsxgw.S("</option>")
+		}
+		_gsxgw.S("</select>")
+		_gsxgw.S("</label>")
+//line posts.gsx:111:3
+		_gsxgw.Node(ctx, components.Textarea(components.TextareaProps{Name: "body", Label: "Body", Value: p.Body, ErrMsg: ""}))
+//line posts.gsx:112:3
+		_gsxgw.S("<label")
+		_gsxgw.S(" class=\"flex items-center gap-2 text-sm\"")
+		_gsxgw.S(">")
+//line posts.gsx:113:4
+		_gsxgw.S("<input")
+		_gsxgw.S(" type=\"checkbox\"")
+		_gsxgw.S(" name=\"published\"")
+		_gsxgw.BoolAttr("checked", bool(p.Published))
+		_gsxgw.S("/>")
+		_gsxgw.S("Publish immediately")
+		_gsxgw.S("</label>")
+//line posts.gsx:116:3
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"flex items-center gap-2\"")
+		_gsxgw.S(">")
+//line posts.gsx:117:4
+		_gsxgw.Node(ctx, components.Button(components.ButtonProps{Label: "Save", Attrs: gsx.Attrs{}.Merge(gsx.Attrs{"type": "submit"})}))
+//line posts.gsx:118:4
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"text-sm text-slate-500 hover:underline\"")
+		_gsxv1, _gsxerr := components.URL(ctx, postListPage{})
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv1))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Cancel")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</div>")
+		_gsxgw.S("</form>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/admin/users.x.go b/examples/blog/admin/users.x.go
new file mode 100644
index 0000000..5f87f37
--- /dev/null
+++ b/examples/blog/admin/users.x.go
@@ -0,0 +1,154 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package admin
+
+import (
+	"context"
+	"io"
+	"net/http"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages/examples/blog/auth"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type userListPage struct{}
+
+type userListProps struct {
+	User  store.User
+	Users []store.User
+}
+
+func (userListPage) Props(r *http.Request, s *store.Store) (userListProps, error) {
+	user, _ := auth.UserFromContext(r.Context())
+	return userListProps{User: user, Users: s.ListUsers()}, nil
+}
+
+func (p userListPage) Page(props userListProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line users.gsx:26:2
+		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Users", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line users.gsx:27:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Users")
+			_gsxgw.S("</h1>")
+//line users.gsx:28:3
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"grid gap-4 md:grid-cols-2\"")
+			_gsxgw.S(">")
+//line users.gsx:29:3
+			_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Existing users", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+				_gsxgw := gsx.W(_gsxw)
+//line users.gsx:30:4
+				_gsxgw.S("<ul")
+				_gsxgw.S(" class=\"divide-y text-sm\"")
+				_gsxgw.S(">")
+//line users.gsx:31:5
+				for _, u := range props.Users {
+//line users.gsx:32:6
+					_gsxgw.S("<li")
+					_gsxgw.S(" class=\"flex items-center justify-between py-2\"")
+					_gsxgw.S(">")
+//line users.gsx:33:7
+					_gsxgw.S("<span")
+					_gsxgw.S(">")
+//line users.gsx:34:8
+					_gsxgw.Text(string(u.Username))
+//line users.gsx:35:8
+					if u.IsAdmin {
+//line users.gsx:36:9
+						_gsxgw.S("<span")
+						_gsxgw.S(" class=\"ml-2 rounded bg-slate-900 px-2 py-0.5 text-xs text-white\"")
+						_gsxgw.S(">")
+						_gsxgw.S("admin")
+						_gsxgw.S("</span>")
+					}
+					_gsxgw.S("</span>")
+//line users.gsx:39:7
+					_gsxgw.S("<form")
+					_gsxgw.S(" method=\"POST\"")
+					_gsxv0, _gsxerr := components.URL(ctx, userDeleteHandler{}, "id", u.ID)
+					if _gsxerr != nil {
+						return _gsxerr
+					}
+					_gsxgw.S(" action=\"")
+					_gsxgw.URL(string(_gsxv0))
+					_gsxgw.S("\"")
+					_gsxgw.S(" class=\"m-0\"")
+					_gsxgw.S(">")
+//line users.gsx:44:8
+					_gsxgw.S("<button")
+					_gsxgw.S(" class=\"text-xs text-red-600 hover:underline\"")
+					_gsxgw.S(" type=\"submit\"")
+					_gsxgw.S(">")
+					_gsxgw.S("Delete")
+					_gsxgw.S("</button>")
+					_gsxgw.S("</form>")
+					_gsxgw.S("</li>")
+				}
+				_gsxgw.S("</ul>")
+				return _gsxgw.Err()
+			})}))
+//line users.gsx:50:3
+			_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Create user", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+				_gsxgw := gsx.W(_gsxw)
+//line users.gsx:51:4
+				_gsxgw.S("<form")
+				_gsxgw.S(" method=\"POST\"")
+				_gsxv1, _gsxerr := components.URL(ctx, userCreateHandler{})
+				if _gsxerr != nil {
+					return _gsxerr
+				}
+				_gsxgw.S(" action=\"")
+				_gsxgw.URL(string(_gsxv1))
+				_gsxgw.S("\"")
+				_gsxgw.S(" class=\"space-y-3\"")
+				_gsxgw.S(">")
+//line users.gsx:52:5
+				_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "username", Label: "Username", Value: "", ErrMsg: ""}))
+//line users.gsx:53:5
+				_gsxgw.S("<label")
+				_gsxgw.S(" class=\"block text-sm\"")
+				_gsxgw.S(">")
+//line users.gsx:54:6
+				_gsxgw.S("<span")
+				_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
+				_gsxgw.S(">")
+				_gsxgw.S("Password")
+				_gsxgw.S("</span>")
+//line users.gsx:55:6
+				_gsxgw.S("<input")
+				_gsxgw.S(" type=\"password\"")
+				_gsxgw.S(" name=\"password\"")
+				_gsxgw.BoolAttr("required", true)
+				_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
+				_gsxgw.S("/>")
+				_gsxgw.S("</label>")
+//line users.gsx:62:5
+				_gsxgw.S("<label")
+				_gsxgw.S(" class=\"flex items-center gap-2 text-sm\"")
+				_gsxgw.S(">")
+//line users.gsx:63:6
+				_gsxgw.S("<input")
+				_gsxgw.S(" type=\"checkbox\"")
+				_gsxgw.S(" name=\"is_admin\"")
+				_gsxgw.S("/>")
+				_gsxgw.S("Grant admin")
+				_gsxgw.S("</label>")
+//line users.gsx:66:5
+				_gsxgw.Node(ctx, components.Button(components.ButtonProps{Label: "Create", Attrs: gsx.Attrs{}.Merge(gsx.Attrs{"type": "submit"})}))
+				_gsxgw.S("</form>")
+				return _gsxgw.Err()
+			})}))
+			_gsxgw.S("</div>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/blog/category.gsx b/examples/blog/blog/category.gsx
index fa89563..8586d97 100644
--- a/examples/blog/blog/category.gsx
+++ b/examples/blog/blog/category.gsx
@@ -4,7 +4,6 @@ import (
 	"net/http"
 	"strconv"
 
-	"github.com/jackielii/structpages"
 	"github.com/jackielii/structpages/examples/blog/store"
 	"github.com/jackielii/structpages/examples/blog/ui/components"
 	"github.com/jackielii/structpages/examples/blog/ui/layout"
@@ -43,7 +42,7 @@ func (categoryPage) Props(r *http.Request, s *store.Store) (categoryProps, error
 			PageSize: store.DefaultPageSize,
 			Total:    total,
 			URL: func(target int) (string, error) {
-				return structpages.URLFor(ctx,
+				return components.URL(ctx,
 					[]any{categoryPage{}, "?page={page}"},
 					"page", target,
 				)
diff --git a/examples/blog/blog/category.x.go b/examples/blog/blog/category.x.go
new file mode 100644
index 0000000..5d09775
--- /dev/null
+++ b/examples/blog/blog/category.x.go
@@ -0,0 +1,108 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package blog
+
+import (
+	"context"
+	"io"
+	"net/http"
+	"strconv"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type categoryPage struct{}
+
+type categoryProps struct {
+	Category   store.Category
+	Posts      []store.Post
+	Pagination components.PageNav
+}
+
+func (categoryPage) Props(r *http.Request, s *store.Store) (categoryProps, error) {
+	slug := r.PathValue("slug")
+	cat, err := s.GetCategoryBySlug(slug)
+	if err != nil {
+		return categoryProps{}, err
+	}
+	page, _ := strconv.Atoi(r.URL.Query().Get("page"))
+	if page < 1 {
+		page = 1
+	}
+	posts, total := s.ListPosts(store.PostFilter{
+		CategoryID: cat.ID,
+		Page:       page,
+		PageSize:   store.DefaultPageSize,
+	})
+
+	ctx := r.Context()
+	return categoryProps{
+		Category: cat,
+		Posts:    posts,
+		Pagination: components.PageNav{
+			Page:     page,
+			PageSize: store.DefaultPageSize,
+			Total:    total,
+			URL: func(target int) (string, error) {
+				return components.URL(ctx,
+					[]any{categoryPage{}, "?page={page}"},
+					"page", target,
+				)
+			},
+		},
+	}, nil
+}
+
+func (p categoryPage) Page(props categoryProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line category.gsx:55:2
+		_gsxgw.Node(ctx, layout.PublicShell(layout.PublicShellProps{Title: props.Category.Name, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line category.gsx:56:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"mb-1 text-2xl font-semibold\"")
+			_gsxgw.S(">")
+//line category.gsx:56:43
+			_gsxgw.Text(string(props.Category.Name))
+			_gsxgw.S("</h1>")
+//line category.gsx:57:3
+			_gsxgw.S("<p")
+			_gsxgw.S(" class=\"mb-6 text-sm text-slate-500\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Posts filed under this category.")
+			_gsxgw.S("</p>")
+//line category.gsx:58:3
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"space-y-4\"")
+			_gsxgw.S(">")
+//line category.gsx:59:4
+			if len(props.Posts) == 0 {
+//line category.gsx:60:5
+				_gsxgw.S("<p")
+				_gsxgw.S(" class=\"text-sm text-slate-500\"")
+				_gsxgw.S(">")
+				_gsxgw.S("Nothing here yet.")
+				_gsxgw.S("</p>")
+			}
+//line category.gsx:62:4
+			for _, post := range props.Posts {
+//line category.gsx:63:5
+				_gsxgw.Node(ctx, PostCard(PostCardProps{P: post}))
+			}
+			_gsxgw.S("</div>")
+//line category.gsx:66:3
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"mt-6\"")
+			_gsxgw.S(">")
+//line category.gsx:67:4
+			_gsxgw.Node(ctx, components.Pagination(props.Pagination))
+			_gsxgw.S("</div>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/blog/home.x.go b/examples/blog/blog/home.x.go
new file mode 100644
index 0000000..7b7455a
--- /dev/null
+++ b/examples/blog/blog/home.x.go
@@ -0,0 +1,92 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package blog
+
+import (
+	"context"
+	"io"
+	"net/http"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type homePage struct{}
+
+type homeProps struct {
+	Posts      []store.Post
+	Categories []store.Category
+}
+
+// Props loads page data. Returns homeProps directly — gsx now emits method
+// components as func (p homePage) Page(props homeProps) gsx.Node without a wrapper struct.
+func (homePage) Props(_ *http.Request, s *store.Store) (homeProps, error) {
+	posts, _ := s.ListPosts(store.PostFilter{PageSize: 5})
+	return homeProps{Posts: posts, Categories: s.ListCategories()}, nil
+}
+
+// Page renders the full document. The former Content() method is inlined here:
+// gsx's generated-props wrapping makes a separate Content(props) method
+// undispatchable by structpages alongside Page(props) (both would need the same
+// single Props-return type). See GAP notes.
+
+func (p homePage) Page(props homeProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line home.gsx:30:2
+		_gsxgw.Node(ctx, layout.PublicShell(layout.PublicShellProps{Title: "Home", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line home.gsx:31:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Recent Posts")
+			_gsxgw.S("</h1>")
+//line home.gsx:32:3
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"space-y-4\"")
+			_gsxgw.S(">")
+//line home.gsx:33:4
+			for _, post := range props.Posts {
+//line home.gsx:34:5
+				_gsxgw.Node(ctx, PostCard(PostCardProps{P: post}))
+			}
+			_gsxgw.S("</div>")
+//line home.gsx:37:3
+			_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Browse by category", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+				_gsxgw := gsx.W(_gsxw)
+//line home.gsx:38:4
+				_gsxgw.S("<ul")
+				_gsxgw.S(" class=\"flex flex-wrap gap-2\"")
+				_gsxgw.S(">")
+//line home.gsx:39:5
+				for _, c := range props.Categories {
+//line home.gsx:40:6
+					_gsxgw.S("<li")
+					_gsxgw.S(">")
+//line home.gsx:41:7
+					_gsxgw.S("<a")
+					_gsxgw.S(" class=\"rounded-full border px-3 py-1 text-sm hover:bg-slate-50\"")
+					_gsxv0, _gsxerr := components.URL(ctx, categoryPage{}, "slug", c.Slug)
+					if _gsxerr != nil {
+						return _gsxerr
+					}
+					_gsxgw.S(" href=\"")
+					_gsxgw.URL(string(_gsxv0))
+					_gsxgw.S("\"")
+					_gsxgw.S(">")
+//line home.gsx:42:8
+					_gsxgw.Text(string(c.Name))
+					_gsxgw.S("</a>")
+					_gsxgw.S("</li>")
+				}
+				_gsxgw.S("</ul>")
+				return _gsxgw.Err()
+			})}))
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/blog/post.gsx b/examples/blog/blog/post.gsx
index 88b100e..b941619 100644
--- a/examples/blog/blog/post.gsx
+++ b/examples/blog/blog/post.gsx
@@ -4,7 +4,6 @@ import (
 	"net/http"
 
 	"github.com/gsxhq/gsx"
-	"github.com/jackielii/structpages"
 	"github.com/jackielii/structpages/examples/blog/store"
 	"github.com/jackielii/structpages/examples/blog/ui/components"
 	"github.com/jackielii/structpages/examples/blog/ui/layout"
@@ -54,8 +53,8 @@ component (p postPage) Page(props postProps) {
 			<CommentsList comments={props.Comments}/>
 			<form
 				class="space-y-2 rounded border bg-white p-4"
-				hx-post={ structpages.URLFor(ctx, commentHandler{}, "slug", props.Post.Slug) }
-				hx-target={ structpages.IDTarget(ctx, CommentsList) }
+				hx-post={ commentHandler{} |> url("slug", props.Post.Slug) }
+				hx-target={ CommentsList |> target }
 				hx-swap="outerHTML"
 				hx-on:htmx:after-request="this.reset()"
 			>
diff --git a/examples/blog/blog/post.x.go b/examples/blog/blog/post.x.go
new file mode 100644
index 0000000..01c83f9
--- /dev/null
+++ b/examples/blog/blog/post.x.go
@@ -0,0 +1,147 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package blog
+
+import (
+	"context"
+	"io"
+	"net/http"
+
+	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/components"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type postPage struct{}
+
+type postProps struct {
+	Post     store.Post
+	Author   store.User
+	Category store.Category
+	Comments []store.Comment
+}
+
+func (postPage) Props(r *http.Request, s *store.Store) (postProps, error) {
+	slug := r.PathValue("slug")
+	p, err := s.GetPostBySlug(slug)
+	if err != nil {
+		return postProps{}, err
+	}
+	author, _ := s.GetUser(p.AuthorID)
+	category, _ := s.GetCategory(p.CategoryID)
+	return postProps{
+		Post:     p,
+		Author:   author,
+		Category: category,
+		Comments: s.ListComments(p.ID),
+	}, nil
+}
+
+func (p postPage) Page(props postProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line post.gsx:38:2
+		_gsxgw.Node(ctx, layout.PublicShell(layout.PublicShellProps{Title: props.Post.Title, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line post.gsx:39:3
+			_gsxgw.S("<article")
+			_gsxgw.S(" class=\"space-y-3\"")
+			_gsxgw.S(">")
+//line post.gsx:40:4
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"text-2xl font-semibold\"")
+			_gsxgw.S(">")
+//line post.gsx:40:39
+			_gsxgw.Text(string(props.Post.Title))
+			_gsxgw.S("</h1>")
+//line post.gsx:41:4
+			_gsxgw.S("<p")
+			_gsxgw.S(" class=\"text-sm text-slate-500\"")
+			_gsxgw.S(">")
+			_gsxgw.S("by ")
+//line post.gsx:42:8
+			_gsxgw.Text(string(props.Author.Username))
+//line post.gsx:43:5
+			if props.Category.Slug != "" {
+				_gsxgw.S("· ")
+//line post.gsx:44:9
+				_gsxgw.S("<a")
+				_gsxgw.S(" class=\"hover:underline\"")
+				_gsxv0, _gsxerr := components.URL(ctx, categoryPage{}, "slug", props.Category.Slug)
+				if _gsxerr != nil {
+					return _gsxerr
+				}
+				_gsxgw.S(" href=\"")
+				_gsxgw.URL(string(_gsxv0))
+				_gsxgw.S("\"")
+				_gsxgw.S(">")
+//line post.gsx:44:110
+				_gsxgw.Text(string(props.Category.Name))
+				_gsxgw.S("</a>")
+			}
+			_gsxgw.S("</p>")
+//line post.gsx:47:4
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"prose max-w-none text-slate-800\"")
+			_gsxgw.S(">")
+//line post.gsx:48:5
+			_gsxgw.S("<p")
+			_gsxgw.S(">")
+//line post.gsx:48:8
+			_gsxgw.Text(string(props.Post.Body))
+			_gsxgw.S("</p>")
+			_gsxgw.S("</div>")
+			_gsxgw.S("</article>")
+//line post.gsx:51:3
+			_gsxgw.S("<section")
+			_gsxgw.S(" class=\"mt-10 space-y-4\"")
+			_gsxgw.S(">")
+//line post.gsx:52:4
+			_gsxgw.S("<h2")
+			_gsxgw.S(" class=\"text-lg font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Comments")
+			_gsxgw.S("</h2>")
+//line post.gsx:53:4
+			_gsxgw.Node(ctx, CommentsList(CommentsListProps{Comments: props.Comments}))
+//line post.gsx:54:4
+			_gsxgw.S("<form")
+			_gsxgw.S(" class=\"space-y-2 rounded border bg-white p-4\"")
+			_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (commentHandler{}), "slug", props.Post.Slug)
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-post=\"")
+			_gsxgw.URL(string(_gsxv1))
+			_gsxgw.S("\"")
+			_gsxv2, _gsxerr := _gsxf0.IDTarget(ctx, (CommentsList))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-target=\"")
+			_gsxgw.AttrValue(string(_gsxv2))
+			_gsxgw.S("\"")
+			_gsxgw.S(" hx-swap=\"outerHTML\"")
+			_gsxgw.S(" hx-on:htmx:after-request=\"this.reset()\"")
+			_gsxgw.S(">")
+//line post.gsx:61:5
+			_gsxgw.S("<h3")
+			_gsxgw.S(" class=\"text-sm font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Add a comment")
+			_gsxgw.S("</h3>")
+//line post.gsx:62:5
+			_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "author", Label: "Name", Value: "", ErrMsg: ""}))
+//line post.gsx:63:5
+			_gsxgw.Node(ctx, components.Textarea(components.TextareaProps{Name: "body", Label: "Comment", Value: "", ErrMsg: ""}))
+//line post.gsx:64:5
+			_gsxgw.Node(ctx, components.Button(components.ButtonProps{Label: "Post comment", Attrs: gsx.Attrs{}.Merge(gsx.Attrs{"type": "submit"})}))
+			_gsxgw.S("</form>")
+			_gsxgw.S("</section>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/blog/search.gsx b/examples/blog/blog/search.gsx
index 72a84f0..a6efeb5 100644
--- a/examples/blog/blog/search.gsx
+++ b/examples/blog/blog/search.gsx
@@ -35,8 +35,8 @@ component (p searchPage) Page(props searchProps) {
 		<h1 class="mb-4 text-2xl font-semibold">Search</h1>
 		<form
 			class="mb-6"
-			hx-get={ structpages.URLFor(ctx, searchPage{}) }
-			hx-target={ structpages.IDTarget(ctx, p.Results) }
+			hx-get={ searchPage{} |> url }
+			hx-target={ p.Results |> target }
 			hx-swap="outerHTML"
 			hx-trigger="input changed delay:250ms from:input, submit"
 			hx-push-url="true"
@@ -54,7 +54,7 @@ component (p searchPage) Page(props searchProps) {
 }
 
 component (p searchPage) Results(props searchProps) {
-	<div id={ structpages.ID(ctx, searchPage.Results) } class="space-y-4">
+	<div id={ searchPage.Results |> id } class="space-y-4">
 		{ if props.Query == "" {
 			<p class="text-sm text-slate-500">Type a query to search.</p>
 		} else if len(props.Posts) == 0 {
diff --git a/examples/blog/blog/search.x.go b/examples/blog/blog/search.x.go
new file mode 100644
index 0000000..0b19de3
--- /dev/null
+++ b/examples/blog/blog/search.x.go
@@ -0,0 +1,143 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package blog
+
+import (
+	"context"
+	"io"
+	"net/http"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages"
+	_gsxf0 "github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/store"
+	"github.com/jackielii/structpages/examples/blog/ui/layout"
+)
+
+type searchPage struct{}
+
+type searchProps struct {
+	Query string
+	Posts []store.Post
+}
+
+// Props uses RenderTarget to load less when HTMX only wants the results
+// fragment. On the initial page load it returns the full searchProps; when the
+// Results fragment is targeted it renders just that component via RenderComponent.
+func (p searchPage) Props(r *http.Request, s *store.Store, target structpages.RenderTarget) (searchProps, error) {
+	q := r.URL.Query().Get("q")
+	sp := searchProps{Query: q}
+	if q != "" {
+		sp.Posts, _ = s.ListPosts(store.PostFilter{Search: q})
+	}
+	if target.Is(p.Results) {
+		return searchProps{}, structpages.RenderComponent(p.Results(sp))
+	}
+	return sp, nil
+}
+
+func (p searchPage) Page(props searchProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line search.gsx:34:2
+		_gsxgw.Node(ctx, layout.PublicShell(layout.PublicShellProps{Title: "Search", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line search.gsx:35:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Search")
+			_gsxgw.S("</h1>")
+//line search.gsx:36:3
+			_gsxgw.S("<form")
+			_gsxgw.S(" class=\"mb-6\"")
+			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (searchPage{}))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-get=\"")
+			_gsxgw.URL(string(_gsxv0))
+			_gsxgw.S("\"")
+			_gsxv1, _gsxerr := _gsxf0.IDTarget(ctx, (p.Results))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-target=\"")
+			_gsxgw.AttrValue(string(_gsxv1))
+			_gsxgw.S("\"")
+			_gsxgw.S(" hx-swap=\"outerHTML\"")
+			_gsxgw.S(" hx-trigger=\"input changed delay:250ms from:input, submit\"")
+			_gsxgw.S(" hx-push-url=\"true\"")
+			_gsxgw.S(">")
+//line search.gsx:44:4
+			_gsxgw.S("<input")
+			_gsxgw.S(" name=\"q\"")
+			_gsxgw.S(" value=\"")
+			_gsxgw.AttrValue(string(props.Query))
+			_gsxgw.S("\"")
+			_gsxgw.S(" placeholder=\"Search posts...\"")
+			_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-3 py-2 text-sm\"")
+			_gsxgw.BoolAttr("autofocus", true)
+			_gsxgw.S("/>")
+			_gsxgw.S("</form>")
+//line search.gsx:52:3
+			_gsxgw.Node(ctx, p.Results(props))
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p searchPage) Results(props searchProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line search.gsx:57:2
+		_gsxgw.S("<div")
+		_gsxv2, _gsxerr := _gsxf0.ID(ctx, (searchPage.Results))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" id=\"")
+		_gsxgw.AttrValue(string(_gsxv2))
+		_gsxgw.S("\"")
+		_gsxgw.S(" class=\"space-y-4\"")
+		_gsxgw.S(">")
+//line search.gsx:58:3
+		if props.Query == "" {
+//line search.gsx:59:4
+			_gsxgw.S("<p")
+			_gsxgw.S(" class=\"text-sm text-slate-500\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Type a query to search.")
+			_gsxgw.S("</p>")
+		} else {
+//line search.gsx:60:10
+			if len(props.Posts) == 0 {
+//line search.gsx:61:4
+				_gsxgw.S("<p")
+				_gsxgw.S(" class=\"text-sm text-slate-500\"")
+				_gsxgw.S(">")
+				_gsxgw.S("No results for \"")
+//line search.gsx:61:54
+				_gsxgw.Text(string(props.Query))
+				_gsxgw.S("\".")
+				_gsxgw.S("</p>")
+			} else {
+//line search.gsx:63:4
+				_gsxgw.S("<p")
+				_gsxgw.S(" class=\"text-xs text-slate-500\"")
+				_gsxgw.S(">")
+//line search.gsx:63:38
+				_gsxgw.Text(string(resultsCount(len(props.Posts))))
+				_gsxgw.S("</p>")
+//line search.gsx:64:4
+				for _, post := range props.Posts {
+//line search.gsx:65:5
+					_gsxgw.Node(ctx, PostCard(PostCardProps{P: post}))
+				}
+			}
+		}
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/cmd/gen/main.go b/examples/blog/cmd/gen/main.go
new file mode 100644
index 0000000..a88d6a7
--- /dev/null
+++ b/examples/blog/cmd/gen/main.go
@@ -0,0 +1,21 @@
+// Command gen runs gsx codegen for the blog example with the structpages
+// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
+// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
+// error-returning structpages.URLFor / ID / IDTarget calls.
+//
+// Generate with:  go run ./cmd/gen generate ./admin ./blog ./ui/components ./ui/layout
+package main
+
+import (
+	"github.com/gsxhq/gsx/gen"
+
+	"github.com/jackielii/structpages"
+)
+
+func main() {
+	gen.Main(
+		gen.WithFilter("url", structpages.URLFor),
+		gen.WithFilter("id", structpages.ID),
+		gen.WithFilter("target", structpages.IDTarget),
+	)
+}
diff --git a/examples/blog/go.mod b/examples/blog/go.mod
index 863813a..2d78c38 100644
--- a/examples/blog/go.mod
+++ b/examples/blog/go.mod
@@ -4,7 +4,10 @@ go 1.26.1
 
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
-require github.com/a-h/templ v0.3.1020 // indirect
+require (
+	github.com/a-h/templ v0.3.1020 // indirect
+	github.com/tdewolff/parse/v2 v2.8.13 // indirect
+)
 
 require (
 	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
diff --git a/examples/blog/go.sum b/examples/blog/go.sum
index df0b1bd..d06353a 100644
--- a/examples/blog/go.sum
+++ b/examples/blog/go.sum
@@ -29,6 +29,10 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
+github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
+github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
+github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
 golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
 golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
 golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
diff --git a/examples/blog/ui/components/components.x.go b/examples/blog/ui/components/components.x.go
new file mode 100644
index 0000000..876cce7
--- /dev/null
+++ b/examples/blog/ui/components/components.x.go
@@ -0,0 +1,419 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package components
+
+import (
+	"context"
+	"io"
+	"strconv"
+
+	"github.com/gsxhq/gsx"
+)
+
+type AlertKind string
+
+const (
+	AlertInfo    AlertKind = "info"
+	AlertError   AlertKind = "error"
+	AlertSuccess AlertKind = "success"
+)
+
+func alertClasses(kind AlertKind) string {
+	switch kind {
+	case AlertError:
+		return "border-red-200 bg-red-50 text-red-800"
+	case AlertSuccess:
+		return "border-emerald-200 bg-emerald-50 text-emerald-800"
+	default:
+		return "border-slate-200 bg-slate-50 text-slate-800"
+	}
+}
+
+type AlertProps struct {
+	Kind AlertKind
+	Msg  string
+}
+
+func Alert(_gsxp AlertProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		kind := _gsxp.Kind
+		msg := _gsxp.Msg
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:30:2
+		if msg != "" {
+//line components.gsx:31:3
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"")
+			_gsxgw.Class(gsx.Class("rounded border px-3 py-2 text-sm"), gsx.Class(alertClasses(kind)))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+//line components.gsx:31:73
+			_gsxgw.Text(string(msg))
+			_gsxgw.S("</div>")
+		}
+		return _gsxgw.Err()
+	})
+}
+
+type CardProps struct {
+	Title    string
+	Children gsx.Node
+	Attrs    gsx.Attrs
+}
+
+func Card(_gsxp CardProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		title := _gsxp.Title
+		children := _gsxp.Children
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:36:2
+		_gsxgw.S("<section")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("rounded-lg border bg-white p-5 shadow-sm"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:37:3
+		if title != "" {
+//line components.gsx:38:4
+			_gsxgw.S("<h2")
+			_gsxgw.S(" class=\"mb-3 text-base font-semibold text-slate-900\"")
+			_gsxgw.S(">")
+//line components.gsx:38:60
+			_gsxgw.Text(string(title))
+			_gsxgw.S("</h2>")
+		}
+//line components.gsx:40:3
+		_gsxgw.Node(ctx, children)
+		_gsxgw.S("</section>")
+		return _gsxgw.Err()
+	})
+}
+
+// Button takes only its label; any extra attributes (type, hx-*, etc.) fall
+// through to the root <button> automatically — no explicit attrs param.
+
+type ButtonProps struct {
+	Label string
+	Attrs gsx.Attrs
+}
+
+func Button(_gsxp ButtonProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		label := _gsxp.Label
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:47:2
+		_gsxgw.S("<button")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("inline-flex items-center rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:50:3
+		_gsxgw.Text(string(label))
+		_gsxgw.S("</button>")
+		return _gsxgw.Err()
+	})
+}
+
+type InputProps struct {
+	Name   string
+	Label  string
+	Value  string
+	ErrMsg string
+	Attrs  gsx.Attrs
+}
+
+func Input(_gsxp InputProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		name := _gsxp.Name
+		label := _gsxp.Label
+		value := _gsxp.Value
+		errMsg := _gsxp.ErrMsg
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:55:2
+		_gsxgw.S("<label")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("block text-sm"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:56:3
+		_gsxgw.S("<span")
+		_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
+		_gsxgw.S(">")
+//line components.gsx:56:55
+		_gsxgw.Text(string(label))
+		_gsxgw.S("</span>")
+//line components.gsx:57:3
+		_gsxgw.S("<input")
+		_gsxgw.S(" name=\"")
+		_gsxgw.AttrValue(string(name))
+		_gsxgw.S("\"")
+		_gsxgw.S(" value=\"")
+		_gsxgw.AttrValue(string(value))
+		_gsxgw.S("\"")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("w-full rounded border px-2 py-1.5 text-sm"), gsx.ClassIf("border-slate-300", errMsg == ""), gsx.ClassIf("border-red-400", errMsg != ""))
+		_gsxgw.S("\"")
+		_gsxgw.S("/>")
+//line components.gsx:66:3
+		if errMsg != "" {
+//line components.gsx:67:4
+			_gsxgw.S("<span")
+			_gsxgw.S(" class=\"mt-1 block text-xs text-red-600\"")
+			_gsxgw.S(">")
+//line components.gsx:67:50
+			_gsxgw.Text(string(errMsg))
+			_gsxgw.S("</span>")
+		}
+		_gsxgw.S("</label>")
+		return _gsxgw.Err()
+	})
+}
+
+type TextareaProps struct {
+	Name   string
+	Label  string
+	Value  string
+	ErrMsg string
+	Attrs  gsx.Attrs
+}
+
+func Textarea(_gsxp TextareaProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		name := _gsxp.Name
+		label := _gsxp.Label
+		value := _gsxp.Value
+		errMsg := _gsxp.ErrMsg
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:73:2
+		_gsxgw.S("<label")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("block text-sm"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:74:3
+		_gsxgw.S("<span")
+		_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
+		_gsxgw.S(">")
+//line components.gsx:74:55
+		_gsxgw.Text(string(label))
+		_gsxgw.S("</span>")
+//line components.gsx:75:3
+		_gsxgw.S("<textarea")
+		_gsxgw.S(" name=\"")
+		_gsxgw.AttrValue(string(name))
+		_gsxgw.S("\"")
+		_gsxgw.S(" rows=\"6\"")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("w-full rounded border px-2 py-1.5 text-sm"), gsx.ClassIf("border-slate-300", errMsg == ""), gsx.ClassIf("border-red-400", errMsg != ""))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+//line components.gsx:83:4
+		_gsxgw.Text(string(value))
+		_gsxgw.S("</textarea>")
+//line components.gsx:84:3
+		if errMsg != "" {
+//line components.gsx:85:4
+			_gsxgw.S("<span")
+			_gsxgw.S(" class=\"mt-1 block text-xs text-red-600\"")
+			_gsxgw.S(">")
+//line components.gsx:85:50
+			_gsxgw.Text(string(errMsg))
+			_gsxgw.S("</span>")
+		}
+		_gsxgw.S("</label>")
+		return _gsxgw.Err()
+	})
+}
+
+// Pagination is rendered as a standalone function component so HTMX requests
+// with HX-Target: #pagination resolve here regardless of which page hosts it.
+
+func Pagination(p PageNav) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:93:2
+		_gsxgw.S("<nav")
+		_gsxgw.S(" id=\"pagination\"")
+		_gsxgw.S(" class=\"flex items-center justify-between text-sm\"")
+		_gsxgw.S(">")
+//line components.gsx:94:3
+		_gsxgw.S("<span")
+		_gsxgw.S(" class=\"text-slate-500\"")
+		_gsxgw.S(">")
+//line components.gsx:94:32
+		_gsxgw.Text(string(p.Range()))
+		_gsxgw.S("</span>")
+//line components.gsx:95:3
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"flex gap-2\"")
+		_gsxgw.S(">")
+//line components.gsx:96:4
+		if p.HasPrev() {
+//line components.gsx:97:5
+			_gsxgw.S("<a")
+			_gsxgw.S(" class=\"rounded border px-2 py-1 hover:bg-slate-50\"")
+			_gsxv0, _gsxerr := p.URL(p.Page - 1)
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" href=\"")
+			_gsxgw.URL(string(_gsxv0))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+			_gsxgw.S("← Prev")
+			_gsxgw.S("</a>")
+		} else {
+//line components.gsx:99:5
+			_gsxgw.S("<span")
+			_gsxgw.S(" class=\"rounded border px-2 py-1 text-slate-300\"")
+			_gsxgw.S(">")
+			_gsxgw.S("← Prev")
+			_gsxgw.S("</span>")
+		}
+//line components.gsx:101:4
+		_gsxgw.S("<span")
+		_gsxgw.S(" class=\"px-2 py-1 text-slate-600\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Page ")
+//line components.gsx:101:48
+		_gsxgw.Text(strconv.FormatInt(int64(p.Page), 10))
+		_gsxgw.S(" of ")
+//line components.gsx:101:60
+		_gsxgw.Text(strconv.FormatInt(int64(p.Pages()), 10))
+		_gsxgw.S("</span>")
+//line components.gsx:102:4
+		if p.HasNext() {
+//line components.gsx:103:5
+			_gsxgw.S("<a")
+			_gsxgw.S(" class=\"rounded border px-2 py-1 hover:bg-slate-50\"")
+			_gsxv1, _gsxerr := p.URL(p.Page + 1)
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" href=\"")
+			_gsxgw.URL(string(_gsxv1))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Next →")
+			_gsxgw.S("</a>")
+		} else {
+//line components.gsx:105:5
+			_gsxgw.S("<span")
+			_gsxgw.S(" class=\"rounded border px-2 py-1 text-slate-300\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Next →")
+			_gsxgw.S("</span>")
+		}
+		_gsxgw.S("</div>")
+		_gsxgw.S("</nav>")
+		return _gsxgw.Err()
+	})
+}
+
+// ErrorPage is the full document rendered by main.errorHandler for non-HTMX
+// errors. ErrorBlock is the partial used for HTMX requests.
+
+type ErrorPageProps struct {
+	Status int
+	Msg    string
+}
+
+func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		status := _gsxp.Status
+		msg := _gsxp.Msg
+		_gsxgw := gsx.W(_gsxw)
+		_gsxgw.S("<!DOCTYPE html>")
+//line components.gsx:115:2
+		_gsxgw.S("<html")
+		_gsxgw.S(" lang=\"en\"")
+		_gsxgw.S(">")
+//line components.gsx:116:3
+		_gsxgw.S("<head")
+		_gsxgw.S(">")
+//line components.gsx:117:4
+		_gsxgw.S("<meta")
+		_gsxgw.S(" charset=\"utf-8\"")
+		_gsxgw.S("/>")
+//line components.gsx:118:4
+		_gsxgw.S("<title")
+		_gsxgw.S(">")
+		_gsxgw.S("Error ")
+//line components.gsx:118:17
+		_gsxgw.Text(strconv.FormatInt(int64(status), 10))
+		_gsxgw.S("</title>")
+//line components.gsx:119:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://cdn.tailwindcss.com\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+		_gsxgw.S("</head>")
+//line components.gsx:121:3
+		_gsxgw.S("<body")
+		_gsxgw.S(" class=\"bg-slate-50 text-slate-900\"")
+		_gsxgw.S(">")
+//line components.gsx:122:4
+		_gsxgw.S("<main")
+		_gsxgw.S(" class=\"mx-auto max-w-md px-4 py-16\"")
+		_gsxgw.S(">")
+//line components.gsx:123:5
+		_gsxgw.Node(ctx, ErrorBlock(ErrorBlockProps{Status: status, Msg: msg}))
+		_gsxgw.S("</main>")
+		_gsxgw.S("</body>")
+		_gsxgw.S("</html>")
+		return _gsxgw.Err()
+	})
+}
+
+type ErrorBlockProps struct {
+	Status int
+	Msg    string
+	Attrs  gsx.Attrs
+}
+
+func ErrorBlock(_gsxp ErrorBlockProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		status := _gsxp.Status
+		msg := _gsxp.Msg
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:130:2
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("rounded-lg border border-red-200 bg-red-50 p-6 text-center"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:131:3
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"text-4xl font-semibold text-red-700\"")
+		_gsxgw.S(">")
+//line components.gsx:131:52
+		_gsxgw.Text(strconv.FormatInt(int64(status), 10))
+		_gsxgw.S("</div>")
+//line components.gsx:132:3
+		_gsxgw.S("<p")
+		_gsxgw.S(" class=\"mt-2 text-red-700\"")
+		_gsxgw.S(">")
+//line components.gsx:132:32
+		_gsxgw.Text(string(msg))
+		_gsxgw.S("</p>")
+//line components.gsx:133:3
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"mt-4 inline-block text-sm text-red-700 underline\"")
+		_gsxgw.S(" href=\"/\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Back to home")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/ui/layout/layout.gsx b/examples/blog/ui/layout/layout.gsx
index b28e7de..6a261cb 100644
--- a/examples/blog/ui/layout/layout.gsx
+++ b/examples/blog/ui/layout/layout.gsx
@@ -24,11 +24,11 @@ component PublicShell(title string) {
 		<body class="bg-slate-50 text-slate-900">
 			<header class="border-b bg-white">
 				<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
-					<a class="text-lg font-semibold" href={ structpages.URLFor(ctx, structpages.Ref("home")) }>structpages blog</a>
+					<a class="text-lg font-semibold" href={ structpages.Ref("home") |> url }>structpages blog</a>
 					<nav class="flex gap-4 text-sm">
-						<a class="hover:underline" href={ structpages.URLFor(ctx, structpages.Ref("home")) }>Home</a>
-						<a class="hover:underline" href={ structpages.URLFor(ctx, structpages.Ref("search")) }>Search</a>
-						<a class="text-slate-500 hover:text-slate-900" href={ structpages.URLFor(ctx, structpages.Ref("loginPage")) }>Admin</a>
+						<a class="hover:underline" href={ structpages.Ref("home") |> url }>Home</a>
+						<a class="hover:underline" href={ structpages.Ref("search") |> url }>Search</a>
+						<a class="text-slate-500 hover:text-slate-900" href={ structpages.Ref("loginPage") |> url }>Admin</a>
 					</nav>
 				</div>
 			</header>
@@ -53,17 +53,17 @@ component AdminShell(title string, current store.User) {
 		<body class="bg-slate-100 text-slate-900">
 			<header class="border-b bg-slate-900 text-slate-100">
 				<div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
-					<a class="flex items-center gap-2 text-lg font-semibold" href={ structpages.URLFor(ctx, structpages.Ref("dashboard")) }>
+					<a class="flex items-center gap-2 text-lg font-semibold" href={ structpages.Ref("dashboard") |> url }>
 						<img src="/admin/static/admin-logo.svg" alt="" class="h-5 w-5"/>
 						blog admin
 					</a>
 					<nav class="flex items-center gap-4 text-sm">
-						<a class="hover:underline" href={ structpages.URLFor(ctx, structpages.Ref("dashboard")) }>Dashboard</a>
-						<a class="hover:underline" href={ structpages.URLFor(ctx, structpages.Ref("postList")) }>Posts</a>
-						<a class="hover:underline" href={ structpages.URLFor(ctx, structpages.Ref("userList")) }>Users</a>
+						<a class="hover:underline" href={ structpages.Ref("dashboard") |> url }>Dashboard</a>
+						<a class="hover:underline" href={ structpages.Ref("postList") |> url }>Posts</a>
+						<a class="hover:underline" href={ structpages.Ref("userList") |> url }>Users</a>
 						<span class="text-slate-400">|</span>
 						<span class="text-slate-300">{current.Username}</span>
-						<form method="POST" action={ structpages.URLFor(ctx, structpages.Ref("logout")) } class="m-0">
+						<form method="POST" action={ structpages.Ref("logout") |> url } class="m-0">
 							<button class="text-slate-300 hover:text-white" type="submit">Sign out</button>
 						</form>
 					</nav>
diff --git a/examples/blog/ui/layout/layout.x.go b/examples/blog/ui/layout/layout.x.go
new file mode 100644
index 0000000..db55845
--- /dev/null
+++ b/examples/blog/ui/layout/layout.x.go
@@ -0,0 +1,320 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package layout
+
+import (
+	"context"
+	"io"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages"
+	_gsxf0 "github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/store"
+)
+
+// PublicShell wraps reader-facing pages. Cross-feature links (e.g. the admin
+// link) use structpages.Ref so this package never imports admin or blog —
+// keeping the dependency graph one-way (features → ui).
+
+type PublicShellProps struct {
+	Title    string
+	Children gsx.Node
+}
+
+func PublicShell(_gsxp PublicShellProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		title := _gsxp.Title
+		children := _gsxp.Children
+		_gsxgw := gsx.W(_gsxw)
+		_gsxgw.S("<!DOCTYPE html>")
+//line layout.gsx:16:2
+		_gsxgw.S("<html")
+		_gsxgw.S(" lang=\"en\"")
+		_gsxgw.S(">")
+//line layout.gsx:17:3
+		_gsxgw.S("<head")
+		_gsxgw.S(">")
+//line layout.gsx:18:4
+		_gsxgw.S("<meta")
+		_gsxgw.S(" charset=\"utf-8\"")
+		_gsxgw.S("/>")
+//line layout.gsx:19:4
+		_gsxgw.S("<meta")
+		_gsxgw.S(" name=\"viewport\"")
+		_gsxgw.S(" content=\"width=device-width, initial-scale=1\"")
+		_gsxgw.S("/>")
+//line layout.gsx:20:4
+		_gsxgw.S("<title")
+		_gsxgw.S(">")
+//line layout.gsx:20:11
+		_gsxgw.Text(string(title))
+		_gsxgw.S(" — structpages blog")
+		_gsxgw.S("</title>")
+//line layout.gsx:21:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://cdn.tailwindcss.com\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+//line layout.gsx:22:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+		_gsxgw.S("</head>")
+//line layout.gsx:24:3
+		_gsxgw.S("<body")
+		_gsxgw.S(" class=\"bg-slate-50 text-slate-900\"")
+		_gsxgw.S(">")
+//line layout.gsx:25:4
+		_gsxgw.S("<header")
+		_gsxgw.S(" class=\"border-b bg-white\"")
+		_gsxgw.S(">")
+//line layout.gsx:26:5
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"mx-auto flex max-w-3xl items-center justify-between px-4 py-3\"")
+		_gsxgw.S(">")
+//line layout.gsx:27:6
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"text-lg font-semibold\"")
+		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("home")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv0))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("structpages blog")
+		_gsxgw.S("</a>")
+//line layout.gsx:28:6
+		_gsxgw.S("<nav")
+		_gsxgw.S(" class=\"flex gap-4 text-sm\"")
+		_gsxgw.S(">")
+//line layout.gsx:29:7
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("home")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv1))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Home")
+		_gsxgw.S("</a>")
+//line layout.gsx:30:7
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("search")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv2))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Search")
+		_gsxgw.S("</a>")
+//line layout.gsx:31:7
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"text-slate-500 hover:text-slate-900\"")
+		_gsxv3, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("loginPage")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv3))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Admin")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</nav>")
+		_gsxgw.S("</div>")
+		_gsxgw.S("</header>")
+//line layout.gsx:35:4
+		_gsxgw.S("<main")
+		_gsxgw.S(" id=\"content\"")
+		_gsxgw.S(" class=\"mx-auto max-w-3xl px-4 py-8\"")
+		_gsxgw.S(">")
+//line layout.gsx:36:5
+		_gsxgw.Node(ctx, children)
+		_gsxgw.S("</main>")
+		_gsxgw.S("</body>")
+		_gsxgw.S("</html>")
+		return _gsxgw.Err()
+	})
+}
+
+// AdminShell wraps the authenticated admin app.
+
+type AdminShellProps struct {
+	Title    string
+	Current  store.User
+	Children gsx.Node
+}
+
+func AdminShell(_gsxp AdminShellProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		title := _gsxp.Title
+		current := _gsxp.Current
+		children := _gsxp.Children
+		_gsxgw := gsx.W(_gsxw)
+		_gsxgw.S("<!DOCTYPE html>")
+//line layout.gsx:45:2
+		_gsxgw.S("<html")
+		_gsxgw.S(" lang=\"en\"")
+		_gsxgw.S(">")
+//line layout.gsx:46:3
+		_gsxgw.S("<head")
+		_gsxgw.S(">")
+//line layout.gsx:47:4
+		_gsxgw.S("<meta")
+		_gsxgw.S(" charset=\"utf-8\"")
+		_gsxgw.S("/>")
+//line layout.gsx:48:4
+		_gsxgw.S("<meta")
+		_gsxgw.S(" name=\"viewport\"")
+		_gsxgw.S(" content=\"width=device-width, initial-scale=1\"")
+		_gsxgw.S("/>")
+//line layout.gsx:49:4
+		_gsxgw.S("<title")
+		_gsxgw.S(">")
+		_gsxgw.S("Admin — ")
+//line layout.gsx:49:21
+		_gsxgw.Text(string(title))
+		_gsxgw.S("</title>")
+//line layout.gsx:50:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://cdn.tailwindcss.com\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+//line layout.gsx:51:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+		_gsxgw.S("</head>")
+//line layout.gsx:53:3
+		_gsxgw.S("<body")
+		_gsxgw.S(" class=\"bg-slate-100 text-slate-900\"")
+		_gsxgw.S(">")
+//line layout.gsx:54:4
+		_gsxgw.S("<header")
+		_gsxgw.S(" class=\"border-b bg-slate-900 text-slate-100\"")
+		_gsxgw.S(">")
+//line layout.gsx:55:5
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"mx-auto flex max-w-5xl items-center justify-between px-4 py-3\"")
+		_gsxgw.S(">")
+//line layout.gsx:56:6
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"flex items-center gap-2 text-lg font-semibold\"")
+		_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("dashboard")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv4))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+//line layout.gsx:57:7
+		_gsxgw.S("<img")
+		_gsxgw.S(" src=\"/admin/static/admin-logo.svg\"")
+		_gsxgw.S(" alt=\"\"")
+		_gsxgw.S(" class=\"h-5 w-5\"")
+		_gsxgw.S("/>")
+		_gsxgw.S("blog admin")
+		_gsxgw.S("</a>")
+//line layout.gsx:60:6
+		_gsxgw.S("<nav")
+		_gsxgw.S(" class=\"flex items-center gap-4 text-sm\"")
+		_gsxgw.S(">")
+//line layout.gsx:61:7
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxv5, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("dashboard")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv5))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Dashboard")
+		_gsxgw.S("</a>")
+//line layout.gsx:62:7
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxv6, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("postList")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv6))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Posts")
+		_gsxgw.S("</a>")
+//line layout.gsx:63:7
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxv7, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("userList")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv7))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Users")
+		_gsxgw.S("</a>")
+//line layout.gsx:64:7
+		_gsxgw.S("<span")
+		_gsxgw.S(" class=\"text-slate-400\"")
+		_gsxgw.S(">")
+		_gsxgw.S("|")
+		_gsxgw.S("</span>")
+//line layout.gsx:65:7
+		_gsxgw.S("<span")
+		_gsxgw.S(" class=\"text-slate-300\"")
+		_gsxgw.S(">")
+//line layout.gsx:65:36
+		_gsxgw.Text(string(current.Username))
+		_gsxgw.S("</span>")
+//line layout.gsx:66:7
+		_gsxgw.S("<form")
+		_gsxgw.S(" method=\"POST\"")
+		_gsxv8, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("logout")))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" action=\"")
+		_gsxgw.URL(string(_gsxv8))
+		_gsxgw.S("\"")
+		_gsxgw.S(" class=\"m-0\"")
+		_gsxgw.S(">")
+//line layout.gsx:67:8
+		_gsxgw.S("<button")
+		_gsxgw.S(" class=\"text-slate-300 hover:text-white\"")
+		_gsxgw.S(" type=\"submit\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Sign out")
+		_gsxgw.S("</button>")
+		_gsxgw.S("</form>")
+		_gsxgw.S("</nav>")
+		_gsxgw.S("</div>")
+		_gsxgw.S("</header>")
+//line layout.gsx:72:4
+		_gsxgw.S("<main")
+		_gsxgw.S(" id=\"content\"")
+		_gsxgw.S(" class=\"mx-auto max-w-5xl px-4 py-8\"")
+		_gsxgw.S(">")
+//line layout.gsx:73:5
+		_gsxgw.Node(ctx, children)
+		_gsxgw.S("</main>")
+		_gsxgw.S("</body>")
+		_gsxgw.S("</html>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/htmx-render-target/cmd/gen/main.go b/examples/htmx-render-target/cmd/gen/main.go
new file mode 100644
index 0000000..2963d40
--- /dev/null
+++ b/examples/htmx-render-target/cmd/gen/main.go
@@ -0,0 +1,21 @@
+// Command gen runs gsx codegen for the htmx-render-target example with the
+// structpages pipeline filters registered, so .gsx templates can write
+// `{ page{} |> url }`, `{ x |> id }`, and `{ x |> target }` instead of the
+// ctx-threading, error-returning structpages.URLFor / ID / IDTarget calls.
+//
+// Generate with:  go run ./cmd/gen generate .
+package main
+
+import (
+	"github.com/gsxhq/gsx/gen"
+
+	"github.com/jackielii/structpages"
+)
+
+func main() {
+	gen.Main(
+		gen.WithFilter("url", structpages.URLFor),
+		gen.WithFilter("id", structpages.ID),
+		gen.WithFilter("target", structpages.IDTarget),
+	)
+}
diff --git a/examples/htmx-render-target/go.mod b/examples/htmx-render-target/go.mod
index dceb489..d8c4537 100644
--- a/examples/htmx-render-target/go.mod
+++ b/examples/htmx-render-target/go.mod
@@ -4,7 +4,10 @@ go 1.26.1
 
 require github.com/jackielii/structpages v0.0.0
 
-require github.com/a-h/templ v0.3.1020 // indirect
+require (
+	github.com/a-h/templ v0.3.1020 // indirect
+	github.com/tdewolff/parse/v2 v2.8.13 // indirect
+)
 
 require (
 	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
diff --git a/examples/htmx-render-target/go.sum b/examples/htmx-render-target/go.sum
index df0b1bd..d06353a 100644
--- a/examples/htmx-render-target/go.sum
+++ b/examples/htmx-render-target/go.sum
@@ -29,6 +29,10 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
+github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
+github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
+github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
 golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
 golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
 golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
diff --git a/examples/htmx-render-target/pages.gsx b/examples/htmx-render-target/pages.gsx
index 76920b8..2d65924 100644
--- a/examples/htmx-render-target/pages.gsx
+++ b/examples/htmx-render-target/pages.gsx
@@ -1,10 +1,7 @@
 package main
 
 import (
-	"context"
 	"fmt"
-
-	"github.com/jackielii/structpages"
 )
 
 // Shared standalone function components (can be used across multiple pages).
@@ -17,8 +14,8 @@ component UserStatsWidget(stats UserStats) {
 		<p>New Today: { fmt.Sprintf("%d", stats.NewToday) }</p>
 		<button
 			type="button"
-			hx-get={ urlFor(ctx, dashboard{}) }
-			hx-target={ idForTarget(ctx, UserStatsWidget) }
+			hx-get={ dashboard{} |> url }
+			hx-target={ UserStatsWidget |> target }
 		>Refresh Stats</button>
 	</div>
 }
@@ -34,8 +31,8 @@ component SalesChartWidget(data SalesData) {
 		<p>Total Sales: ${ fmt.Sprintf("%.2f", data.Total) }</p>
 		<button
 			type="button"
-			hx-get={ urlFor(ctx, dashboard{}) }
-			hx-target={ idForTarget(ctx, SalesChartWidget) }
+			hx-get={ dashboard{} |> url }
+			hx-target={ SalesChartWidget |> target }
 		>Refresh Sales</button>
 	</div>
 }
@@ -50,8 +47,8 @@ component NotificationsList(notifications []Notification) {
 		</ul>
 		<button
 			type="button"
-			hx-get={ urlFor(ctx, dashboard{}) }
-			hx-target={ idForTarget(ctx, NotificationsList) }
+			hx-get={ dashboard{} |> url }
+			hx-target={ NotificationsList |> target }
 		>Refresh Notifications</button>
 	</div>
 }
@@ -66,13 +63,13 @@ component (p dashboard) Page(props dashboardData) {
 		<p>This example demonstrates the RenderTarget API with standalone function components.</p>
 		<p>Click "Refresh" buttons to see HTMX partial updates — each widget loads only its own data!</p>
 		<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;">
-			<div id={ idFor(ctx, UserStatsWidget) }>
+			<div id={ UserStatsWidget |> id }>
 				<UserStatsWidget { props.Stats... } />
 			</div>
-			<div id={ idFor(ctx, SalesChartWidget) }>
+			<div id={ SalesChartWidget |> id }>
 				<SalesChartWidget { props.Sales... } />
 			</div>
-			<div id={ idFor(ctx, NotificationsList) }>
+			<div id={ NotificationsList |> id }>
 				<NotificationsList notifications={props.Notifications} />
 			</div>
 		</div>
@@ -133,17 +130,3 @@ component ErrorComp(err error) {
 	<h1>Error</h1>
 	<p>{ err.Error() }</p>
 }
-
-// Helper functions
-
-func urlFor(ctx context.Context, page any, args ...any) (string, error) {
-	return structpages.URLFor(ctx, page, args...)
-}
-
-func idFor(ctx context.Context, v any) (string, error) {
-	return structpages.ID(ctx, v)
-}
-
-func idForTarget(ctx context.Context, v any) (string, error) {
-	return structpages.IDTarget(ctx, v)
-}
diff --git a/examples/htmx-render-target/pages.x.go b/examples/htmx-render-target/pages.x.go
new file mode 100644
index 0000000..62fc6c0
--- /dev/null
+++ b/examples/htmx-render-target/pages.x.go
@@ -0,0 +1,436 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package main
+
+import (
+	"context"
+	"fmt"
+	"io"
+
+	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
+)
+
+// Shared standalone function components (can be used across multiple pages).
+// These demonstrate the power of RenderTarget — no wrapper methods needed.
+
+func UserStatsWidget(stats UserStats) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:11:2
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"widget\"")
+		_gsxgw.S(">")
+//line pages.gsx:12:3
+		_gsxgw.S("<h3")
+		_gsxgw.S(">")
+		_gsxgw.S("User Statistics")
+		_gsxgw.S("</h3>")
+//line pages.gsx:13:3
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+		_gsxgw.S("Active Users: ")
+//line pages.gsx:13:20
+		_gsxgw.Text(string(fmt.Sprintf("%d", stats.ActiveUsers)))
+		_gsxgw.S("</p>")
+//line pages.gsx:14:3
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+		_gsxgw.S("New Today: ")
+//line pages.gsx:14:17
+		_gsxgw.Text(string(fmt.Sprintf("%d", stats.NewToday)))
+		_gsxgw.S("</p>")
+//line pages.gsx:15:3
+		_gsxgw.S("<button")
+		_gsxgw.S(" type=\"button\"")
+		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (dashboard{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string(_gsxv0))
+		_gsxgw.S("\"")
+		_gsxv1, _gsxerr := _gsxf0.IDTarget(ctx, (UserStatsWidget))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-target=\"")
+		_gsxgw.AttrValue(string(_gsxv1))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Refresh Stats")
+		_gsxgw.S("</button>")
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
+
+func SalesChartWidget(data SalesData) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:24:2
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"widget\"")
+		_gsxgw.S(">")
+//line pages.gsx:25:3
+		_gsxgw.S("<h3")
+		_gsxgw.S(">")
+		_gsxgw.S("Sales Chart")
+		_gsxgw.S("</h3>")
+//line pages.gsx:26:3
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"chart\"")
+		_gsxgw.S(">")
+//line pages.gsx:27:4
+		for _, point := range data.Points {
+//line pages.gsx:28:5
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"bar\"")
+			_gsxgw.S(" data-h=\"")
+			_gsxgw.AttrValue(string(fmt.Sprint(point.Value)))
+			_gsxgw.S("\"")
+			_gsxgw.S(" style=\"width: 30px; background: blue; display: inline-block; margin: 2px;\"")
+			_gsxgw.S(">")
+			_gsxgw.S("</div>")
+		}
+		_gsxgw.S("</div>")
+//line pages.gsx:31:3
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+		_gsxgw.S("Total Sales: $")
+//line pages.gsx:31:20
+		_gsxgw.Text(string(fmt.Sprintf("%.2f", data.Total)))
+		_gsxgw.S("</p>")
+//line pages.gsx:32:3
+		_gsxgw.S("<button")
+		_gsxgw.S(" type=\"button\"")
+		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (dashboard{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string(_gsxv2))
+		_gsxgw.S("\"")
+		_gsxv3, _gsxerr := _gsxf0.IDTarget(ctx, (SalesChartWidget))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-target=\"")
+		_gsxgw.AttrValue(string(_gsxv3))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Refresh Sales")
+		_gsxgw.S("</button>")
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
+
+type NotificationsListProps struct {
+	Notifications []Notification
+	Attrs         gsx.Attrs
+}
+
+func NotificationsList(_gsxp NotificationsListProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		notifications := _gsxp.Notifications
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:41:2
+		_gsxgw.S("<div")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("widget"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line pages.gsx:42:3
+		_gsxgw.S("<h3")
+		_gsxgw.S(">")
+		_gsxgw.S("Recent Notifications")
+		_gsxgw.S("</h3>")
+//line pages.gsx:43:3
+		_gsxgw.S("<ul")
+		_gsxgw.S(">")
+//line pages.gsx:44:4
+		for _, n := range notifications {
+//line pages.gsx:45:5
+			_gsxgw.S("<li")
+			_gsxgw.S(">")
+//line pages.gsx:45:9
+			_gsxgw.Text(string(n.Message))
+			_gsxgw.S(" ")
+//line pages.gsx:45:23
+			_gsxgw.S("<small")
+			_gsxgw.S(">")
+			_gsxgw.S("(")
+//line pages.gsx:45:31
+			_gsxgw.Text(string(n.Time.Format("15:04")))
+			_gsxgw.S(")")
+			_gsxgw.S("</small>")
+			_gsxgw.S("</li>")
+		}
+		_gsxgw.S("</ul>")
+//line pages.gsx:48:3
+		_gsxgw.S("<button")
+		_gsxgw.S(" type=\"button\"")
+		_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (dashboard{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string(_gsxv4))
+		_gsxgw.S("\"")
+		_gsxv5, _gsxerr := _gsxf0.IDTarget(ctx, (NotificationsList))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-target=\"")
+		_gsxgw.AttrValue(string(_gsxv5))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Refresh Notifications")
+		_gsxgw.S("</button>")
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
+
+// Dashboard page.
+
+type dashboard struct{}
+
+func (p dashboard) Page(props dashboardData) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:61:2
+		_gsxgw.Node(ctx, Html(HtmlProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:62:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(">")
+			_gsxgw.S("Dashboard")
+			_gsxgw.S("</h1>")
+//line pages.gsx:63:3
+			_gsxgw.S("<p")
+			_gsxgw.S(">")
+			_gsxgw.S("This example demonstrates the RenderTarget API with standalone function components.")
+			_gsxgw.S("</p>")
+//line pages.gsx:64:3
+			_gsxgw.S("<p")
+			_gsxgw.S(">")
+			_gsxgw.S("Click \"Refresh\" buttons to see HTMX partial updates — each widget loads only its own data!")
+			_gsxgw.S("</p>")
+//line pages.gsx:65:3
+			_gsxgw.S("<div")
+			_gsxgw.S(" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;\"")
+			_gsxgw.S(">")
+//line pages.gsx:66:4
+			_gsxgw.S("<div")
+			_gsxv6, _gsxerr := _gsxf0.ID(ctx, (UserStatsWidget))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" id=\"")
+			_gsxgw.AttrValue(string(_gsxv6))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+//line pages.gsx:67:5
+			_gsxgw.Node(ctx, UserStatsWidget(props.Stats))
+			_gsxgw.S("</div>")
+//line pages.gsx:69:4
+			_gsxgw.S("<div")
+			_gsxv7, _gsxerr := _gsxf0.ID(ctx, (SalesChartWidget))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" id=\"")
+			_gsxgw.AttrValue(string(_gsxv7))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+//line pages.gsx:70:5
+			_gsxgw.Node(ctx, SalesChartWidget(props.Sales))
+			_gsxgw.S("</div>")
+//line pages.gsx:72:4
+			_gsxgw.S("<div")
+			_gsxv8, _gsxerr := _gsxf0.ID(ctx, (NotificationsList))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" id=\"")
+			_gsxgw.AttrValue(string(_gsxv8))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+//line pages.gsx:73:5
+			_gsxgw.Node(ctx, NotificationsList(NotificationsListProps{Notifications: props.Notifications}))
+			_gsxgw.S("</div>")
+			_gsxgw.S("</div>")
+//line pages.gsx:76:3
+			_gsxgw.S("<div")
+			_gsxgw.S(" style=\"margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 4px;\"")
+			_gsxgw.S(">")
+//line pages.gsx:77:4
+			_gsxgw.S("<h4")
+			_gsxgw.S(">")
+			_gsxgw.S("How it works:")
+			_gsxgw.S("</h4>")
+//line pages.gsx:78:4
+			_gsxgw.S("<ul")
+			_gsxgw.S(">")
+//line pages.gsx:79:5
+			_gsxgw.S("<li")
+			_gsxgw.S(">")
+			_gsxgw.S("✅ ")
+//line pages.gsx:79:13
+			_gsxgw.S("<strong")
+			_gsxgw.S(">")
+			_gsxgw.S("Standalone functions")
+			_gsxgw.S("</strong>")
+			_gsxgw.S(" — UserStatsWidget, SalesChartWidget, NotificationsList are shared components")
+			_gsxgw.S("</li>")
+//line pages.gsx:80:5
+			_gsxgw.S("<li")
+			_gsxgw.S(">")
+			_gsxgw.S("✅ ")
+//line pages.gsx:80:13
+			_gsxgw.S("<strong")
+			_gsxgw.S(">")
+			_gsxgw.S("Conditional loading")
+			_gsxgw.S("</strong>")
+			_gsxgw.S(" — Props checks target.Is() and loads only needed data")
+			_gsxgw.S("</li>")
+//line pages.gsx:81:5
+			_gsxgw.S("<li")
+			_gsxgw.S(">")
+			_gsxgw.S("✅ ")
+//line pages.gsx:81:13
+			_gsxgw.S("<strong")
+			_gsxgw.S(">")
+			_gsxgw.S("RenderComponent (direct)")
+			_gsxgw.S("</strong>")
+			_gsxgw.S(" — construct the gsx component with its props struct and pass directly")
+			_gsxgw.S("</li>")
+//line pages.gsx:82:5
+			_gsxgw.S("<li")
+			_gsxgw.S(">")
+			_gsxgw.S("✅ ")
+//line pages.gsx:82:13
+			_gsxgw.S("<strong")
+			_gsxgw.S(">")
+			_gsxgw.S("No wrapper methods")
+			_gsxgw.S("</strong>")
+			_gsxgw.S(" — No need to create dashboard.UserStats() method!")
+			_gsxgw.S("</li>")
+//line pages.gsx:83:5
+			_gsxgw.S("<li")
+			_gsxgw.S(">")
+			_gsxgw.S("✅ ")
+//line pages.gsx:83:13
+			_gsxgw.S("<strong")
+			_gsxgw.S(">")
+			_gsxgw.S("HTMX integration")
+			_gsxgw.S("</strong>")
+			_gsxgw.S(" — HTMXRenderTarget automatically handles partial updates")
+			_gsxgw.S("</li>")
+			_gsxgw.S("</ul>")
+			_gsxgw.S("</div>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+// Html is the full-page layout.
+
+type HtmlProps struct {
+	Children gsx.Node
+}
+
+func Html(_gsxp HtmlProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		children := _gsxp.Children
+		_gsxgw := gsx.W(_gsxw)
+		_gsxgw.S("<!DOCTYPE html>")
+//line pages.gsx:92:2
+		_gsxgw.S("<html")
+		_gsxgw.S(" lang=\"en\"")
+		_gsxgw.S(">")
+//line pages.gsx:93:3
+		_gsxgw.S("<head")
+		_gsxgw.S(">")
+//line pages.gsx:94:4
+		_gsxgw.S("<link")
+		_gsxgw.S(" rel=\"stylesheet\"")
+		_gsxgw.S(" href=\"https://unpkg.com/missing.css@1.1.3\"")
+		_gsxgw.S("/>")
+//line pages.gsx:95:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+//line pages.gsx:96:4
+		_gsxgw.S("<title")
+		_gsxgw.S(">")
+		_gsxgw.S("RenderTarget API Example")
+		_gsxgw.S("</title>")
+//line pages.gsx:97:4
+		_gsxgw.S("<style")
+		_gsxgw.S(">")
+		_gsxgw.S(".widget{padding: 1rem;border: 1px solid #ddd;border-radius: 8px;background: white}.widget h3{margin-top: 0}.chart{display: flex;align-items: flex-end;height: 150px;margin: 1rem 0}")
+		_gsxgw.S("</style>")
+		_gsxgw.S("</head>")
+//line pages.gsx:115:3
+		_gsxgw.S("<body")
+		_gsxgw.S(">")
+//line pages.gsx:116:4
+		_gsxgw.S("<main")
+		_gsxgw.S(">")
+//line pages.gsx:117:5
+		_gsxgw.Node(ctx, children)
+		_gsxgw.S("</main>")
+		_gsxgw.S("</body>")
+		_gsxgw.S("</html>")
+		return _gsxgw.Err()
+	})
+}
+
+type ErrorPageProps struct {
+	Err error
+}
+
+func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		err := _gsxp.Err
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:124:2
+		_gsxgw.Node(ctx, Html(HtmlProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:125:3
+			_gsxgw.Node(ctx, ErrorComp(ErrorCompProps{Err: err}))
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+type ErrorCompProps struct {
+	Err error
+}
+
+func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		err := _gsxp.Err
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:130:2
+		_gsxgw.S("<h1")
+		_gsxgw.S(">")
+		_gsxgw.S("Error")
+		_gsxgw.S("</h1>")
+//line pages.gsx:131:2
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+//line pages.gsx:131:5
+		_gsxgw.Text(string(err.Error()))
+		_gsxgw.S("</p>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/htmx/cmd/gen/main.go b/examples/htmx/cmd/gen/main.go
new file mode 100644
index 0000000..a2a182a
--- /dev/null
+++ b/examples/htmx/cmd/gen/main.go
@@ -0,0 +1,21 @@
+// Command gen runs gsx codegen for the htmx example with the structpages
+// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
+// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
+// error-returning structpages.URLFor / ID / IDTarget calls.
+//
+// Generate with:  go run ./cmd/gen generate .
+package main
+
+import (
+	"github.com/gsxhq/gsx/gen"
+
+	"github.com/jackielii/structpages"
+)
+
+func main() {
+	gen.Main(
+		gen.WithFilter("url", structpages.URLFor),
+		gen.WithFilter("id", structpages.ID),
+		gen.WithFilter("target", structpages.IDTarget),
+	)
+}
diff --git a/examples/htmx/go.sum b/examples/htmx/go.sum
index c04a9f5..d06353a 100644
--- a/examples/htmx/go.sum
+++ b/examples/htmx/go.sum
@@ -31,6 +31,7 @@ github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOf
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
 github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
+github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
 github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
 golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
 golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
diff --git a/examples/htmx/pages.gsx b/examples/htmx/pages.gsx
index 88c31a2..a3c5989 100644
--- a/examples/htmx/pages.gsx
+++ b/examples/htmx/pages.gsx
@@ -2,8 +2,6 @@ package main
 
 import (
   "fmt"
-
-	"github.com/jackielii/structpages"
 )
 
 type index struct {
@@ -21,7 +19,7 @@ component (p index) Page()   { <Layout><p.Main/></Layout> }
 component (p index) Main() {
 	<h1>Welcome to the Index Page</h1>
 	<p>Navigate to the product, team, or contact pages using the links below:</p>
-  <a hx-get={ urlFor(ctx, throw{}) } hx-target="#main">Throw (Err)</a>
+  <a hx-get={ throw{} |> url } hx-target="#main">Throw (Err)</a>
 }
 
 component (p product) Page() { <Layout><p.Main/></Layout> }
@@ -58,10 +56,10 @@ component Layout() {
 			<header class="navbar">
 				<nav>
 					<ul role="list" hx-push-url="true" hx-target="#main">
-						<li><a hx-get={ urlFor(ctx, index{}) }>Home</a></li>
-						<li><a hx-get={ urlFor(ctx, product{}) }>Product</a></li>
-						<li><a hx-get={ urlFor(ctx, team{}) }>Team</a></li>
-						<li><a hx-get={ urlFor(ctx, contact{}) }>Contact</a></li>
+						<li><a hx-get={ index{} |> url }>Home</a></li>
+						<li><a hx-get={ product{} |> url }>Product</a></li>
+						<li><a hx-get={ team{} |> url }>Team</a></li>
+						<li><a hx-get={ contact{} |> url }>Contact</a></li>
 					</ul>
 				</nav>
 			</header>
@@ -76,5 +74,3 @@ component ErrorComp(err error) {
 	<h1>Error</h1>
 	<p>{ err.Error() }</p>
 }
-
-var urlFor = structpages.URLFor
diff --git a/examples/htmx/pages.x.go b/examples/htmx/pages.x.go
new file mode 100644
index 0000000..fc661a2
--- /dev/null
+++ b/examples/htmx/pages.x.go
@@ -0,0 +1,349 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package main
+
+import (
+	"context"
+	"fmt"
+	"io"
+
+	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
+)
+
+type index struct {
+	product `route:"/product Product"`
+	team    `route:"/team Team"`
+	contact `route:"/contact Contact"`
+	throw   `route:"/throw Throw"`
+}
+type product struct{}
+type team struct{}
+type contact struct{}
+type throw struct{}
+
+func (p index) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:18:32
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:18:40
+			_gsxgw.Node(ctx, p.Main())
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p index) Main() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:20:2
+		_gsxgw.S("<h1")
+		_gsxgw.S(">")
+		_gsxgw.S("Welcome to the Index Page")
+		_gsxgw.S("</h1>")
+//line pages.gsx:21:2
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+		_gsxgw.S("Navigate to the product, team, or contact pages using the links below:")
+		_gsxgw.S("</p>")
+//line pages.gsx:22:3
+		_gsxgw.S("<a")
+		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (throw{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string(_gsxv0))
+		_gsxgw.S("\"")
+		_gsxgw.S(" hx-target=\"#main\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Throw (Err)")
+		_gsxgw.S("</a>")
+		return _gsxgw.Err()
+	})
+}
+
+func (p product) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:25:32
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:25:40
+			_gsxgw.Node(ctx, p.Main())
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p product) Main() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:27:2
+		_gsxgw.S("<h1")
+		_gsxgw.S(">")
+		_gsxgw.S("Product Page")
+		_gsxgw.S("</h1>")
+//line pages.gsx:28:2
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+		_gsxgw.S("This is the product page.")
+		_gsxgw.S("</p>")
+		return _gsxgw.Err()
+	})
+}
+
+func (p team) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:31:29
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:31:37
+			_gsxgw.Node(ctx, p.Main())
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p team) Main() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:33:2
+		_gsxgw.S("<h1")
+		_gsxgw.S(">")
+		_gsxgw.S("Team Page")
+		_gsxgw.S("</h1>")
+//line pages.gsx:34:2
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+		_gsxgw.S("This is the team page.")
+		_gsxgw.S("</p>")
+		return _gsxgw.Err()
+	})
+}
+
+func (p contact) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:37:32
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:37:40
+			_gsxgw.Node(ctx, p.Main())
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p contact) Main() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:39:2
+		_gsxgw.S("<h1")
+		_gsxgw.S(">")
+		_gsxgw.S("Contact Page")
+		_gsxgw.S("</h1>")
+//line pages.gsx:40:2
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+		_gsxgw.S("This is the contact page.")
+		_gsxgw.S("</p>")
+		return _gsxgw.Err()
+	})
+}
+
+func errFunc() (string, error) { return "", fmt.Errorf("this is an error") }
+
+func (p throw) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:44:30
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+//line pages.gsx:44:33
+		_gsxv1, _gsxerr := errFunc()
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.Text(string(_gsxv1))
+		_gsxgw.S("</p>")
+		return _gsxgw.Err()
+	})
+}
+
+type LayoutProps struct {
+	Children gsx.Node
+}
+
+func Layout(_gsxp LayoutProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		children := _gsxp.Children
+		_gsxgw := gsx.W(_gsxw)
+		_gsxgw.S("<!DOCTYPE html>")
+//line pages.gsx:49:2
+		_gsxgw.S("<html")
+		_gsxgw.S(" lang=\"en\"")
+		_gsxgw.S(">")
+//line pages.gsx:50:3
+		_gsxgw.S("<head")
+		_gsxgw.S(">")
+//line pages.gsx:51:4
+		_gsxgw.S("<link")
+		_gsxgw.S(" rel=\"stylesheet\"")
+		_gsxgw.S(" href=\"https://unpkg.com/missing.css@1.1.3\"")
+		_gsxgw.S("/>")
+//line pages.gsx:52:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+//line pages.gsx:53:4
+		_gsxgw.S("<title")
+		_gsxgw.S(">")
+		_gsxgw.S("HTMX Example")
+		_gsxgw.S("</title>")
+		_gsxgw.S("</head>")
+//line pages.gsx:55:3
+		_gsxgw.S("<body")
+		_gsxgw.S(">")
+//line pages.gsx:56:4
+		_gsxgw.S("<header")
+		_gsxgw.S(" class=\"navbar\"")
+		_gsxgw.S(">")
+//line pages.gsx:57:5
+		_gsxgw.S("<nav")
+		_gsxgw.S(">")
+//line pages.gsx:58:6
+		_gsxgw.S("<ul")
+		_gsxgw.S(" role=\"list\"")
+		_gsxgw.S(" hx-push-url=\"true\"")
+		_gsxgw.S(" hx-target=\"#main\"")
+		_gsxgw.S(">")
+//line pages.gsx:59:7
+		_gsxgw.S("<li")
+		_gsxgw.S(">")
+//line pages.gsx:59:11
+		_gsxgw.S("<a")
+		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (index{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string(_gsxv2))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Home")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</li>")
+//line pages.gsx:60:7
+		_gsxgw.S("<li")
+		_gsxgw.S(">")
+//line pages.gsx:60:11
+		_gsxgw.S("<a")
+		_gsxv3, _gsxerr := _gsxf0.URLFor(ctx, (product{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string(_gsxv3))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Product")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</li>")
+//line pages.gsx:61:7
+		_gsxgw.S("<li")
+		_gsxgw.S(">")
+//line pages.gsx:61:11
+		_gsxgw.S("<a")
+		_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (team{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string(_gsxv4))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Team")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</li>")
+//line pages.gsx:62:7
+		_gsxgw.S("<li")
+		_gsxgw.S(">")
+//line pages.gsx:62:11
+		_gsxgw.S("<a")
+		_gsxv5, _gsxerr := _gsxf0.URLFor(ctx, (contact{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string(_gsxv5))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Contact")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</li>")
+		_gsxgw.S("</ul>")
+		_gsxgw.S("</nav>")
+		_gsxgw.S("</header>")
+//line pages.gsx:66:4
+		_gsxgw.S("<main")
+		_gsxgw.S(" id=\"main\"")
+		_gsxgw.S(">")
+//line pages.gsx:66:20
+		_gsxgw.Node(ctx, children)
+		_gsxgw.S("</main>")
+		_gsxgw.S("</body>")
+		_gsxgw.S("</html>")
+		return _gsxgw.Err()
+	})
+}
+
+type ErrorPageProps struct {
+	Err error
+}
+
+func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		err := _gsxp.Err
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:71:34
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:71:42
+			_gsxgw.Node(ctx, ErrorComp(ErrorCompProps{Err: err}))
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+type ErrorCompProps struct {
+	Err error
+}
+
+func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		err := _gsxp.Err
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:74:2
+		_gsxgw.S("<h1")
+		_gsxgw.S(">")
+		_gsxgw.S("Error")
+		_gsxgw.S("</h1>")
+//line pages.gsx:75:2
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+//line pages.gsx:75:5
+		_gsxgw.Text(string(err.Error()))
+		_gsxgw.S("</p>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/lint-misuse/cmd/gen/main.go b/examples/lint-misuse/cmd/gen/main.go
new file mode 100644
index 0000000..ff28a02
--- /dev/null
+++ b/examples/lint-misuse/cmd/gen/main.go
@@ -0,0 +1,21 @@
+// Command gen runs gsx codegen for the lint-misuse example with the structpages
+// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
+// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
+// error-returning structpages.URLFor / ID / IDTarget calls.
+//
+// Generate with:  go run ./cmd/gen generate .
+package main
+
+import (
+	"github.com/gsxhq/gsx/gen"
+
+	"github.com/jackielii/structpages"
+)
+
+func main() {
+	gen.Main(
+		gen.WithFilter("url", structpages.URLFor),
+		gen.WithFilter("id", structpages.ID),
+		gen.WithFilter("target", structpages.IDTarget),
+	)
+}
diff --git a/examples/lint-misuse/go.mod b/examples/lint-misuse/go.mod
index f9cfd8b..c6ca70c 100644
--- a/examples/lint-misuse/go.mod
+++ b/examples/lint-misuse/go.mod
@@ -4,6 +4,13 @@ go 1.26.1
 
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
+require (
+	github.com/tdewolff/parse/v2 v2.8.13 // indirect
+	golang.org/x/mod v0.37.0 // indirect
+	golang.org/x/sync v0.21.0 // indirect
+	golang.org/x/tools v0.46.0 // indirect
+)
+
 require (
 	github.com/gsxhq/gsx v0.0.0
 	github.com/jackielii/ctxkey v1.0.1 // indirect
diff --git a/examples/lint-misuse/go.sum b/examples/lint-misuse/go.sum
index 2108c87..1fdd546 100644
--- a/examples/lint-misuse/go.sum
+++ b/examples/lint-misuse/go.sum
@@ -2,3 +2,13 @@ github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/jackielii/ctxkey v1.0.1 h1:CcgbR+fQbrzZJWxI/7Ec4EhzUbmTU1sfI1gV7MAgjIg=
 github.com/jackielii/ctxkey v1.0.1/go.mod h1:fo4HOwrvSnc3n8o5qZ5L+FVcSyQn+d67CCnlEbH24uc=
+github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
+github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
+github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
+github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
+golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
+golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
+golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
+golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
+golang.org/x/tools v0.46.0 h1:7jTurBkPZu4moS/Uy4OQT1M+QBlsj3wejyZwsT8Z7rk=
+golang.org/x/tools v0.46.0/go.mod h1:FrD85F8l+NWL+9XWBSyVSHO6Ne4jutsfIFba7AWQ5Ys=
diff --git a/examples/lint-misuse/pages.gsx b/examples/lint-misuse/pages.gsx
index 3cfa58f..e4d28c1 100644
--- a/examples/lint-misuse/pages.gsx
+++ b/examples/lint-misuse/pages.gsx
@@ -1,11 +1,8 @@
 package main
 
 import (
-	"context"
 	"fmt"
 	"strconv"
-
-	"github.com/jackielii/structpages"
 )
 
 // BadLinks mirrors the templ original — it deliberately uses hard-coded
@@ -29,10 +26,3 @@ component BadLinks(id int, name string) {
 	<form action={ "/submit" }>Bad action</form>
 	<a href="https://example.com/external">External (allowed)</a>
 }
-
-// urlFor is the app-level convenience wrapper used by gsx templates
-// (avoids repeating the package qualifier; returns (string, error) so
-// gsx auto-unwraps the error at the call site in URL-context attrs).
-func urlFor(ctx context.Context, page any, args ...any) (string, error) {
-	return structpages.URLFor(ctx, page, args...)
-}
diff --git a/examples/lint-misuse/pages.x.go b/examples/lint-misuse/pages.x.go
new file mode 100644
index 0000000..890edd8
--- /dev/null
+++ b/examples/lint-misuse/pages.x.go
@@ -0,0 +1,91 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package main
+
+import (
+	"context"
+	"fmt"
+	"io"
+	"strconv"
+
+	"github.com/gsxhq/gsx"
+)
+
+// BadLinks mirrors the templ original — it deliberately uses hard-coded
+// internal URLs so the structpages-lint [url-attr] rule has targets to flag.
+// In gsx the component uses inline params just like the templ version.
+//
+// NOTE ON gsx AUTO-ESCAPING: gsx escapes URL-context attributes
+// (href, hx-get, action, …) by context. That means a dynamically-
+// constructed javascript: or data: URL would be neutralised, preventing
+// XSS via URL sinks. However, the [url-attr] lint rule catches a
+// different problem — routing-correctness: hard-coded path strings that
+// bypass structpages.URLFor break when routes are renamed. That class of
+// bug is orthogonal to XSS escaping, so gsx's auto-escaping does NOT
+// make these findings go away. The lint still has value in gsx projects.
+
+type BadLinksProps struct {
+	Id   int
+	Name string
+}
+
+func BadLinks(_gsxp BadLinksProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		id := _gsxp.Id
+		name := _gsxp.Name
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:21:2
+		_gsxgw.S("<a")
+		_gsxgw.S(" href=\"/login\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Hard-coded internal")
+		_gsxgw.S("</a>")
+//line pages.gsx:22:2
+		_gsxgw.S("<a")
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string("/" + "admin"))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Expression literal")
+		_gsxgw.S("</a>")
+//line pages.gsx:23:2
+		_gsxgw.S("<a")
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string("/items/" + strconv.Itoa(id)))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Concat")
+		_gsxgw.S("</a>")
+//line pages.gsx:24:2
+		_gsxgw.S("<a")
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(fmt.Sprintf("/users/%s", name)))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Sprintf")
+		_gsxgw.S("</a>")
+//line pages.gsx:25:2
+		_gsxgw.S("<a")
+		_gsxgw.S(" hx-get=\"")
+		_gsxgw.URL(string("/api/items"))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Bad hx-get")
+		_gsxgw.S("</a>")
+//line pages.gsx:26:2
+		_gsxgw.S("<form")
+		_gsxgw.S(" action=\"")
+		_gsxgw.URL(string("/submit"))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Bad action")
+		_gsxgw.S("</form>")
+//line pages.gsx:27:2
+		_gsxgw.S("<a")
+		_gsxgw.S(" href=\"https://example.com/external\"")
+		_gsxgw.S(">")
+		_gsxgw.S("External (allowed)")
+		_gsxgw.S("</a>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/simple/cmd/gen/main.go b/examples/simple/cmd/gen/main.go
new file mode 100644
index 0000000..97fe469
--- /dev/null
+++ b/examples/simple/cmd/gen/main.go
@@ -0,0 +1,21 @@
+// Command gen runs gsx codegen for the simple example with the structpages
+// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
+// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
+// error-returning structpages.URLFor / ID / IDTarget calls.
+//
+// Generate with:  go run ./cmd/gen generate .
+package main
+
+import (
+	"github.com/gsxhq/gsx/gen"
+
+	"github.com/jackielii/structpages"
+)
+
+func main() {
+	gen.Main(
+		gen.WithFilter("url", structpages.URLFor),
+		gen.WithFilter("id", structpages.ID),
+		gen.WithFilter("target", structpages.IDTarget),
+	)
+}
diff --git a/examples/simple/go.mod b/examples/simple/go.mod
index 688aa22..37fca37 100644
--- a/examples/simple/go.mod
+++ b/examples/simple/go.mod
@@ -4,7 +4,10 @@ go 1.26.1
 
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
-require github.com/a-h/templ v0.3.1020 // indirect
+require (
+	github.com/a-h/templ v0.3.1020 // indirect
+	github.com/tdewolff/parse/v2 v2.8.13 // indirect
+)
 
 require (
 	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
diff --git a/examples/simple/go.sum b/examples/simple/go.sum
index df0b1bd..d06353a 100644
--- a/examples/simple/go.sum
+++ b/examples/simple/go.sum
@@ -29,6 +29,10 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
+github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
+github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
+github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
 golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
 golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
 golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
diff --git a/examples/simple/pages.gsx b/examples/simple/pages.gsx
index aaa6b6f..69ff909 100644
--- a/examples/simple/pages.gsx
+++ b/examples/simple/pages.gsx
@@ -1,7 +1,5 @@
 package main
 
-import "github.com/jackielii/structpages"
-
 // Page structs + route tags are plain Go — pass through unchanged.
 type index struct {
 	product `route:"/product Product"`
@@ -51,10 +49,10 @@ component Layout() {
 			<header class="navbar">
 				<nav>
 					<ul role="list">
-						<li><a href={ urlFor(ctx, index{}) }>Home</a></li>
-						<li><a href={ urlFor(ctx, product{}) }>Product</a></li>
-						<li><a href={ urlFor(ctx, team{}) }>Team</a></li>
-						<li><a href={ urlFor(ctx, contact{}) }>Contact</a></li>
+						<li><a href={ index{} |> url }>Home</a></li>
+						<li><a href={ product{} |> url }>Product</a></li>
+						<li><a href={ team{} |> url }>Team</a></li>
+						<li><a href={ contact{} |> url }>Contact</a></li>
 					</ul>
 				</nav>
 			</header>
@@ -62,5 +60,3 @@ component Layout() {
 		</body>
 	</html>
 }
-
-var urlFor = structpages.URLFor
diff --git a/examples/simple/pages.x.go b/examples/simple/pages.x.go
new file mode 100644
index 0000000..5f05b95
--- /dev/null
+++ b/examples/simple/pages.x.go
@@ -0,0 +1,229 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package main
+
+import (
+	"context"
+	"io"
+
+	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
+)
+
+// Page structs + route tags are plain Go — pass through unchanged.
+type index struct {
+	product `route:"/product Product"`
+	team    `route:"/team Team"`
+	contact `route:"/contact Contact"`
+}
+type product struct{}
+type team struct{}
+type contact struct{}
+
+func (p index) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:14:2
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:15:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(">")
+			_gsxgw.S("Welcome to the Index Page")
+			_gsxgw.S("</h1>")
+//line pages.gsx:16:3
+			_gsxgw.S("<p")
+			_gsxgw.S(">")
+			_gsxgw.S("Navigate to the product, team, or contact pages using the links below:")
+			_gsxgw.S("</p>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p product) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:21:2
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:22:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(">")
+			_gsxgw.S("Product Page")
+			_gsxgw.S("</h1>")
+//line pages.gsx:23:3
+			_gsxgw.S("<p")
+			_gsxgw.S(">")
+			_gsxgw.S("This is the product page.")
+			_gsxgw.S("</p>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p team) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:28:2
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:29:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(">")
+			_gsxgw.S("Team Page")
+			_gsxgw.S("</h1>")
+//line pages.gsx:30:3
+			_gsxgw.S("<p")
+			_gsxgw.S(">")
+			_gsxgw.S("This is the team page.")
+			_gsxgw.S("</p>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p contact) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:35:2
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:36:3
+			_gsxgw.S("<h1")
+			_gsxgw.S(">")
+			_gsxgw.S("Contact Page")
+			_gsxgw.S("</h1>")
+//line pages.gsx:37:3
+			_gsxgw.S("<p")
+			_gsxgw.S(">")
+			_gsxgw.S("This is the contact page.")
+			_gsxgw.S("</p>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+type LayoutProps struct {
+	Children gsx.Node
+}
+
+func Layout(_gsxp LayoutProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		children := _gsxp.Children
+		_gsxgw := gsx.W(_gsxw)
+		_gsxgw.S("<!DOCTYPE html>")
+//line pages.gsx:43:2
+		_gsxgw.S("<html")
+		_gsxgw.S(" lang=\"en\"")
+		_gsxgw.S(">")
+//line pages.gsx:44:3
+		_gsxgw.S("<head")
+		_gsxgw.S(">")
+//line pages.gsx:45:4
+		_gsxgw.S("<link")
+		_gsxgw.S(" rel=\"stylesheet\"")
+		_gsxgw.S(" href=\"https://unpkg.com/missing.css@1.1.3\"")
+		_gsxgw.S("/>")
+//line pages.gsx:46:4
+		_gsxgw.S("<title")
+		_gsxgw.S(">")
+		_gsxgw.S("Simple Example")
+		_gsxgw.S("</title>")
+		_gsxgw.S("</head>")
+//line pages.gsx:48:3
+		_gsxgw.S("<body")
+		_gsxgw.S(">")
+//line pages.gsx:49:4
+		_gsxgw.S("<header")
+		_gsxgw.S(" class=\"navbar\"")
+		_gsxgw.S(">")
+//line pages.gsx:50:5
+		_gsxgw.S("<nav")
+		_gsxgw.S(">")
+//line pages.gsx:51:6
+		_gsxgw.S("<ul")
+		_gsxgw.S(" role=\"list\"")
+		_gsxgw.S(">")
+//line pages.gsx:52:7
+		_gsxgw.S("<li")
+		_gsxgw.S(">")
+//line pages.gsx:52:11
+		_gsxgw.S("<a")
+		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (index{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv0))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Home")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</li>")
+//line pages.gsx:53:7
+		_gsxgw.S("<li")
+		_gsxgw.S(">")
+//line pages.gsx:53:11
+		_gsxgw.S("<a")
+		_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (product{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv1))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Product")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</li>")
+//line pages.gsx:54:7
+		_gsxgw.S("<li")
+		_gsxgw.S(">")
+//line pages.gsx:54:11
+		_gsxgw.S("<a")
+		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (team{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv2))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Team")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</li>")
+//line pages.gsx:55:7
+		_gsxgw.S("<li")
+		_gsxgw.S(">")
+//line pages.gsx:55:11
+		_gsxgw.S("<a")
+		_gsxv3, _gsxerr := _gsxf0.URLFor(ctx, (contact{}))
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv3))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Contact")
+		_gsxgw.S("</a>")
+		_gsxgw.S("</li>")
+		_gsxgw.S("</ul>")
+		_gsxgw.S("</nav>")
+		_gsxgw.S("</header>")
+//line pages.gsx:59:4
+		_gsxgw.S("<main")
+		_gsxgw.S(">")
+//line pages.gsx:59:10
+		_gsxgw.Node(ctx, children)
+		_gsxgw.S("</main>")
+		_gsxgw.S("</body>")
+		_gsxgw.S("</html>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/todo/cmd/gen/main.go b/examples/todo/cmd/gen/main.go
new file mode 100644
index 0000000..3696a3a
--- /dev/null
+++ b/examples/todo/cmd/gen/main.go
@@ -0,0 +1,21 @@
+// Command gen runs gsx codegen for the todo example with the structpages
+// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
+// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
+// error-returning structpages.URLFor / ID / IDTarget calls.
+//
+// Generate with:  go run ./cmd/gen generate .
+package main
+
+import (
+	"github.com/gsxhq/gsx/gen"
+
+	"github.com/jackielii/structpages"
+)
+
+func main() {
+	gen.Main(
+		gen.WithFilter("url", structpages.URLFor),
+		gen.WithFilter("id", structpages.ID),
+		gen.WithFilter("target", structpages.IDTarget),
+	)
+}
diff --git a/examples/todo/go.mod b/examples/todo/go.mod
index 7ccebcf..a2b4ba8 100644
--- a/examples/todo/go.mod
+++ b/examples/todo/go.mod
@@ -4,7 +4,10 @@ go 1.26.1
 
 require github.com/jackielii/structpages v0.0.0
 
-require github.com/a-h/templ v0.3.1020 // indirect
+require (
+	github.com/a-h/templ v0.3.1020 // indirect
+	github.com/tdewolff/parse/v2 v2.8.13 // indirect
+)
 
 require (
 	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
diff --git a/examples/todo/go.sum b/examples/todo/go.sum
index df0b1bd..d06353a 100644
--- a/examples/todo/go.sum
+++ b/examples/todo/go.sum
@@ -29,6 +29,10 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
+github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
+github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
+github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
 golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
 golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
 golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
diff --git a/examples/todo/pages.gsx b/examples/todo/pages.gsx
index 49e0fc2..4f7294e 100644
--- a/examples/todo/pages.gsx
+++ b/examples/todo/pages.gsx
@@ -18,8 +18,8 @@ component (p index) Page() {
 		<div class="todo-app">
 			<h1>TODO App</h1>
 			<form
-				hx-post={ urlFor(ctx, add{}) }
-				hx-target={ idTarget(ctx, index.TodoList) }
+				hx-post={ add{} |> url }
+				hx-target={ index.TodoList |> target }
 				hx-swap="innerHTML"
 				hx-on:htmx:after-request="this.reset()"
 			>
@@ -33,7 +33,7 @@ component (p index) Page() {
 					<button type="submit">Add Todo</button>
 				</div>
 			</form>
-			<div id={ idFor(ctx, index.TodoList) }>
+			<div id={ index.TodoList |> id }>
 				<p.TodoList/>
 			</div>
 		</div>
@@ -90,16 +90,16 @@ component TodoList() {
 					<input
 						type="checkbox"
 						checked={todo.Completed}
-						hx-post={ urlFor(ctx, toggle{}, "id", todo.ID) }
-						hx-target={ idTarget(ctx, index.TodoList) }
+						hx-post={ toggle{} |> url("id", todo.ID) }
+						hx-target={ index.TodoList |> target }
 						hx-swap="innerHTML"
 					/>
 					<span class="todo-text">{ todo.Text }</span>
 				</div>
 				<button
 					class="delete-btn"
-					hx-delete={ urlFor(ctx, deleteTodo{}, "id", todo.ID) }
-					hx-target={ idTarget(ctx, index.TodoList) }
+					hx-delete={ deleteTodo{} |> url("id", todo.ID) }
+					hx-target={ index.TodoList |> target }
 					hx-swap="innerHTML"
 					hx-confirm="Are you sure you want to delete this todo?"
 				>
@@ -232,7 +232,3 @@ component ErrorComp(err error) {
 	<h1>Error</h1>
 	<p>{ err.Error() }</p>
 }
-
-var urlFor = structpages.URLFor
-var idFor = structpages.ID
-var idTarget = structpages.IDTarget
diff --git a/examples/todo/pages.x.go b/examples/todo/pages.x.go
new file mode 100644
index 0000000..f7271ee
--- /dev/null
+++ b/examples/todo/pages.x.go
@@ -0,0 +1,320 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package main
+
+import (
+	"context"
+	"io"
+	"net/http"
+	"strconv"
+
+	"github.com/gsxhq/gsx"
+	"github.com/jackielii/structpages"
+	_gsxf0 "github.com/jackielii/structpages"
+)
+
+type index struct {
+	add        `route:"POST /add AddTodo" form:"text"`
+	toggle     `route:"POST /toggle/{id} ToggleTodo"`
+	deleteTodo `route:"DELETE /delete/{id} DeleteTodo"`
+}
+
+func (p index) Page() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:17:2
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:18:3
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"todo-app\"")
+			_gsxgw.S(">")
+//line pages.gsx:19:4
+			_gsxgw.S("<h1")
+			_gsxgw.S(">")
+			_gsxgw.S("TODO App")
+			_gsxgw.S("</h1>")
+//line pages.gsx:20:4
+			_gsxgw.S("<form")
+			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (add{}))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-post=\"")
+			_gsxgw.URL(string(_gsxv0))
+			_gsxgw.S("\"")
+			_gsxv1, _gsxerr := _gsxf0.IDTarget(ctx, (index.TodoList))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-target=\"")
+			_gsxgw.AttrValue(string(_gsxv1))
+			_gsxgw.S("\"")
+			_gsxgw.S(" hx-swap=\"innerHTML\"")
+			_gsxgw.S(" hx-on:htmx:after-request=\"this.reset()\"")
+			_gsxgw.S(">")
+//line pages.gsx:26:5
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"form-group\"")
+			_gsxgw.S(">")
+//line pages.gsx:27:6
+			_gsxgw.S("<input")
+			_gsxgw.S(" type=\"text\"")
+			_gsxgw.S(" name=\"text\"")
+			_gsxgw.S(" placeholder=\"Add a new todo...\"")
+			_gsxgw.BoolAttr("required", true)
+			_gsxgw.S("/>")
+//line pages.gsx:33:6
+			_gsxgw.S("<button")
+			_gsxgw.S(" type=\"submit\"")
+			_gsxgw.S(">")
+			_gsxgw.S("Add Todo")
+			_gsxgw.S("</button>")
+			_gsxgw.S("</div>")
+			_gsxgw.S("</form>")
+//line pages.gsx:36:4
+			_gsxgw.S("<div")
+			_gsxv2, _gsxerr := _gsxf0.ID(ctx, (index.TodoList))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" id=\"")
+			_gsxgw.AttrValue(string(_gsxv2))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+//line pages.gsx:37:5
+			_gsxgw.Node(ctx, p.TodoList())
+			_gsxgw.S("</div>")
+			_gsxgw.S("</div>")
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+func (p index) TodoList() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:44:2
+		_gsxgw.Node(ctx, TodoList())
+		return _gsxgw.Err()
+	})
+}
+
+type add struct{}
+
+func (a add) ServeHTTP(w http.ResponseWriter, r *http.Request) error {
+	if r.Method == "POST" {
+		text := r.FormValue("text")
+		if text != "" {
+			addTodo(text)
+		}
+	}
+	return structpages.RenderComponent(index.TodoList)
+}
+
+type toggle struct{}
+
+func (t toggle) ServeHTTP(w http.ResponseWriter, r *http.Request) error {
+	id, err := strconv.Atoi(r.PathValue("id"))
+	if err != nil {
+		return err
+	}
+	if r.Method == "POST" {
+		toggleTodo(id)
+	}
+	return structpages.RenderComponent(index.TodoList)
+}
+
+type deleteTodo struct{}
+
+func (d deleteTodo) ServeHTTP(w http.ResponseWriter, r *http.Request) error {
+	id, err := strconv.Atoi(r.PathValue("id"))
+	if err != nil {
+		return err
+	}
+	if r.Method == "DELETE" {
+		removeTodo(id)
+	}
+	return structpages.RenderComponent(index.TodoList)
+}
+
+func TodoList() gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:86:2
+		_gsxgw.S("<ul")
+		_gsxgw.S(" class=\"todo-list\"")
+		_gsxgw.S(">")
+//line pages.gsx:87:3
+		for _, todo := range getTodos() {
+//line pages.gsx:88:4
+			_gsxgw.S("<li")
+			_gsxgw.S(" class=\"")
+			_gsxgw.Class(gsx.Class("todo-item"), gsx.ClassIf("completed", todo.Completed))
+			_gsxgw.S("\"")
+			_gsxgw.S(">")
+//line pages.gsx:89:5
+			_gsxgw.S("<div")
+			_gsxgw.S(" class=\"todo-content\"")
+			_gsxgw.S(">")
+//line pages.gsx:90:6
+			_gsxgw.S("<input")
+			_gsxgw.S(" type=\"checkbox\"")
+			_gsxgw.BoolAttr("checked", bool(todo.Completed))
+			_gsxv3, _gsxerr := _gsxf0.URLFor(ctx, (toggle{}), "id", todo.ID)
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-post=\"")
+			_gsxgw.URL(string(_gsxv3))
+			_gsxgw.S("\"")
+			_gsxv4, _gsxerr := _gsxf0.IDTarget(ctx, (index.TodoList))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-target=\"")
+			_gsxgw.AttrValue(string(_gsxv4))
+			_gsxgw.S("\"")
+			_gsxgw.S(" hx-swap=\"innerHTML\"")
+			_gsxgw.S("/>")
+//line pages.gsx:97:6
+			_gsxgw.S("<span")
+			_gsxgw.S(" class=\"todo-text\"")
+			_gsxgw.S(">")
+//line pages.gsx:97:30
+			_gsxgw.Text(string(todo.Text))
+			_gsxgw.S("</span>")
+			_gsxgw.S("</div>")
+//line pages.gsx:99:5
+			_gsxgw.S("<button")
+			_gsxgw.S(" class=\"delete-btn\"")
+			_gsxv5, _gsxerr := _gsxf0.URLFor(ctx, (deleteTodo{}), "id", todo.ID)
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-delete=\"")
+			_gsxgw.URL(string(_gsxv5))
+			_gsxgw.S("\"")
+			_gsxv6, _gsxerr := _gsxf0.IDTarget(ctx, (index.TodoList))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" hx-target=\"")
+			_gsxgw.AttrValue(string(_gsxv6))
+			_gsxgw.S("\"")
+			_gsxgw.S(" hx-swap=\"innerHTML\"")
+			_gsxgw.S(" hx-confirm=\"Are you sure you want to delete this todo?\"")
+			_gsxgw.S(">")
+			_gsxgw.S("×")
+			_gsxgw.S("</button>")
+			_gsxgw.S("</li>")
+		}
+		_gsxgw.S("</ul>")
+//line pages.gsx:111:2
+		if len(getTodos()) == 0 {
+//line pages.gsx:112:3
+			_gsxgw.S("<p")
+			_gsxgw.S(" class=\"empty-state\"")
+			_gsxgw.S(">")
+			_gsxgw.S("No todos yet. Add one above!")
+			_gsxgw.S("</p>")
+		}
+		return _gsxgw.Err()
+	})
+}
+
+type LayoutProps struct {
+	Children gsx.Node
+}
+
+func Layout(_gsxp LayoutProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		children := _gsxp.Children
+		_gsxgw := gsx.W(_gsxw)
+		_gsxgw.S("<!DOCTYPE html>")
+//line pages.gsx:118:2
+		_gsxgw.S("<html")
+		_gsxgw.S(" lang=\"en\"")
+		_gsxgw.S(">")
+//line pages.gsx:119:3
+		_gsxgw.S("<head")
+		_gsxgw.S(">")
+//line pages.gsx:120:4
+		_gsxgw.S("<link")
+		_gsxgw.S(" rel=\"stylesheet\"")
+		_gsxgw.S(" href=\"https://unpkg.com/missing.css@1.1.3\"")
+		_gsxgw.S("/>")
+//line pages.gsx:121:4
+		_gsxgw.S("<script")
+		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
+		_gsxgw.S(">")
+		_gsxgw.S("</script>")
+//line pages.gsx:122:4
+		_gsxgw.S("<title")
+		_gsxgw.S(">")
+		_gsxgw.S("TODO App")
+		_gsxgw.S("</title>")
+//line pages.gsx:123:4
+		_gsxgw.S("<style")
+		_gsxgw.S(">")
+		_gsxgw.S(".todo-app{max-width: 600px;margin: 2rem auto;padding: 2rem}.form-group{display: flex;gap: 0.5rem;margin-bottom: 2rem}.form-group input{flex: 1;padding: 0.75rem;border: 1px solid #ddd;border-radius: 4px}.form-group button{padding: 0.75rem 1.5rem;background: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer}.form-group button:hover{background: #0056b3}.todo-list{list-style: none;padding: 0}.todo-item{display: flex;align-items: center;justify-content: space-between;padding: 1rem;border: 1px solid #eee;border-radius: 4px;margin-bottom: 0.5rem;background: white}.todo-item.completed{opacity: 0.6}.todo-item.completed .todo-text{text-decoration: line-through}.todo-content{display: flex;align-items: center;gap: 0.75rem;flex: 1}.todo-text{flex: 1}.delete-btn{background: #dc3545;color: white;border: none;border-radius: 50%;width: 2rem;height: 2rem;cursor: pointer;font-size: 1.2rem;display: flex;align-items: center;justify-content: center}.delete-btn:hover{background: #c82333}.empty-state{text-align: center;color: #666;font-style: italic;padding: 2rem}")
+		_gsxgw.S("</style>")
+		_gsxgw.S("</head>")
+//line pages.gsx:217:3
+		_gsxgw.S("<body")
+		_gsxgw.S(">")
+//line pages.gsx:218:4
+		_gsxgw.S("<main")
+		_gsxgw.S(" id=\"content\"")
+		_gsxgw.S(">")
+//line pages.gsx:219:5
+		_gsxgw.Node(ctx, children)
+		_gsxgw.S("</main>")
+		_gsxgw.S("</body>")
+		_gsxgw.S("</html>")
+		return _gsxgw.Err()
+	})
+}
+
+type ErrorPageProps struct {
+	Err error
+}
+
+func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		err := _gsxp.Err
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:226:2
+		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+			_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:227:3
+			_gsxgw.Node(ctx, ErrorComp(ErrorCompProps{Err: err}))
+			return _gsxgw.Err()
+		})}))
+		return _gsxgw.Err()
+	})
+}
+
+type ErrorCompProps struct {
+	Err error
+}
+
+func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		err := _gsxp.Err
+		_gsxgw := gsx.W(_gsxw)
+//line pages.gsx:232:2
+		_gsxgw.S("<h1")
+		_gsxgw.S(">")
+		_gsxgw.S("Error")
+		_gsxgw.S("</h1>")
+//line pages.gsx:233:2
+		_gsxgw.S("<p")
+		_gsxgw.S(">")
+//line pages.gsx:233:5
+		_gsxgw.Text(string(err.Error()))
+		_gsxgw.S("</p>")
+		return _gsxgw.Err()
+	})
+}

From 5a5f6ec1093ee60a80e5780de2ae5ce9494994e0 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Thu, 25 Jun 2026 17:37:26 +0100
Subject: [PATCH 03/13] examples/blog: pipeline the components.URL template
 calls (= { X |> url })

Claude-Session: https://claude.ai/code/session_01AVv1VYM5pjrSTVfYtBDzBG
---
 examples/blog/admin/components.gsx  |   6 +-
 examples/blog/admin/components.x.go |   8 +-
 examples/blog/admin/posts.gsx       |   4 +-
 examples/blog/admin/posts.x.go      |   5 +-
 examples/blog/admin/users.gsx       |   4 +-
 examples/blog/admin/users.x.go      |   5 +-
 examples/blog/blog/components.gsx   |  45 ++++++++
 examples/blog/blog/components.x.go  | 160 ++++++++++++++++++++++++++++
 examples/blog/blog/home.gsx         |   2 +-
 examples/blog/blog/home.x.go        |   3 +-
 examples/blog/blog/post.gsx         |   2 +-
 examples/blog/blog/post.x.go        |   4 +-
 12 files changed, 228 insertions(+), 20 deletions(-)
 create mode 100644 examples/blog/blog/components.gsx
 create mode 100644 examples/blog/blog/components.x.go

diff --git a/examples/blog/admin/components.gsx b/examples/blog/admin/components.gsx
index 48bb963..5f31138 100644
--- a/examples/blog/admin/components.gsx
+++ b/examples/blog/admin/components.gsx
@@ -36,7 +36,7 @@ component RecentPostsCard(posts []store.Post) {
 				} }
 				{ for _, p := range posts {
 					<li class="flex items-center justify-between py-2">
-						<a class="hover:underline" href={ components.URL(ctx, postEditPage{}, "id", p.ID) }>
+						<a class="hover:underline" href={ postEditPage{} |> url("id", p.ID) }>
 							{p.Title}
 						</a>
 						{ if p.Published {
@@ -66,7 +66,7 @@ component PostsTable(posts []store.Post) {
 				{ for _, p := range posts {
 					<tr class="border-t">
 						<td class="px-3 py-2 font-medium">
-							<a class="hover:underline" href={ components.URL(ctx, postEditPage{}, "id", p.ID) }>{p.Title}</a>
+							<a class="hover:underline" href={ postEditPage{} |> url("id", p.ID) }>{p.Title}</a>
 						</td>
 						<td class="px-3 py-2">
 							{ if p.Published {
@@ -79,7 +79,7 @@ component PostsTable(posts []store.Post) {
 						<td class="px-3 py-2 text-right">
 							<form
 								method="POST"
-								action={ components.URL(ctx, postDeleteHandler{}, "id", p.ID) }
+								action={ postDeleteHandler{} |> url("id", p.ID) }
 								hx-post={ postDeleteHandler{} |> url("id", p.ID) }
 								hx-target={ PostsTable |> target }
 								hx-swap="outerHTML"
diff --git a/examples/blog/admin/components.x.go b/examples/blog/admin/components.x.go
index 3dbaa5d..ddb9e44 100644
--- a/examples/blog/admin/components.x.go
+++ b/examples/blog/admin/components.x.go
@@ -142,7 +142,7 @@ func RecentPostsCard(_gsxp RecentPostsCardProps) gsx.Node {
 //line components.gsx:39:7
 				_gsxgw.S("<a")
 				_gsxgw.S(" class=\"hover:underline\"")
-				_gsxv2, _gsxerr := components.URL(ctx, postEditPage{}, "id", p.ID)
+				_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (postEditPage{}), "id", p.ID)
 				if _gsxerr != nil {
 					return _gsxerr
 				}
@@ -257,7 +257,7 @@ func PostsTable(_gsxp PostsTableProps) gsx.Node {
 //line components.gsx:69:8
 			_gsxgw.S("<a")
 			_gsxgw.S(" class=\"hover:underline\"")
-			_gsxv4, _gsxerr := components.URL(ctx, postEditPage{}, "id", p.ID)
+			_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (postEditPage{}), "id", p.ID)
 			if _gsxerr != nil {
 				return _gsxerr
 			}
@@ -265,7 +265,7 @@ func PostsTable(_gsxp PostsTableProps) gsx.Node {
 			_gsxgw.URL(string(_gsxv4))
 			_gsxgw.S("\"")
 			_gsxgw.S(">")
-//line components.gsx:69:92
+//line components.gsx:69:78
 			_gsxgw.Text(string(p.Title))
 			_gsxgw.S("</a>")
 			_gsxgw.S("</td>")
@@ -304,7 +304,7 @@ func PostsTable(_gsxp PostsTableProps) gsx.Node {
 //line components.gsx:80:8
 			_gsxgw.S("<form")
 			_gsxgw.S(" method=\"POST\"")
-			_gsxv5, _gsxerr := components.URL(ctx, postDeleteHandler{}, "id", p.ID)
+			_gsxv5, _gsxerr := _gsxf0.URLFor(ctx, (postDeleteHandler{}), "id", p.ID)
 			if _gsxerr != nil {
 				return _gsxerr
 			}
diff --git a/examples/blog/admin/posts.gsx b/examples/blog/admin/posts.gsx
index 65fa8a7..5adf1eb 100644
--- a/examples/blog/admin/posts.gsx
+++ b/examples/blog/admin/posts.gsx
@@ -40,7 +40,7 @@ component (p postListPage) Page(props postListProps) {
 	<layout.AdminShell title="Posts" current={props.User}>
 		<header class="mb-4 flex items-center justify-between">
 			<h1 class="text-2xl font-semibold">All posts</h1>
-			<a class="rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700" href={ components.URL(ctx, postNewPage{}) }>New post</a>
+			<a class="rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700" href={ postNewPage{} |> url }>New post</a>
 		</header>
 		<PostsTable posts={props.Posts}/>
 	</layout.AdminShell>
@@ -115,7 +115,7 @@ component PostForm(p store.Post, cats []store.Category, errMsg string) {
 		</label>
 		<div class="flex items-center gap-2">
 			<components.Button label="Save" { gsx.Attrs{"type": "submit"}... }/>
-			<a class="text-sm text-slate-500 hover:underline" href={ components.URL(ctx, postListPage{}) }>Cancel</a>
+			<a class="text-sm text-slate-500 hover:underline" href={ postListPage{} |> url }>Cancel</a>
 		</div>
 	</form>
 }
diff --git a/examples/blog/admin/posts.x.go b/examples/blog/admin/posts.x.go
index eac06c4..6d41020 100644
--- a/examples/blog/admin/posts.x.go
+++ b/examples/blog/admin/posts.x.go
@@ -10,6 +10,7 @@ import (
 	"strconv"
 
 	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
 	"github.com/jackielii/structpages/examples/blog/auth"
 	"github.com/jackielii/structpages/examples/blog/store"
 	"github.com/jackielii/structpages/examples/blog/ui/components"
@@ -77,7 +78,7 @@ func (p postListPage) Page(props postListProps) gsx.Node {
 //line posts.gsx:43:4
 			_gsxgw.S("<a")
 			_gsxgw.S(" class=\"rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700\"")
-			_gsxv0, _gsxerr := components.URL(ctx, postNewPage{})
+			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (postNewPage{}))
 			if _gsxerr != nil {
 				return _gsxerr
 			}
@@ -264,7 +265,7 @@ func PostForm(_gsxp PostFormProps) gsx.Node {
 //line posts.gsx:118:4
 		_gsxgw.S("<a")
 		_gsxgw.S(" class=\"text-sm text-slate-500 hover:underline\"")
-		_gsxv1, _gsxerr := components.URL(ctx, postListPage{})
+		_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (postListPage{}))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
diff --git a/examples/blog/admin/users.gsx b/examples/blog/admin/users.gsx
index f892bc1..34add61 100644
--- a/examples/blog/admin/users.gsx
+++ b/examples/blog/admin/users.gsx
@@ -38,7 +38,7 @@ component (p userListPage) Page(props userListProps) {
 						</span>
 						<form
 							method="POST"
-							action={ components.URL(ctx, userDeleteHandler{}, "id", u.ID) }
+							action={ userDeleteHandler{} |> url("id", u.ID) }
 							class="m-0"
 						>
 							<button class="text-xs text-red-600 hover:underline" type="submit">Delete</button>
@@ -48,7 +48,7 @@ component (p userListPage) Page(props userListProps) {
 			</ul>
 		</components.Card>
 		<components.Card title="Create user">
-			<form method="POST" action={ components.URL(ctx, userCreateHandler{}) } class="space-y-3">
+			<form method="POST" action={ userCreateHandler{} |> url } class="space-y-3">
 				<components.Input name="username" label="Username" value="" errMsg=""/>
 				<label class="block text-sm">
 					<span class="mb-1 block font-medium text-slate-700">Password</span>
diff --git a/examples/blog/admin/users.x.go b/examples/blog/admin/users.x.go
index 5f87f37..a9078e6 100644
--- a/examples/blog/admin/users.x.go
+++ b/examples/blog/admin/users.x.go
@@ -8,6 +8,7 @@ import (
 	"net/http"
 
 	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
 	"github.com/jackielii/structpages/examples/blog/auth"
 	"github.com/jackielii/structpages/examples/blog/store"
 	"github.com/jackielii/structpages/examples/blog/ui/components"
@@ -73,7 +74,7 @@ func (p userListPage) Page(props userListProps) gsx.Node {
 //line users.gsx:39:7
 					_gsxgw.S("<form")
 					_gsxgw.S(" method=\"POST\"")
-					_gsxv0, _gsxerr := components.URL(ctx, userDeleteHandler{}, "id", u.ID)
+					_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (userDeleteHandler{}), "id", u.ID)
 					if _gsxerr != nil {
 						return _gsxerr
 					}
@@ -101,7 +102,7 @@ func (p userListPage) Page(props userListProps) gsx.Node {
 //line users.gsx:51:4
 				_gsxgw.S("<form")
 				_gsxgw.S(" method=\"POST\"")
-				_gsxv1, _gsxerr := components.URL(ctx, userCreateHandler{})
+				_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (userCreateHandler{}))
 				if _gsxerr != nil {
 					return _gsxerr
 				}
diff --git a/examples/blog/blog/components.gsx b/examples/blog/blog/components.gsx
new file mode 100644
index 0000000..6b214ad
--- /dev/null
+++ b/examples/blog/blog/components.gsx
@@ -0,0 +1,45 @@
+// Feature-local gsx components for the public blog. These are standalone
+// functions (not page methods) so other handlers in this package can target
+// them via RenderComponent — most notably the comment handler, which
+// re-renders CommentsList after a successful POST.
+package blog
+
+import (
+	"github.com/jackielii/structpages/examples/blog/store"
+)
+
+component PostMeta(p store.Post) {
+	<p class="text-xs text-slate-500">
+		Posted {p.CreatedAt.Format("Jan 2, 2006")}
+	</p>
+}
+
+component PostCard(p store.Post) {
+	<article class="rounded-lg border bg-white p-5 shadow-sm">
+		<a class="text-lg font-semibold text-slate-900 hover:underline" href={ postPage{} |> url("slug", p.Slug) }>
+			{p.Title}
+		</a>
+		<PostMeta p={p}/>
+		<p class="mt-2 line-clamp-2 text-sm text-slate-700">{p.Body}</p>
+	</article>
+}
+
+// CommentsList is a standalone function component so the commentHandler
+// can re-render it from ServeHTTP via RenderComponent(CommentsList(...)).
+// It owns its own wrapper id, which doubles as the HTMX hx-target.
+component CommentsList(comments []store.Comment) {
+	<div id={ CommentsList |> id } class="space-y-3">
+		{ if len(comments) == 0 {
+			<p class="text-sm text-slate-500">No comments yet — be the first.</p>
+		} }
+		{ for _, c := range comments {
+			<article class="rounded border bg-slate-50 p-3">
+				<header class="text-xs font-medium text-slate-700">
+					{c.Author} · {c.CreatedAt.Format("15:04 Jan 2")}
+				</header>
+				<p class="mt-1 text-sm text-slate-800">{c.Body}</p>
+			</article>
+		} }
+		<p class="text-xs text-slate-400">Total: {len(comments)}</p>
+	</div>
+}
diff --git a/examples/blog/blog/components.x.go b/examples/blog/blog/components.x.go
new file mode 100644
index 0000000..e43fb10
--- /dev/null
+++ b/examples/blog/blog/components.x.go
@@ -0,0 +1,160 @@
+// Code generated by gsx; DO NOT EDIT.
+
+package blog
+
+import (
+	"context"
+	"io"
+	"strconv"
+
+	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
+	"github.com/jackielii/structpages/examples/blog/store"
+)
+
+type PostMetaProps struct {
+	P     store.Post
+	Attrs gsx.Attrs
+}
+
+func PostMeta(_gsxp PostMetaProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		p := _gsxp.P
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:12:2
+		_gsxgw.S("<p")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("text-xs text-slate-500"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+		_gsxgw.S("Posted ")
+//line components.gsx:13:10
+		_gsxgw.Text(string(p.CreatedAt.Format("Jan 2, 2006")))
+		_gsxgw.S("</p>")
+		return _gsxgw.Err()
+	})
+}
+
+type PostCardProps struct {
+	P     store.Post
+	Attrs gsx.Attrs
+}
+
+func PostCard(_gsxp PostCardProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		p := _gsxp.P
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:18:2
+		_gsxgw.S("<article")
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("rounded-lg border bg-white p-5 shadow-sm"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:19:3
+		_gsxgw.S("<a")
+		_gsxgw.S(" class=\"text-lg font-semibold text-slate-900 hover:underline\"")
+		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (postPage{}), "slug", p.Slug)
+		if _gsxerr != nil {
+			return _gsxerr
+		}
+		_gsxgw.S(" href=\"")
+		_gsxgw.URL(string(_gsxv0))
+		_gsxgw.S("\"")
+		_gsxgw.S(">")
+//line components.gsx:20:4
+		_gsxgw.Text(string(p.Title))
+		_gsxgw.S("</a>")
+//line components.gsx:22:3
+		_gsxgw.Node(ctx, PostMeta(PostMetaProps{P: p}))
+//line components.gsx:23:3
+		_gsxgw.S("<p")
+		_gsxgw.S(" class=\"mt-2 line-clamp-2 text-sm text-slate-700\"")
+		_gsxgw.S(">")
+//line components.gsx:23:55
+		_gsxgw.Text(string(p.Body))
+		_gsxgw.S("</p>")
+		_gsxgw.S("</article>")
+		return _gsxgw.Err()
+	})
+}
+
+// CommentsList is a standalone function component so the commentHandler
+// can re-render it from ServeHTTP via RenderComponent(CommentsList(...)).
+// It owns its own wrapper id, which doubles as the HTMX hx-target.
+
+type CommentsListProps struct {
+	Comments []store.Comment
+	Attrs    gsx.Attrs
+}
+
+func CommentsList(_gsxp CommentsListProps) gsx.Node {
+	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
+		comments := _gsxp.Comments
+		_gsxgw := gsx.W(_gsxw)
+//line components.gsx:31:2
+		_gsxgw.S("<div")
+		if !_gsxp.Attrs.Has("id") {
+			_gsxv1, _gsxerr := _gsxf0.ID(ctx, (CommentsList))
+			if _gsxerr != nil {
+				return _gsxerr
+			}
+			_gsxgw.S(" id=\"")
+			_gsxgw.AttrValue(string(_gsxv1))
+			_gsxgw.S("\"")
+		}
+		_gsxgw.S(" class=\"")
+		_gsxgw.Class(gsx.Class("space-y-3"), gsx.Class(_gsxp.Attrs.Class()))
+		_gsxgw.S("\"")
+		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
+		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
+		_gsxgw.S(">")
+//line components.gsx:32:3
+		if len(comments) == 0 {
+//line components.gsx:33:4
+			_gsxgw.S("<p")
+			_gsxgw.S(" class=\"text-sm text-slate-500\"")
+			_gsxgw.S(">")
+			_gsxgw.S("No comments yet — be the first.")
+			_gsxgw.S("</p>")
+		}
+//line components.gsx:35:3
+		for _, c := range comments {
+//line components.gsx:36:4
+			_gsxgw.S("<article")
+			_gsxgw.S(" class=\"rounded border bg-slate-50 p-3\"")
+			_gsxgw.S(">")
+//line components.gsx:37:5
+			_gsxgw.S("<header")
+			_gsxgw.S(" class=\"text-xs font-medium text-slate-700\"")
+			_gsxgw.S(">")
+//line components.gsx:38:6
+			_gsxgw.Text(string(c.Author))
+			_gsxgw.S(" · ")
+//line components.gsx:38:20
+			_gsxgw.Text(string(c.CreatedAt.Format("15:04 Jan 2")))
+			_gsxgw.S("</header>")
+//line components.gsx:40:5
+			_gsxgw.S("<p")
+			_gsxgw.S(" class=\"mt-1 text-sm text-slate-800\"")
+			_gsxgw.S(">")
+//line components.gsx:40:44
+			_gsxgw.Text(string(c.Body))
+			_gsxgw.S("</p>")
+			_gsxgw.S("</article>")
+		}
+//line components.gsx:43:3
+		_gsxgw.S("<p")
+		_gsxgw.S(" class=\"text-xs text-slate-400\"")
+		_gsxgw.S(">")
+		_gsxgw.S("Total: ")
+//line components.gsx:43:44
+		_gsxgw.Text(strconv.FormatInt(int64(len(comments)), 10))
+		_gsxgw.S("</p>")
+		_gsxgw.S("</div>")
+		return _gsxgw.Err()
+	})
+}
diff --git a/examples/blog/blog/home.gsx b/examples/blog/blog/home.gsx
index 566be3b..874ebe3 100644
--- a/examples/blog/blog/home.gsx
+++ b/examples/blog/blog/home.gsx
@@ -38,7 +38,7 @@ component (p homePage) Page(props homeProps) {
 			<ul class="flex flex-wrap gap-2">
 				{ for _, c := range props.Categories {
 					<li>
-						<a class="rounded-full border px-3 py-1 text-sm hover:bg-slate-50" href={ components.URL(ctx, categoryPage{}, "slug", c.Slug) }>
+						<a class="rounded-full border px-3 py-1 text-sm hover:bg-slate-50" href={ categoryPage{} |> url("slug", c.Slug) }>
 							{c.Name}
 						</a>
 					</li>
diff --git a/examples/blog/blog/home.x.go b/examples/blog/blog/home.x.go
index 7b7455a..45beebf 100644
--- a/examples/blog/blog/home.x.go
+++ b/examples/blog/blog/home.x.go
@@ -8,6 +8,7 @@ import (
 	"net/http"
 
 	"github.com/gsxhq/gsx"
+	_gsxf0 "github.com/jackielii/structpages"
 	"github.com/jackielii/structpages/examples/blog/store"
 	"github.com/jackielii/structpages/examples/blog/ui/components"
 	"github.com/jackielii/structpages/examples/blog/ui/layout"
@@ -69,7 +70,7 @@ func (p homePage) Page(props homeProps) gsx.Node {
 //line home.gsx:41:7
 					_gsxgw.S("<a")
 					_gsxgw.S(" class=\"rounded-full border px-3 py-1 text-sm hover:bg-slate-50\"")
-					_gsxv0, _gsxerr := components.URL(ctx, categoryPage{}, "slug", c.Slug)
+					_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (categoryPage{}), "slug", c.Slug)
 					if _gsxerr != nil {
 						return _gsxerr
 					}
diff --git a/examples/blog/blog/post.gsx b/examples/blog/blog/post.gsx
index b941619..755f364 100644
--- a/examples/blog/blog/post.gsx
+++ b/examples/blog/blog/post.gsx
@@ -41,7 +41,7 @@ component (p postPage) Page(props postProps) {
 			<p class="text-sm text-slate-500">
 				by {props.Author.Username}
 				{ if props.Category.Slug != "" {
-					· <a class="hover:underline" href={ components.URL(ctx, categoryPage{}, "slug", props.Category.Slug) }>{props.Category.Name}</a>
+					· <a class="hover:underline" href={ categoryPage{} |> url("slug", props.Category.Slug) }>{props.Category.Name}</a>
 				} }
 			</p>
 			<div class="prose max-w-none text-slate-800">
diff --git a/examples/blog/blog/post.x.go b/examples/blog/blog/post.x.go
index 01c83f9..de94be3 100644
--- a/examples/blog/blog/post.x.go
+++ b/examples/blog/blog/post.x.go
@@ -69,7 +69,7 @@ func (p postPage) Page(props postProps) gsx.Node {
 //line post.gsx:44:9
 				_gsxgw.S("<a")
 				_gsxgw.S(" class=\"hover:underline\"")
-				_gsxv0, _gsxerr := components.URL(ctx, categoryPage{}, "slug", props.Category.Slug)
+				_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (categoryPage{}), "slug", props.Category.Slug)
 				if _gsxerr != nil {
 					return _gsxerr
 				}
@@ -77,7 +77,7 @@ func (p postPage) Page(props postProps) gsx.Node {
 				_gsxgw.URL(string(_gsxv0))
 				_gsxgw.S("\"")
 				_gsxgw.S(">")
-//line post.gsx:44:110
+//line post.gsx:44:96
 				_gsxgw.Text(string(props.Category.Name))
 				_gsxgw.S("</a>")
 			}

From 86fa4c4caefbfc7e6fa3f4d13a327f2211c99272 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Thu, 25 Jun 2026 17:58:25 +0100
Subject: [PATCH 04/13] examples/blog: AdminShellWith uses implicit Children,
 not an explicit body param
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A custom-body wrapper component should ride the built-in Children prop rather
than declaring a bespoke body gsx.Node param. Drop the param, use {children} in
the body; the Go caller passes AdminShellWithProps{…, Children: body}.
---
 examples/blog/admin/posts.go   |  2 +-
 examples/blog/admin/posts.gsx  |  9 ++--
 examples/blog/admin/posts.x.go | 75 +++++++++++++++++-----------------
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/examples/blog/admin/posts.go b/examples/blog/admin/posts.go
index c238dd0..74adc45 100644
--- a/examples/blog/admin/posts.go
+++ b/examples/blog/admin/posts.go
@@ -118,7 +118,7 @@ func parsePostForm(r *http.Request) (store.Post, string) {
 // renderPostForm re-renders the form on validation failure, preserving inputs.
 func renderPostForm(ctx context.Context, w http.ResponseWriter, user store.User, title string, p store.Post, cats []store.Category, errMsg string) error {
 	body := PostForm(PostFormProps{P: p, Cats: cats, ErrMsg: errMsg})
-	return AdminShellWith(AdminShellWithProps{Title: title, User: user, Body: body}).Render(ctx, w)
+	return AdminShellWith(AdminShellWithProps{Title: title, User: user, Children: body}).Render(ctx, w)
 }
 
 // postFormAction returns the POST URL for the form: create when ID==0,
diff --git a/examples/blog/admin/posts.gsx b/examples/blog/admin/posts.gsx
index 5adf1eb..1ea8a37 100644
--- a/examples/blog/admin/posts.gsx
+++ b/examples/blog/admin/posts.gsx
@@ -13,11 +13,12 @@ import (
 )
 
 // AdminShellWith is a tiny gsx wrapper used by handlers that need to render a
-// custom body inside AdminShell from Go code. The templ version took a
-// `templ.Component`; gsx's equivalent renderable value type is `gsx.Node`.
-component AdminShellWith(title string, user store.User, body gsx.Node) {
+// custom body inside AdminShell from Go code. The body is passed as the
+// implicit Children prop — from Go: AdminShellWith(AdminShellWithProps{Title: …,
+// User: …, Children: body}).
+component AdminShellWith(title string, user store.User) {
 	<layout.AdminShell title={title} current={user}>
-		{body}
+		{children}
 	</layout.AdminShell>
 }
 
diff --git a/examples/blog/admin/posts.x.go b/examples/blog/admin/posts.x.go
index 6d41020..540b0c7 100644
--- a/examples/blog/admin/posts.x.go
+++ b/examples/blog/admin/posts.x.go
@@ -18,26 +18,27 @@ import (
 )
 
 // AdminShellWith is a tiny gsx wrapper used by handlers that need to render a
-// custom body inside AdminShell from Go code. The templ version took a
-// `templ.Component`; gsx's equivalent renderable value type is `gsx.Node`.
+// custom body inside AdminShell from Go code. The body is passed as the
+// implicit Children prop — from Go: AdminShellWith(AdminShellWithProps{Title: …,
+// User: …, Children: body}).
 
 type AdminShellWithProps struct {
-	Title string
-	User  store.User
-	Body  gsx.Node
+	Title    string
+	User     store.User
+	Children gsx.Node
 }
 
 func AdminShellWith(_gsxp AdminShellWithProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		title := _gsxp.Title
 		user := _gsxp.User
-		body := _gsxp.Body
+		children := _gsxp.Children
 		_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:19:2
+//line posts.gsx:20:2
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: title, Current: user, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:20:3
-			_gsxgw.Node(ctx, body)
+//line posts.gsx:21:3
+			_gsxgw.Node(ctx, children)
 			return _gsxgw.Err()
 		})}))
 		return _gsxgw.Err()
@@ -62,20 +63,20 @@ func (postListPage) Props(r *http.Request, s *store.Store) (postListProps, error
 func (p postListPage) Page(props postListProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:40:2
+//line posts.gsx:41:2
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Posts", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:41:3
+//line posts.gsx:42:3
 			_gsxgw.S("<header")
 			_gsxgw.S(" class=\"mb-4 flex items-center justify-between\"")
 			_gsxgw.S(">")
-//line posts.gsx:42:4
+//line posts.gsx:43:4
 			_gsxgw.S("<h1")
 			_gsxgw.S(" class=\"text-2xl font-semibold\"")
 			_gsxgw.S(">")
 			_gsxgw.S("All posts")
 			_gsxgw.S("</h1>")
-//line posts.gsx:43:4
+//line posts.gsx:44:4
 			_gsxgw.S("<a")
 			_gsxgw.S(" class=\"rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700\"")
 			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (postNewPage{}))
@@ -89,7 +90,7 @@ func (p postListPage) Page(props postListProps) gsx.Node {
 			_gsxgw.S("New post")
 			_gsxgw.S("</a>")
 			_gsxgw.S("</header>")
-//line posts.gsx:45:3
+//line posts.gsx:46:3
 			_gsxgw.Node(ctx, PostsTable(PostsTableProps{Posts: props.Posts}))
 			return _gsxgw.Err()
 		})}))
@@ -115,16 +116,16 @@ func (postNewPage) Props(r *http.Request, s *store.Store) (postFormViewProps, er
 func (p postNewPage) Page(props postFormViewProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:65:2
+//line posts.gsx:66:2
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "New post", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:66:3
+//line posts.gsx:67:3
 			_gsxgw.S("<h1")
 			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
 			_gsxgw.S(">")
 			_gsxgw.S("New post")
 			_gsxgw.S("</h1>")
-//line posts.gsx:67:3
+//line posts.gsx:68:3
 			_gsxgw.Node(ctx, PostForm(PostFormProps{P: props.Post, Cats: props.Categories, ErrMsg: ""}))
 			return _gsxgw.Err()
 		})}))
@@ -152,16 +153,16 @@ func (postEditPage) Props(r *http.Request, s *store.Store) (postFormViewProps, e
 func (p postEditPage) Page(props postFormViewProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:89:2
+//line posts.gsx:90:2
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Edit post", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:90:3
+//line posts.gsx:91:3
 			_gsxgw.S("<h1")
 			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
 			_gsxgw.S(">")
 			_gsxgw.S("Edit post")
 			_gsxgw.S("</h1>")
-//line posts.gsx:91:3
+//line posts.gsx:92:3
 			_gsxgw.Node(ctx, PostForm(PostFormProps{P: props.Post, Cats: props.Categories, ErrMsg: ""}))
 			return _gsxgw.Err()
 		})}))
@@ -184,7 +185,7 @@ func PostForm(_gsxp PostFormProps) gsx.Node {
 		cats := _gsxp.Cats
 		errMsg := _gsxp.ErrMsg
 		_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:98:2
+//line posts.gsx:99:2
 		_gsxgw.S("<form")
 		if !_gsxp.Attrs.Has("method") {
 			_gsxgw.S(" method=\"POST\"")
@@ -200,55 +201,55 @@ func PostForm(_gsxp PostFormProps) gsx.Node {
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line posts.gsx:99:3
-		_gsxgw.Node(ctx, components.Alert(components.AlertProps{Kind: components.AlertError, Msg: errMsg}))
 //line posts.gsx:100:3
-		_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "title", Label: "Title", Value: p.Title, ErrMsg: ""}))
+		_gsxgw.Node(ctx, components.Alert(components.AlertProps{Kind: components.AlertError, Msg: errMsg}))
 //line posts.gsx:101:3
-		_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "slug", Label: "Slug (auto if blank)", Value: p.Slug, ErrMsg: ""}))
+		_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "title", Label: "Title", Value: p.Title, ErrMsg: ""}))
 //line posts.gsx:102:3
+		_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "slug", Label: "Slug (auto if blank)", Value: p.Slug, ErrMsg: ""}))
+//line posts.gsx:103:3
 		_gsxgw.S("<label")
 		_gsxgw.S(" class=\"block text-sm\"")
 		_gsxgw.S(">")
-//line posts.gsx:103:4
+//line posts.gsx:104:4
 		_gsxgw.S("<span")
 		_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
 		_gsxgw.S(">")
 		_gsxgw.S("Category")
 		_gsxgw.S("</span>")
-//line posts.gsx:104:4
+//line posts.gsx:105:4
 		_gsxgw.S("<select")
 		_gsxgw.S(" name=\"category_id\"")
 		_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
 		_gsxgw.S(">")
-//line posts.gsx:105:5
+//line posts.gsx:106:5
 		_gsxgw.S("<option")
 		_gsxgw.S(" value=\"0\"")
 		_gsxgw.S(">")
 		_gsxgw.S("— pick one —")
 		_gsxgw.S("</option>")
-//line posts.gsx:106:5
+//line posts.gsx:107:5
 		for _, c := range cats {
-//line posts.gsx:107:6
+//line posts.gsx:108:6
 			_gsxgw.S("<option")
 			_gsxgw.S(" value=\"")
 			_gsxgw.AttrValue(strconv.FormatInt(int64(c.ID), 10))
 			_gsxgw.S("\"")
 			_gsxgw.BoolAttr("selected", bool(c.ID == p.CategoryID))
 			_gsxgw.S(">")
-//line posts.gsx:107:61
+//line posts.gsx:108:61
 			_gsxgw.Text(string(c.Name))
 			_gsxgw.S("</option>")
 		}
 		_gsxgw.S("</select>")
 		_gsxgw.S("</label>")
-//line posts.gsx:111:3
-		_gsxgw.Node(ctx, components.Textarea(components.TextareaProps{Name: "body", Label: "Body", Value: p.Body, ErrMsg: ""}))
 //line posts.gsx:112:3
+		_gsxgw.Node(ctx, components.Textarea(components.TextareaProps{Name: "body", Label: "Body", Value: p.Body, ErrMsg: ""}))
+//line posts.gsx:113:3
 		_gsxgw.S("<label")
 		_gsxgw.S(" class=\"flex items-center gap-2 text-sm\"")
 		_gsxgw.S(">")
-//line posts.gsx:113:4
+//line posts.gsx:114:4
 		_gsxgw.S("<input")
 		_gsxgw.S(" type=\"checkbox\"")
 		_gsxgw.S(" name=\"published\"")
@@ -256,13 +257,13 @@ func PostForm(_gsxp PostFormProps) gsx.Node {
 		_gsxgw.S("/>")
 		_gsxgw.S("Publish immediately")
 		_gsxgw.S("</label>")
-//line posts.gsx:116:3
+//line posts.gsx:117:3
 		_gsxgw.S("<div")
 		_gsxgw.S(" class=\"flex items-center gap-2\"")
 		_gsxgw.S(">")
-//line posts.gsx:117:4
-		_gsxgw.Node(ctx, components.Button(components.ButtonProps{Label: "Save", Attrs: gsx.Attrs{}.Merge(gsx.Attrs{"type": "submit"})}))
 //line posts.gsx:118:4
+		_gsxgw.Node(ctx, components.Button(components.ButtonProps{Label: "Save", Attrs: gsx.Attrs{}.Merge(gsx.Attrs{"type": "submit"})}))
+//line posts.gsx:119:4
 		_gsxgw.S("<a")
 		_gsxgw.S(" class=\"text-sm text-slate-500 hover:underline\"")
 		_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (postListPage{}))

From 5b077f2851afc55c60894dfe538fb66e6fe39416 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Thu, 25 Jun 2026 18:02:11 +0100
Subject: [PATCH 05/13] =?UTF-8?q?fix(gitignore):=20drop=20examples/blog/bl?=
 =?UTF-8?q?og=20=E2=80=94=20it=20ignored=20the=20blog/=20source=20package,?=
 =?UTF-8?q?=20not=20a=20binary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`examples/blog/blog` (no trailing slash) matched the blog feature SOURCE
directory, forcing its files to be force-added. The blog example is run via
`go run .` and can't even build a `blog` binary there (the name collides with
the source subdir), so there is no binary to ignore — remove the line.
---
 .gitignore | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index c3c5ddc..f5550a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,7 +41,6 @@ bench/*.pprof
 examples/simple/simple
 examples/htmx/htmx
 examples/todo/todo
-examples/blog/blog
 examples/htmx-render-target/htmx-render-target-example
 examples/lint-misuse/lint-misuse
 

From e4a03b6dfbf9d51644da7c1f53ac4637ea73489e Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Thu, 25 Jun 2026 21:37:45 +0100
Subject: [PATCH 06/13] examples: drop per-example cmd/gen; use shared
 repo-root gsx.toml + go tool gsx

Claude-Session: https://claude.ai/code/session_01AVv1VYM5pjrSTVfYtBDzBG
---
 examples/blog/cmd/gen/main.go               | 21 ---------------------
 examples/blog/go.mod                        |  6 +++++-
 examples/blog/go.sum                        |  2 ++
 examples/htmx-render-target/cmd/gen/main.go | 21 ---------------------
 examples/htmx-render-target/go.mod          |  6 +++++-
 examples/htmx-render-target/go.sum          |  2 ++
 examples/htmx/cmd/gen/main.go               | 21 ---------------------
 examples/htmx/go.mod                        |  1 +
 examples/htmx/go.sum                        |  2 ++
 examples/lint-misuse/cmd/gen/main.go        | 21 ---------------------
 examples/lint-misuse/go.mod                 |  3 +++
 examples/lint-misuse/go.sum                 |  2 ++
 examples/simple/cmd/gen/main.go             | 21 ---------------------
 examples/simple/go.mod                      |  6 +++++-
 examples/simple/go.sum                      |  2 ++
 examples/todo/cmd/gen/main.go               | 21 ---------------------
 examples/todo/go.mod                        |  6 +++++-
 examples/todo/go.sum                        |  2 ++
 gsx.toml                                    | 13 +++++++++++++
 19 files changed, 49 insertions(+), 130 deletions(-)
 delete mode 100644 examples/blog/cmd/gen/main.go
 delete mode 100644 examples/htmx-render-target/cmd/gen/main.go
 delete mode 100644 examples/htmx/cmd/gen/main.go
 delete mode 100644 examples/lint-misuse/cmd/gen/main.go
 delete mode 100644 examples/simple/cmd/gen/main.go
 delete mode 100644 examples/todo/cmd/gen/main.go
 create mode 100644 gsx.toml

diff --git a/examples/blog/cmd/gen/main.go b/examples/blog/cmd/gen/main.go
deleted file mode 100644
index a88d6a7..0000000
--- a/examples/blog/cmd/gen/main.go
+++ /dev/null
@@ -1,21 +0,0 @@
-// Command gen runs gsx codegen for the blog example with the structpages
-// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
-// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
-// error-returning structpages.URLFor / ID / IDTarget calls.
-//
-// Generate with:  go run ./cmd/gen generate ./admin ./blog ./ui/components ./ui/layout
-package main
-
-import (
-	"github.com/gsxhq/gsx/gen"
-
-	"github.com/jackielii/structpages"
-)
-
-func main() {
-	gen.Main(
-		gen.WithFilter("url", structpages.URLFor),
-		gen.WithFilter("id", structpages.ID),
-		gen.WithFilter("target", structpages.IDTarget),
-	)
-}
diff --git a/examples/blog/go.mod b/examples/blog/go.mod
index 2d78c38..d4d80b2 100644
--- a/examples/blog/go.mod
+++ b/examples/blog/go.mod
@@ -5,6 +5,7 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
 require (
+	github.com/BurntSushi/toml v1.6.0 // indirect
 	github.com/a-h/templ v0.3.1020 // indirect
 	github.com/tdewolff/parse/v2 v2.8.13 // indirect
 )
@@ -30,6 +31,9 @@ require (
 
 replace github.com/jackielii/structpages => ../..
 
-tool github.com/a-h/templ/cmd/templ
+tool (
+	github.com/a-h/templ/cmd/templ
+	github.com/gsxhq/gsx/cmd/gsx
+)
 
 replace github.com/gsxhq/gsx => /Users/jackieli/personal/gsxhq/gsx
diff --git a/examples/blog/go.sum b/examples/blog/go.sum
index d06353a..00746e7 100644
--- a/examples/blog/go.sum
+++ b/examples/blog/go.sum
@@ -1,3 +1,5 @@
+github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
+github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
 github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
diff --git a/examples/htmx-render-target/cmd/gen/main.go b/examples/htmx-render-target/cmd/gen/main.go
deleted file mode 100644
index 2963d40..0000000
--- a/examples/htmx-render-target/cmd/gen/main.go
+++ /dev/null
@@ -1,21 +0,0 @@
-// Command gen runs gsx codegen for the htmx-render-target example with the
-// structpages pipeline filters registered, so .gsx templates can write
-// `{ page{} |> url }`, `{ x |> id }`, and `{ x |> target }` instead of the
-// ctx-threading, error-returning structpages.URLFor / ID / IDTarget calls.
-//
-// Generate with:  go run ./cmd/gen generate .
-package main
-
-import (
-	"github.com/gsxhq/gsx/gen"
-
-	"github.com/jackielii/structpages"
-)
-
-func main() {
-	gen.Main(
-		gen.WithFilter("url", structpages.URLFor),
-		gen.WithFilter("id", structpages.ID),
-		gen.WithFilter("target", structpages.IDTarget),
-	)
-}
diff --git a/examples/htmx-render-target/go.mod b/examples/htmx-render-target/go.mod
index d8c4537..ebf3fc0 100644
--- a/examples/htmx-render-target/go.mod
+++ b/examples/htmx-render-target/go.mod
@@ -5,6 +5,7 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0
 
 require (
+	github.com/BurntSushi/toml v1.6.0 // indirect
 	github.com/a-h/templ v0.3.1020 // indirect
 	github.com/tdewolff/parse/v2 v2.8.13 // indirect
 )
@@ -30,6 +31,9 @@ require (
 
 replace github.com/jackielii/structpages => ../..
 
-tool github.com/a-h/templ/cmd/templ
+tool (
+	github.com/a-h/templ/cmd/templ
+	github.com/gsxhq/gsx/cmd/gsx
+)
 
 replace github.com/gsxhq/gsx => /Users/jackieli/personal/gsxhq/gsx
diff --git a/examples/htmx-render-target/go.sum b/examples/htmx-render-target/go.sum
index d06353a..00746e7 100644
--- a/examples/htmx-render-target/go.sum
+++ b/examples/htmx-render-target/go.sum
@@ -1,3 +1,5 @@
+github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
+github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
 github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
diff --git a/examples/htmx/cmd/gen/main.go b/examples/htmx/cmd/gen/main.go
deleted file mode 100644
index a2a182a..0000000
--- a/examples/htmx/cmd/gen/main.go
+++ /dev/null
@@ -1,21 +0,0 @@
-// Command gen runs gsx codegen for the htmx example with the structpages
-// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
-// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
-// error-returning structpages.URLFor / ID / IDTarget calls.
-//
-// Generate with:  go run ./cmd/gen generate .
-package main
-
-import (
-	"github.com/gsxhq/gsx/gen"
-
-	"github.com/jackielii/structpages"
-)
-
-func main() {
-	gen.Main(
-		gen.WithFilter("url", structpages.URLFor),
-		gen.WithFilter("id", structpages.ID),
-		gen.WithFilter("target", structpages.IDTarget),
-	)
-}
diff --git a/examples/htmx/go.mod b/examples/htmx/go.mod
index 922fd71..63155cf 100644
--- a/examples/htmx/go.mod
+++ b/examples/htmx/go.mod
@@ -5,6 +5,7 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
 require (
+	github.com/BurntSushi/toml v1.6.0 // indirect
 	github.com/a-h/templ v0.3.1020 // indirect
 	github.com/tdewolff/parse/v2 v2.8.13 // indirect
 )
diff --git a/examples/htmx/go.sum b/examples/htmx/go.sum
index d06353a..00746e7 100644
--- a/examples/htmx/go.sum
+++ b/examples/htmx/go.sum
@@ -1,3 +1,5 @@
+github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
+github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
 github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
diff --git a/examples/lint-misuse/cmd/gen/main.go b/examples/lint-misuse/cmd/gen/main.go
deleted file mode 100644
index ff28a02..0000000
--- a/examples/lint-misuse/cmd/gen/main.go
+++ /dev/null
@@ -1,21 +0,0 @@
-// Command gen runs gsx codegen for the lint-misuse example with the structpages
-// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
-// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
-// error-returning structpages.URLFor / ID / IDTarget calls.
-//
-// Generate with:  go run ./cmd/gen generate .
-package main
-
-import (
-	"github.com/gsxhq/gsx/gen"
-
-	"github.com/jackielii/structpages"
-)
-
-func main() {
-	gen.Main(
-		gen.WithFilter("url", structpages.URLFor),
-		gen.WithFilter("id", structpages.ID),
-		gen.WithFilter("target", structpages.IDTarget),
-	)
-}
diff --git a/examples/lint-misuse/go.mod b/examples/lint-misuse/go.mod
index c6ca70c..bf7bb3e 100644
--- a/examples/lint-misuse/go.mod
+++ b/examples/lint-misuse/go.mod
@@ -5,6 +5,7 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
 require (
+	github.com/BurntSushi/toml v1.6.0 // indirect
 	github.com/tdewolff/parse/v2 v2.8.13 // indirect
 	golang.org/x/mod v0.37.0 // indirect
 	golang.org/x/sync v0.21.0 // indirect
@@ -19,3 +20,5 @@ require (
 replace github.com/jackielii/structpages => ../..
 
 replace github.com/gsxhq/gsx => /Users/jackieli/personal/gsxhq/gsx
+
+tool github.com/gsxhq/gsx/cmd/gsx
diff --git a/examples/lint-misuse/go.sum b/examples/lint-misuse/go.sum
index 1fdd546..2f0d490 100644
--- a/examples/lint-misuse/go.sum
+++ b/examples/lint-misuse/go.sum
@@ -1,3 +1,5 @@
+github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
+github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/jackielii/ctxkey v1.0.1 h1:CcgbR+fQbrzZJWxI/7Ec4EhzUbmTU1sfI1gV7MAgjIg=
diff --git a/examples/simple/cmd/gen/main.go b/examples/simple/cmd/gen/main.go
deleted file mode 100644
index 97fe469..0000000
--- a/examples/simple/cmd/gen/main.go
+++ /dev/null
@@ -1,21 +0,0 @@
-// Command gen runs gsx codegen for the simple example with the structpages
-// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
-// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
-// error-returning structpages.URLFor / ID / IDTarget calls.
-//
-// Generate with:  go run ./cmd/gen generate .
-package main
-
-import (
-	"github.com/gsxhq/gsx/gen"
-
-	"github.com/jackielii/structpages"
-)
-
-func main() {
-	gen.Main(
-		gen.WithFilter("url", structpages.URLFor),
-		gen.WithFilter("id", structpages.ID),
-		gen.WithFilter("target", structpages.IDTarget),
-	)
-}
diff --git a/examples/simple/go.mod b/examples/simple/go.mod
index 37fca37..3292a74 100644
--- a/examples/simple/go.mod
+++ b/examples/simple/go.mod
@@ -5,6 +5,7 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
 require (
+	github.com/BurntSushi/toml v1.6.0 // indirect
 	github.com/a-h/templ v0.3.1020 // indirect
 	github.com/tdewolff/parse/v2 v2.8.13 // indirect
 )
@@ -30,6 +31,9 @@ require (
 
 replace github.com/jackielii/structpages => ../..
 
-tool github.com/a-h/templ/cmd/templ
+tool (
+	github.com/a-h/templ/cmd/templ
+	github.com/gsxhq/gsx/cmd/gsx
+)
 
 replace github.com/gsxhq/gsx => ../../../gsxhq/gsx
diff --git a/examples/simple/go.sum b/examples/simple/go.sum
index d06353a..00746e7 100644
--- a/examples/simple/go.sum
+++ b/examples/simple/go.sum
@@ -1,3 +1,5 @@
+github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
+github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
 github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
diff --git a/examples/todo/cmd/gen/main.go b/examples/todo/cmd/gen/main.go
deleted file mode 100644
index 3696a3a..0000000
--- a/examples/todo/cmd/gen/main.go
+++ /dev/null
@@ -1,21 +0,0 @@
-// Command gen runs gsx codegen for the todo example with the structpages
-// pipeline filters registered, so .gsx templates can write `{ page{} |> url }`,
-// `{ x |> id }`, and `{ x |> target }` instead of the ctx-threading,
-// error-returning structpages.URLFor / ID / IDTarget calls.
-//
-// Generate with:  go run ./cmd/gen generate .
-package main
-
-import (
-	"github.com/gsxhq/gsx/gen"
-
-	"github.com/jackielii/structpages"
-)
-
-func main() {
-	gen.Main(
-		gen.WithFilter("url", structpages.URLFor),
-		gen.WithFilter("id", structpages.ID),
-		gen.WithFilter("target", structpages.IDTarget),
-	)
-}
diff --git a/examples/todo/go.mod b/examples/todo/go.mod
index a2b4ba8..27bf6ea 100644
--- a/examples/todo/go.mod
+++ b/examples/todo/go.mod
@@ -5,6 +5,7 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0
 
 require (
+	github.com/BurntSushi/toml v1.6.0 // indirect
 	github.com/a-h/templ v0.3.1020 // indirect
 	github.com/tdewolff/parse/v2 v2.8.13 // indirect
 )
@@ -30,6 +31,9 @@ require (
 
 replace github.com/jackielii/structpages => ../..
 
-tool github.com/a-h/templ/cmd/templ
+tool (
+	github.com/a-h/templ/cmd/templ
+	github.com/gsxhq/gsx/cmd/gsx
+)
 
 replace github.com/gsxhq/gsx => /Users/jackieli/personal/gsxhq/gsx
diff --git a/examples/todo/go.sum b/examples/todo/go.sum
index d06353a..00746e7 100644
--- a/examples/todo/go.sum
+++ b/examples/todo/go.sum
@@ -1,3 +1,5 @@
+github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
+github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
 github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
diff --git a/gsx.toml b/gsx.toml
new file mode 100644
index 0000000..316bec6
--- /dev/null
+++ b/gsx.toml
@@ -0,0 +1,13 @@
+# gsx project config, shared by every example module in this repo.
+#
+# Registers the structpages URL/ID helpers as gsx pipeline filters so templates
+# can write `{ page{} |> url }`, `{ x |> id }`, `{ x |> target }` instead of the
+# ctx-threading, error-returning structpages.URLFor / ID / IDTarget calls.
+#
+# The stock `gsx` binary discovers this file by walking up from the example dir
+# to the git repo root, so no per-example cmd/gen generator is needed. Generate
+# with:  go tool gsx generate .
+[aliases]
+url    = "github.com/jackielii/structpages.URLFor"
+id     = "github.com/jackielii/structpages.ID"
+target = "github.com/jackielii/structpages.IDTarget"

From 0d8ac21d115548fd05864a43512c8a1ed3fd699a Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Thu, 25 Jun 2026 22:03:40 +0100
Subject: [PATCH 07/13] examples: remove templ + gsx tool directives from
 go.mod (generate via installed gsx)

Claude-Session: https://claude.ai/code/session_01AVv1VYM5pjrSTVfYtBDzBG
---
 examples/README.md                 | 12 ++------
 examples/blog/README.md            |  2 +-
 examples/blog/go.mod               | 25 ----------------
 examples/blog/go.sum               | 47 ------------------------------
 examples/htmx-render-target/go.mod | 25 ----------------
 examples/htmx-render-target/go.sum | 47 ------------------------------
 examples/htmx/go.mod               | 25 ----------------
 examples/htmx/go.sum               | 47 ------------------------------
 examples/lint-misuse/go.mod        | 10 -------
 examples/lint-misuse/go.sum        | 12 --------
 examples/simple/go.mod             | 25 ----------------
 examples/simple/go.sum             | 47 ------------------------------
 examples/todo/go.mod               | 25 ----------------
 examples/todo/go.sum               | 47 ------------------------------
 14 files changed, 4 insertions(+), 392 deletions(-)

diff --git a/examples/README.md b/examples/README.md
index 21d67f8..64ffe1e 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -14,19 +14,13 @@
 Each example has its own `go.mod`. From the example directory:
 
 ```shell
-# Generate templ files first (required)
-templ generate -include-version=false
+# Generate the .x.go files from .gsx sources first (required)
+gsx generate .
 
 # Run the server (defaults to :8080)
 go run .
 ```
 
-Or use templ's watch mode for live-reloading during development:
-
-```shell
-templ generate --watch --proxy="http://localhost:8080" --cmd="go run ."
-```
-
 You'll need:
 - Go 1.24+
-- `templ` CLI: `go install github.com/a-h/templ/cmd/templ@latest` (not required for `html-template/`, which uses only the standard library)
+- `gsx` CLI: `go install github.com/gsxhq/gsx/cmd/gsx@latest` (not required for `html-template/`, which uses only the standard library)
diff --git a/examples/blog/README.md b/examples/blog/README.md
index 49f4b4e..1abfc2c 100644
--- a/examples/blog/README.md
+++ b/examples/blog/README.md
@@ -11,7 +11,7 @@ to Go + templ.
 ## Run
 
 ```sh
-templ generate -include-version=false
+gsx generate ./admin ./blog ./ui/components ./ui/layout
 go run .
 # open http://localhost:8080  — admin login: admin / admin
 ```
diff --git a/examples/blog/go.mod b/examples/blog/go.mod
index d4d80b2..81d1739 100644
--- a/examples/blog/go.mod
+++ b/examples/blog/go.mod
@@ -5,35 +5,10 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
 require (
-	github.com/BurntSushi/toml v1.6.0 // indirect
-	github.com/a-h/templ v0.3.1020 // indirect
-	github.com/tdewolff/parse/v2 v2.8.13 // indirect
-)
-
-require (
-	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
-	github.com/andybalholm/brotli v1.1.0 // indirect
-	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
-	github.com/cli/browser v1.3.0 // indirect
-	github.com/fatih/color v1.16.0 // indirect
-	github.com/fsnotify/fsnotify v1.7.0 // indirect
 	github.com/gsxhq/gsx v0.0.0
 	github.com/jackielii/ctxkey v1.0.1 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/natefinch/atomic v1.0.1 // indirect
-	golang.org/x/mod v0.37.0 // indirect
-	golang.org/x/net v0.56.0 // indirect
-	golang.org/x/sync v0.21.0 // indirect
-	golang.org/x/sys v0.46.0 // indirect
-	golang.org/x/tools v0.46.0 // indirect
 )
 
 replace github.com/jackielii/structpages => ../..
 
-tool (
-	github.com/a-h/templ/cmd/templ
-	github.com/gsxhq/gsx/cmd/gsx
-)
-
 replace github.com/gsxhq/gsx => /Users/jackieli/personal/gsxhq/gsx
diff --git a/examples/blog/go.sum b/examples/blog/go.sum
index 00746e7..2108c87 100644
--- a/examples/blog/go.sum
+++ b/examples/blog/go.sum
@@ -1,51 +1,4 @@
-github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
-github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
-github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
-github.com/a-h/templ v0.3.1020/go.mod h1:A2DlK61v+K+NRoGnhmYbNYVmtYHcFO5/AisMvBdDxTM=
-github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
-github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
-github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
-github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
-github.com/cli/browser v1.3.0 h1:LejqCrpWr+1pRqmEPDGnTZOjsMe7sehifLynZJuqJpo=
-github.com/cli/browser v1.3.0/go.mod h1:HH8s+fOAxjhQoBUAsKuPCbqUuxZDhQ2/aD+SzsEfBTk=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
-github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
-github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
-github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/jackielii/ctxkey v1.0.1 h1:CcgbR+fQbrzZJWxI/7Ec4EhzUbmTU1sfI1gV7MAgjIg=
 github.com/jackielii/ctxkey v1.0.1/go.mod h1:fo4HOwrvSnc3n8o5qZ5L+FVcSyQn+d67CCnlEbH24uc=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
-github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/natefinch/atomic v1.0.1 h1:ZPYKxkqQOx3KZ+RsbnP/YsgvxWQPGxjC0oBt2AhwV0A=
-github.com/natefinch/atomic v1.0.1/go.mod h1:N/D/ELrljoqDyT3rZrsUmtsuzvHkeB/wWjHV22AZRbM=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
-github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
-github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
-github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
-github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
-github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
-golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
-golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
-golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
-golang.org/x/net v0.56.0/go.mod h1:D3Ku6r+V6JROoZK144D2XfMHFcMq/0zSfLelVTCFKec=
-golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
-golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
-golang.org/x/sys v0.46.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/tools v0.46.0 h1:7jTurBkPZu4moS/Uy4OQT1M+QBlsj3wejyZwsT8Z7rk=
-golang.org/x/tools v0.46.0/go.mod h1:FrD85F8l+NWL+9XWBSyVSHO6Ne4jutsfIFba7AWQ5Ys=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/examples/htmx-render-target/go.mod b/examples/htmx-render-target/go.mod
index ebf3fc0..b714bd1 100644
--- a/examples/htmx-render-target/go.mod
+++ b/examples/htmx-render-target/go.mod
@@ -5,35 +5,10 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0
 
 require (
-	github.com/BurntSushi/toml v1.6.0 // indirect
-	github.com/a-h/templ v0.3.1020 // indirect
-	github.com/tdewolff/parse/v2 v2.8.13 // indirect
-)
-
-require (
-	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
-	github.com/andybalholm/brotli v1.1.0 // indirect
-	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
-	github.com/cli/browser v1.3.0 // indirect
-	github.com/fatih/color v1.16.0 // indirect
-	github.com/fsnotify/fsnotify v1.7.0 // indirect
 	github.com/gsxhq/gsx v0.0.0
 	github.com/jackielii/ctxkey v1.0.1 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/natefinch/atomic v1.0.1 // indirect
-	golang.org/x/mod v0.37.0 // indirect
-	golang.org/x/net v0.56.0 // indirect
-	golang.org/x/sync v0.21.0 // indirect
-	golang.org/x/sys v0.46.0 // indirect
-	golang.org/x/tools v0.46.0 // indirect
 )
 
 replace github.com/jackielii/structpages => ../..
 
-tool (
-	github.com/a-h/templ/cmd/templ
-	github.com/gsxhq/gsx/cmd/gsx
-)
-
 replace github.com/gsxhq/gsx => /Users/jackieli/personal/gsxhq/gsx
diff --git a/examples/htmx-render-target/go.sum b/examples/htmx-render-target/go.sum
index 00746e7..2108c87 100644
--- a/examples/htmx-render-target/go.sum
+++ b/examples/htmx-render-target/go.sum
@@ -1,51 +1,4 @@
-github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
-github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
-github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
-github.com/a-h/templ v0.3.1020/go.mod h1:A2DlK61v+K+NRoGnhmYbNYVmtYHcFO5/AisMvBdDxTM=
-github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
-github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
-github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
-github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
-github.com/cli/browser v1.3.0 h1:LejqCrpWr+1pRqmEPDGnTZOjsMe7sehifLynZJuqJpo=
-github.com/cli/browser v1.3.0/go.mod h1:HH8s+fOAxjhQoBUAsKuPCbqUuxZDhQ2/aD+SzsEfBTk=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
-github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
-github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
-github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/jackielii/ctxkey v1.0.1 h1:CcgbR+fQbrzZJWxI/7Ec4EhzUbmTU1sfI1gV7MAgjIg=
 github.com/jackielii/ctxkey v1.0.1/go.mod h1:fo4HOwrvSnc3n8o5qZ5L+FVcSyQn+d67CCnlEbH24uc=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
-github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/natefinch/atomic v1.0.1 h1:ZPYKxkqQOx3KZ+RsbnP/YsgvxWQPGxjC0oBt2AhwV0A=
-github.com/natefinch/atomic v1.0.1/go.mod h1:N/D/ELrljoqDyT3rZrsUmtsuzvHkeB/wWjHV22AZRbM=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
-github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
-github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
-github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
-github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
-github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
-golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
-golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
-golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
-golang.org/x/net v0.56.0/go.mod h1:D3Ku6r+V6JROoZK144D2XfMHFcMq/0zSfLelVTCFKec=
-golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
-golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
-golang.org/x/sys v0.46.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/tools v0.46.0 h1:7jTurBkPZu4moS/Uy4OQT1M+QBlsj3wejyZwsT8Z7rk=
-golang.org/x/tools v0.46.0/go.mod h1:FrD85F8l+NWL+9XWBSyVSHO6Ne4jutsfIFba7AWQ5Ys=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/examples/htmx/go.mod b/examples/htmx/go.mod
index 63155cf..8cbbdda 100644
--- a/examples/htmx/go.mod
+++ b/examples/htmx/go.mod
@@ -5,35 +5,10 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
 require (
-	github.com/BurntSushi/toml v1.6.0 // indirect
-	github.com/a-h/templ v0.3.1020 // indirect
-	github.com/tdewolff/parse/v2 v2.8.13 // indirect
-)
-
-require (
-	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
-	github.com/andybalholm/brotli v1.1.0 // indirect
-	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
-	github.com/cli/browser v1.3.0 // indirect
-	github.com/fatih/color v1.16.0 // indirect
-	github.com/fsnotify/fsnotify v1.7.0 // indirect
 	github.com/gsxhq/gsx v0.0.0
 	github.com/jackielii/ctxkey v1.0.1 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/natefinch/atomic v1.0.1 // indirect
-	golang.org/x/mod v0.37.0 // indirect
-	golang.org/x/net v0.56.0 // indirect
-	golang.org/x/sync v0.21.0 // indirect
-	golang.org/x/sys v0.46.0 // indirect
-	golang.org/x/tools v0.46.0 // indirect
 )
 
 replace github.com/jackielii/structpages => ../..
 
-tool (
-	github.com/a-h/templ/cmd/templ
-	github.com/gsxhq/gsx/cmd/gsx
-)
-
 replace github.com/gsxhq/gsx => ../../../gsxhq/gsx
diff --git a/examples/htmx/go.sum b/examples/htmx/go.sum
index 00746e7..2108c87 100644
--- a/examples/htmx/go.sum
+++ b/examples/htmx/go.sum
@@ -1,51 +1,4 @@
-github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
-github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
-github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
-github.com/a-h/templ v0.3.1020/go.mod h1:A2DlK61v+K+NRoGnhmYbNYVmtYHcFO5/AisMvBdDxTM=
-github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
-github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
-github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
-github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
-github.com/cli/browser v1.3.0 h1:LejqCrpWr+1pRqmEPDGnTZOjsMe7sehifLynZJuqJpo=
-github.com/cli/browser v1.3.0/go.mod h1:HH8s+fOAxjhQoBUAsKuPCbqUuxZDhQ2/aD+SzsEfBTk=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
-github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
-github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
-github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/jackielii/ctxkey v1.0.1 h1:CcgbR+fQbrzZJWxI/7Ec4EhzUbmTU1sfI1gV7MAgjIg=
 github.com/jackielii/ctxkey v1.0.1/go.mod h1:fo4HOwrvSnc3n8o5qZ5L+FVcSyQn+d67CCnlEbH24uc=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
-github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/natefinch/atomic v1.0.1 h1:ZPYKxkqQOx3KZ+RsbnP/YsgvxWQPGxjC0oBt2AhwV0A=
-github.com/natefinch/atomic v1.0.1/go.mod h1:N/D/ELrljoqDyT3rZrsUmtsuzvHkeB/wWjHV22AZRbM=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
-github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
-github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
-github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
-github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
-github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
-golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
-golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
-golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
-golang.org/x/net v0.56.0/go.mod h1:D3Ku6r+V6JROoZK144D2XfMHFcMq/0zSfLelVTCFKec=
-golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
-golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
-golang.org/x/sys v0.46.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/tools v0.46.0 h1:7jTurBkPZu4moS/Uy4OQT1M+QBlsj3wejyZwsT8Z7rk=
-golang.org/x/tools v0.46.0/go.mod h1:FrD85F8l+NWL+9XWBSyVSHO6Ne4jutsfIFba7AWQ5Ys=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/examples/lint-misuse/go.mod b/examples/lint-misuse/go.mod
index bf7bb3e..f9cfd8b 100644
--- a/examples/lint-misuse/go.mod
+++ b/examples/lint-misuse/go.mod
@@ -4,14 +4,6 @@ go 1.26.1
 
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
-require (
-	github.com/BurntSushi/toml v1.6.0 // indirect
-	github.com/tdewolff/parse/v2 v2.8.13 // indirect
-	golang.org/x/mod v0.37.0 // indirect
-	golang.org/x/sync v0.21.0 // indirect
-	golang.org/x/tools v0.46.0 // indirect
-)
-
 require (
 	github.com/gsxhq/gsx v0.0.0
 	github.com/jackielii/ctxkey v1.0.1 // indirect
@@ -20,5 +12,3 @@ require (
 replace github.com/jackielii/structpages => ../..
 
 replace github.com/gsxhq/gsx => /Users/jackieli/personal/gsxhq/gsx
-
-tool github.com/gsxhq/gsx/cmd/gsx
diff --git a/examples/lint-misuse/go.sum b/examples/lint-misuse/go.sum
index 2f0d490..2108c87 100644
--- a/examples/lint-misuse/go.sum
+++ b/examples/lint-misuse/go.sum
@@ -1,16 +1,4 @@
-github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
-github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/jackielii/ctxkey v1.0.1 h1:CcgbR+fQbrzZJWxI/7Ec4EhzUbmTU1sfI1gV7MAgjIg=
 github.com/jackielii/ctxkey v1.0.1/go.mod h1:fo4HOwrvSnc3n8o5qZ5L+FVcSyQn+d67CCnlEbH24uc=
-github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
-github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
-github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
-github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
-golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
-golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
-golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
-golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
-golang.org/x/tools v0.46.0 h1:7jTurBkPZu4moS/Uy4OQT1M+QBlsj3wejyZwsT8Z7rk=
-golang.org/x/tools v0.46.0/go.mod h1:FrD85F8l+NWL+9XWBSyVSHO6Ne4jutsfIFba7AWQ5Ys=
diff --git a/examples/simple/go.mod b/examples/simple/go.mod
index 3292a74..d1de761 100644
--- a/examples/simple/go.mod
+++ b/examples/simple/go.mod
@@ -5,35 +5,10 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0-00010101000000-000000000000
 
 require (
-	github.com/BurntSushi/toml v1.6.0 // indirect
-	github.com/a-h/templ v0.3.1020 // indirect
-	github.com/tdewolff/parse/v2 v2.8.13 // indirect
-)
-
-require (
-	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
-	github.com/andybalholm/brotli v1.1.0 // indirect
-	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
-	github.com/cli/browser v1.3.0 // indirect
-	github.com/fatih/color v1.16.0 // indirect
-	github.com/fsnotify/fsnotify v1.7.0 // indirect
 	github.com/gsxhq/gsx v0.0.0
 	github.com/jackielii/ctxkey v1.0.1 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/natefinch/atomic v1.0.1 // indirect
-	golang.org/x/mod v0.37.0 // indirect
-	golang.org/x/net v0.56.0 // indirect
-	golang.org/x/sync v0.21.0 // indirect
-	golang.org/x/sys v0.46.0 // indirect
-	golang.org/x/tools v0.46.0 // indirect
 )
 
 replace github.com/jackielii/structpages => ../..
 
-tool (
-	github.com/a-h/templ/cmd/templ
-	github.com/gsxhq/gsx/cmd/gsx
-)
-
 replace github.com/gsxhq/gsx => ../../../gsxhq/gsx
diff --git a/examples/simple/go.sum b/examples/simple/go.sum
index 00746e7..2108c87 100644
--- a/examples/simple/go.sum
+++ b/examples/simple/go.sum
@@ -1,51 +1,4 @@
-github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
-github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
-github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
-github.com/a-h/templ v0.3.1020/go.mod h1:A2DlK61v+K+NRoGnhmYbNYVmtYHcFO5/AisMvBdDxTM=
-github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
-github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
-github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
-github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
-github.com/cli/browser v1.3.0 h1:LejqCrpWr+1pRqmEPDGnTZOjsMe7sehifLynZJuqJpo=
-github.com/cli/browser v1.3.0/go.mod h1:HH8s+fOAxjhQoBUAsKuPCbqUuxZDhQ2/aD+SzsEfBTk=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
-github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
-github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
-github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/jackielii/ctxkey v1.0.1 h1:CcgbR+fQbrzZJWxI/7Ec4EhzUbmTU1sfI1gV7MAgjIg=
 github.com/jackielii/ctxkey v1.0.1/go.mod h1:fo4HOwrvSnc3n8o5qZ5L+FVcSyQn+d67CCnlEbH24uc=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
-github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/natefinch/atomic v1.0.1 h1:ZPYKxkqQOx3KZ+RsbnP/YsgvxWQPGxjC0oBt2AhwV0A=
-github.com/natefinch/atomic v1.0.1/go.mod h1:N/D/ELrljoqDyT3rZrsUmtsuzvHkeB/wWjHV22AZRbM=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
-github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
-github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
-github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
-github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
-github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
-golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
-golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
-golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
-golang.org/x/net v0.56.0/go.mod h1:D3Ku6r+V6JROoZK144D2XfMHFcMq/0zSfLelVTCFKec=
-golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
-golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
-golang.org/x/sys v0.46.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/tools v0.46.0 h1:7jTurBkPZu4moS/Uy4OQT1M+QBlsj3wejyZwsT8Z7rk=
-golang.org/x/tools v0.46.0/go.mod h1:FrD85F8l+NWL+9XWBSyVSHO6Ne4jutsfIFba7AWQ5Ys=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/examples/todo/go.mod b/examples/todo/go.mod
index 27bf6ea..0c703ab 100644
--- a/examples/todo/go.mod
+++ b/examples/todo/go.mod
@@ -5,35 +5,10 @@ go 1.26.1
 require github.com/jackielii/structpages v0.0.0
 
 require (
-	github.com/BurntSushi/toml v1.6.0 // indirect
-	github.com/a-h/templ v0.3.1020 // indirect
-	github.com/tdewolff/parse/v2 v2.8.13 // indirect
-)
-
-require (
-	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
-	github.com/andybalholm/brotli v1.1.0 // indirect
-	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
-	github.com/cli/browser v1.3.0 // indirect
-	github.com/fatih/color v1.16.0 // indirect
-	github.com/fsnotify/fsnotify v1.7.0 // indirect
 	github.com/gsxhq/gsx v0.0.0
 	github.com/jackielii/ctxkey v1.0.1 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/natefinch/atomic v1.0.1 // indirect
-	golang.org/x/mod v0.37.0 // indirect
-	golang.org/x/net v0.56.0 // indirect
-	golang.org/x/sync v0.21.0 // indirect
-	golang.org/x/sys v0.46.0 // indirect
-	golang.org/x/tools v0.46.0 // indirect
 )
 
 replace github.com/jackielii/structpages => ../..
 
-tool (
-	github.com/a-h/templ/cmd/templ
-	github.com/gsxhq/gsx/cmd/gsx
-)
-
 replace github.com/gsxhq/gsx => /Users/jackieli/personal/gsxhq/gsx
diff --git a/examples/todo/go.sum b/examples/todo/go.sum
index 00746e7..2108c87 100644
--- a/examples/todo/go.sum
+++ b/examples/todo/go.sum
@@ -1,51 +1,4 @@
-github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
-github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ69NYAb5jbGNfHanvm1+iYlo=
-github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
-github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
-github.com/a-h/templ v0.3.1020/go.mod h1:A2DlK61v+K+NRoGnhmYbNYVmtYHcFO5/AisMvBdDxTM=
-github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
-github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
-github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
-github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
-github.com/cli/browser v1.3.0 h1:LejqCrpWr+1pRqmEPDGnTZOjsMe7sehifLynZJuqJpo=
-github.com/cli/browser v1.3.0/go.mod h1:HH8s+fOAxjhQoBUAsKuPCbqUuxZDhQ2/aD+SzsEfBTk=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
-github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
-github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
-github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/jackielii/ctxkey v1.0.1 h1:CcgbR+fQbrzZJWxI/7Ec4EhzUbmTU1sfI1gV7MAgjIg=
 github.com/jackielii/ctxkey v1.0.1/go.mod h1:fo4HOwrvSnc3n8o5qZ5L+FVcSyQn+d67CCnlEbH24uc=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
-github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/natefinch/atomic v1.0.1 h1:ZPYKxkqQOx3KZ+RsbnP/YsgvxWQPGxjC0oBt2AhwV0A=
-github.com/natefinch/atomic v1.0.1/go.mod h1:N/D/ELrljoqDyT3rZrsUmtsuzvHkeB/wWjHV22AZRbM=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
-github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
-github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5ick=
-github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
-github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
-github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
-golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
-golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
-golang.org/x/net v0.56.0 h1:Rw8j/hFzGvJUZwNBXnAtf5sVDVt+65SK2C7IxCxZt5o=
-golang.org/x/net v0.56.0/go.mod h1:D3Ku6r+V6JROoZK144D2XfMHFcMq/0zSfLelVTCFKec=
-golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
-golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
-golang.org/x/sys v0.46.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/tools v0.46.0 h1:7jTurBkPZu4moS/Uy4OQT1M+QBlsj3wejyZwsT8Z7rk=
-golang.org/x/tools v0.46.0/go.mod h1:FrD85F8l+NWL+9XWBSyVSHO6Ne4jutsfIFba7AWQ5Ys=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

From a88b6fb6f25b986d19251721a6611f4ee95af1ab Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Fri, 26 Jun 2026 07:13:28 +0100
Subject: [PATCH 08/13] examples: gsx.toml uses renamed [filters] key (was
 [aliases])

Match the renamed gsx config schema (gsx [aliases] -> [filters]). Also fix the
stale 'go tool gsx' comment to 'gsx generate .' (the tool directive was removed).
---
 gsx.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/gsx.toml b/gsx.toml
index 316bec6..2e544d0 100644
--- a/gsx.toml
+++ b/gsx.toml
@@ -6,8 +6,8 @@
 #
 # The stock `gsx` binary discovers this file by walking up from the example dir
 # to the git repo root, so no per-example cmd/gen generator is needed. Generate
-# with:  go tool gsx generate .
-[aliases]
+# with:  gsx generate .
+[filters]
 url    = "github.com/jackielii/structpages.URLFor"
 id     = "github.com/jackielii/structpages.ID"
 target = "github.com/jackielii/structpages.IDTarget"

From 4f3e48f171016d12c5ca24180bd6d0f2666b8156 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Fri, 26 Jun 2026 11:45:49 +0100
Subject: [PATCH 09/13] .

---
 examples/htmx-render-target/pages.gsx  |  12 +-
 examples/htmx-render-target/pages.x.go | 376 +++++++++----------------
 2 files changed, 131 insertions(+), 257 deletions(-)

diff --git a/examples/htmx-render-target/pages.gsx b/examples/htmx-render-target/pages.gsx
index 2d65924..aaee61e 100644
--- a/examples/htmx-render-target/pages.gsx
+++ b/examples/htmx-render-target/pages.gsx
@@ -1,17 +1,13 @@
 package main
 
-import (
-	"fmt"
-)
-
 // Shared standalone function components (can be used across multiple pages).
 // These demonstrate the power of RenderTarget — no wrapper methods needed.
 
 component UserStatsWidget(stats UserStats) {
 	<div class="widget">
 		<h3>User Statistics</h3>
-		<p>Active Users: { fmt.Sprintf("%d", stats.ActiveUsers) }</p>
-		<p>New Today: { fmt.Sprintf("%d", stats.NewToday) }</p>
+		<p>Active Users: { stats.ActiveUsers }</p>
+		<p>New Today: { stats.NewToday }</p>
 		<button
 			type="button"
 			hx-get={ dashboard{} |> url }
@@ -25,10 +21,10 @@ component SalesChartWidget(data SalesData) {
 		<h3>Sales Chart</h3>
 		<div class="chart">
 			{ for _, point := range data.Points {
-				<div class="bar" data-h={ fmt.Sprint(point.Value) } style="width: 30px; background: blue; display: inline-block; margin: 2px;"></div>
+				<div class="bar" data-h={ point.Value } style="width: 30px; background: blue; display: inline-block; margin: 2px;"></div>
 			} }
 		</div>
-		<p>Total Sales: ${ fmt.Sprintf("%.2f", data.Total) }</p>
+		<p>Total Sales: ${ data.Total |> format("%.2f") }</p>
 		<button
 			type="button"
 			hx-get={ dashboard{} |> url }
diff --git a/examples/htmx-render-target/pages.x.go b/examples/htmx-render-target/pages.x.go
index 62fc6c0..7922f49 100644
--- a/examples/htmx-render-target/pages.x.go
+++ b/examples/htmx-render-target/pages.x.go
@@ -4,45 +4,37 @@ package main
 
 import (
 	"context"
-	"fmt"
 	"io"
+	"strconv"
 
 	"github.com/gsxhq/gsx"
+	_gsxstd "github.com/gsxhq/gsx/std"
 	_gsxf0 "github.com/jackielii/structpages"
 )
 
 // Shared standalone function components (can be used across multiple pages).
 // These demonstrate the power of RenderTarget — no wrapper methods needed.
 
+//line pages.gsx:6:1
 func UserStatsWidget(stats UserStats) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:11:2
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"widget\"")
-		_gsxgw.S(">")
-//line pages.gsx:12:3
-		_gsxgw.S("<h3")
-		_gsxgw.S(">")
-		_gsxgw.S("User Statistics")
-		_gsxgw.S("</h3>")
-//line pages.gsx:13:3
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-		_gsxgw.S("Active Users: ")
-//line pages.gsx:13:20
-		_gsxgw.Text(string(fmt.Sprintf("%d", stats.ActiveUsers)))
+//line pages.gsx:7:2
+		_gsxgw.S("<div class=\"widget\">")
+//line pages.gsx:8:3
+		_gsxgw.S("<h3>User Statistics</h3>")
+//line pages.gsx:9:3
+		_gsxgw.S("<p>Active Users: ")
+//line pages.gsx:9:20
+		_gsxgw.Text(strconv.FormatInt(int64(stats.ActiveUsers), 10))
 		_gsxgw.S("</p>")
-//line pages.gsx:14:3
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-		_gsxgw.S("New Today: ")
-//line pages.gsx:14:17
-		_gsxgw.Text(string(fmt.Sprintf("%d", stats.NewToday)))
+//line pages.gsx:10:3
+		_gsxgw.S("<p>New Today: ")
+//line pages.gsx:10:17
+		_gsxgw.Text(strconv.FormatInt(int64(stats.NewToday), 10))
 		_gsxgw.S("</p>")
-//line pages.gsx:15:3
-		_gsxgw.S("<button")
-		_gsxgw.S(" type=\"button\"")
+//line pages.gsx:11:3
+		_gsxgw.S("<button type=\"button\"")
 		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (dashboard{}))
 		if _gsxerr != nil {
 			return _gsxerr
@@ -56,54 +48,36 @@ func UserStatsWidget(stats UserStats) gsx.Node {
 		}
 		_gsxgw.S(" hx-target=\"")
 		_gsxgw.AttrValue(string(_gsxv1))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Refresh Stats")
-		_gsxgw.S("</button>")
-		_gsxgw.S("</div>")
+		_gsxgw.S("\">Refresh Stats</button></div>")
 		return _gsxgw.Err()
 	})
 }
 
+//line pages.gsx:19:1
 func SalesChartWidget(data SalesData) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:24:2
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"widget\"")
-		_gsxgw.S(">")
-//line pages.gsx:25:3
-		_gsxgw.S("<h3")
-		_gsxgw.S(">")
-		_gsxgw.S("Sales Chart")
-		_gsxgw.S("</h3>")
-//line pages.gsx:26:3
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"chart\"")
-		_gsxgw.S(">")
-//line pages.gsx:27:4
+//line pages.gsx:20:2
+		_gsxgw.S("<div class=\"widget\">")
+//line pages.gsx:21:3
+		_gsxgw.S("<h3>Sales Chart</h3>")
+//line pages.gsx:22:3
+		_gsxgw.S("<div class=\"chart\">")
+//line pages.gsx:23:4
 		for _, point := range data.Points {
-//line pages.gsx:28:5
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"bar\"")
-			_gsxgw.S(" data-h=\"")
-			_gsxgw.AttrValue(string(fmt.Sprint(point.Value)))
-			_gsxgw.S("\"")
-			_gsxgw.S(" style=\"width: 30px; background: blue; display: inline-block; margin: 2px;\"")
-			_gsxgw.S(">")
-			_gsxgw.S("</div>")
+//line pages.gsx:24:5
+			_gsxgw.S("<div class=\"bar\" data-h=\"")
+			_gsxgw.AttrValue(strconv.FormatInt(int64(point.Value), 10))
+			_gsxgw.S("\" style=\"width: 30px; background: blue; display: inline-block; margin: 2px;\"></div>")
 		}
 		_gsxgw.S("</div>")
-//line pages.gsx:31:3
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-		_gsxgw.S("Total Sales: $")
-//line pages.gsx:31:20
-		_gsxgw.Text(string(fmt.Sprintf("%.2f", data.Total)))
+//line pages.gsx:27:3
+		_gsxgw.S("<p>Total Sales: $")
+//line pages.gsx:27:20
+		_gsxgw.Text(string(_gsxstd.Format((data.Total), "%.2f")))
 		_gsxgw.S("</p>")
-//line pages.gsx:32:3
-		_gsxgw.S("<button")
-		_gsxgw.S(" type=\"button\"")
+//line pages.gsx:28:3
+		_gsxgw.S("<button type=\"button\"")
 		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (dashboard{}))
 		if _gsxerr != nil {
 			return _gsxerr
@@ -117,11 +91,7 @@ func SalesChartWidget(data SalesData) gsx.Node {
 		}
 		_gsxgw.S(" hx-target=\"")
 		_gsxgw.AttrValue(string(_gsxv3))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Refresh Sales")
-		_gsxgw.S("</button>")
-		_gsxgw.S("</div>")
+		_gsxgw.S("\">Refresh Sales</button></div>")
 		return _gsxgw.Err()
 	})
 }
@@ -131,48 +101,38 @@ type NotificationsListProps struct {
 	Attrs         gsx.Attrs
 }
 
+//line pages.gsx:36:1
 func NotificationsList(_gsxp NotificationsListProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		notifications := _gsxp.Notifications
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:41:2
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"")
+//line pages.gsx:37:2
+		_gsxgw.S("<div class=\"")
 		_gsxgw.Class(gsx.Class("widget"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line pages.gsx:42:3
-		_gsxgw.S("<h3")
-		_gsxgw.S(">")
-		_gsxgw.S("Recent Notifications")
-		_gsxgw.S("</h3>")
-//line pages.gsx:43:3
-		_gsxgw.S("<ul")
-		_gsxgw.S(">")
-//line pages.gsx:44:4
+//line pages.gsx:38:3
+		_gsxgw.S("<h3>Recent Notifications</h3>")
+//line pages.gsx:39:3
+		_gsxgw.S("<ul>")
+//line pages.gsx:40:4
 		for _, n := range notifications {
-//line pages.gsx:45:5
-			_gsxgw.S("<li")
-			_gsxgw.S(">")
-//line pages.gsx:45:9
+//line pages.gsx:41:5
+			_gsxgw.S("<li>")
+//line pages.gsx:41:9
 			_gsxgw.Text(string(n.Message))
 			_gsxgw.S(" ")
-//line pages.gsx:45:23
-			_gsxgw.S("<small")
-			_gsxgw.S(">")
-			_gsxgw.S("(")
-//line pages.gsx:45:31
+//line pages.gsx:41:23
+			_gsxgw.S("<small>(")
+//line pages.gsx:41:31
 			_gsxgw.Text(string(n.Time.Format("15:04")))
-			_gsxgw.S(")")
-			_gsxgw.S("</small>")
-			_gsxgw.S("</li>")
+			_gsxgw.S(")</small></li>")
 		}
 		_gsxgw.S("</ul>")
-//line pages.gsx:48:3
-		_gsxgw.S("<button")
-		_gsxgw.S(" type=\"button\"")
+//line pages.gsx:44:3
+		_gsxgw.S("<button type=\"button\"")
 		_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (dashboard{}))
 		if _gsxerr != nil {
 			return _gsxerr
@@ -186,11 +146,7 @@ func NotificationsList(_gsxp NotificationsListProps) gsx.Node {
 		}
 		_gsxgw.S(" hx-target=\"")
 		_gsxgw.AttrValue(string(_gsxv5))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Refresh Notifications")
-		_gsxgw.S("</button>")
-		_gsxgw.S("</div>")
+		_gsxgw.S("\">Refresh Notifications</button></div>")
 		return _gsxgw.Err()
 	})
 }
@@ -199,32 +155,22 @@ func NotificationsList(_gsxp NotificationsListProps) gsx.Node {
 
 type dashboard struct{}
 
+//line pages.gsx:56:1
 func (p dashboard) Page(props dashboardData) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:61:2
+//line pages.gsx:57:2
 		_gsxgw.Node(ctx, Html(HtmlProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:62:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(">")
-			_gsxgw.S("Dashboard")
-			_gsxgw.S("</h1>")
-//line pages.gsx:63:3
-			_gsxgw.S("<p")
-			_gsxgw.S(">")
-			_gsxgw.S("This example demonstrates the RenderTarget API with standalone function components.")
-			_gsxgw.S("</p>")
-//line pages.gsx:64:3
-			_gsxgw.S("<p")
-			_gsxgw.S(">")
-			_gsxgw.S("Click \"Refresh\" buttons to see HTMX partial updates — each widget loads only its own data!")
-			_gsxgw.S("</p>")
-//line pages.gsx:65:3
-			_gsxgw.S("<div")
-			_gsxgw.S(" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;\"")
-			_gsxgw.S(">")
-//line pages.gsx:66:4
+//line pages.gsx:58:3
+			_gsxgw.S("<h1>Dashboard</h1>")
+//line pages.gsx:59:3
+			_gsxgw.S("<p>This example demonstrates the RenderTarget API with standalone function components.</p>")
+//line pages.gsx:60:3
+			_gsxgw.S("<p>Click \"Refresh\" buttons to see HTMX partial updates — each widget loads only its own data!</p>")
+//line pages.gsx:61:3
+			_gsxgw.S("<div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;\">")
+//line pages.gsx:62:4
 			_gsxgw.S("<div")
 			_gsxv6, _gsxerr := _gsxf0.ID(ctx, (UserStatsWidget))
 			if _gsxerr != nil {
@@ -232,12 +178,11 @@ func (p dashboard) Page(props dashboardData) gsx.Node {
 			}
 			_gsxgw.S(" id=\"")
 			_gsxgw.AttrValue(string(_gsxv6))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
-//line pages.gsx:67:5
+			_gsxgw.S("\">")
+//line pages.gsx:63:5
 			_gsxgw.Node(ctx, UserStatsWidget(props.Stats))
 			_gsxgw.S("</div>")
-//line pages.gsx:69:4
+//line pages.gsx:65:4
 			_gsxgw.S("<div")
 			_gsxv7, _gsxerr := _gsxf0.ID(ctx, (SalesChartWidget))
 			if _gsxerr != nil {
@@ -245,12 +190,11 @@ func (p dashboard) Page(props dashboardData) gsx.Node {
 			}
 			_gsxgw.S(" id=\"")
 			_gsxgw.AttrValue(string(_gsxv7))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
-//line pages.gsx:70:5
+			_gsxgw.S("\">")
+//line pages.gsx:66:5
 			_gsxgw.Node(ctx, SalesChartWidget(props.Sales))
 			_gsxgw.S("</div>")
-//line pages.gsx:72:4
+//line pages.gsx:68:4
 			_gsxgw.S("<div")
 			_gsxv8, _gsxerr := _gsxf0.ID(ctx, (NotificationsList))
 			if _gsxerr != nil {
@@ -258,81 +202,36 @@ func (p dashboard) Page(props dashboardData) gsx.Node {
 			}
 			_gsxgw.S(" id=\"")
 			_gsxgw.AttrValue(string(_gsxv8))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
-//line pages.gsx:73:5
+			_gsxgw.S("\">")
+//line pages.gsx:69:5
 			_gsxgw.Node(ctx, NotificationsList(NotificationsListProps{Notifications: props.Notifications}))
-			_gsxgw.S("</div>")
-			_gsxgw.S("</div>")
-//line pages.gsx:76:3
-			_gsxgw.S("<div")
-			_gsxgw.S(" style=\"margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 4px;\"")
-			_gsxgw.S(">")
-//line pages.gsx:77:4
-			_gsxgw.S("<h4")
-			_gsxgw.S(">")
-			_gsxgw.S("How it works:")
-			_gsxgw.S("</h4>")
-//line pages.gsx:78:4
-			_gsxgw.S("<ul")
-			_gsxgw.S(">")
+			_gsxgw.S("</div></div>")
+//line pages.gsx:72:3
+			_gsxgw.S("<div style=\"margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 4px;\">")
+//line pages.gsx:73:4
+			_gsxgw.S("<h4>How it works:</h4>")
+//line pages.gsx:74:4
+			_gsxgw.S("<ul>")
+//line pages.gsx:75:5
+			_gsxgw.S("<li>✅ ")
+//line pages.gsx:75:13
+			_gsxgw.S("<strong>Standalone functions</strong> — UserStatsWidget, SalesChartWidget, NotificationsList are shared components</li>")
+//line pages.gsx:76:5
+			_gsxgw.S("<li>✅ ")
+//line pages.gsx:76:13
+			_gsxgw.S("<strong>Conditional loading</strong> — Props checks target.Is() and loads only needed data</li>")
+//line pages.gsx:77:5
+			_gsxgw.S("<li>✅ ")
+//line pages.gsx:77:13
+			_gsxgw.S("<strong>RenderComponent (direct)</strong> — construct the gsx component with its props struct and pass directly</li>")
+//line pages.gsx:78:5
+			_gsxgw.S("<li>✅ ")
+//line pages.gsx:78:13
+			_gsxgw.S("<strong>No wrapper methods</strong> — No need to create dashboard.UserStats() method!</li>")
 //line pages.gsx:79:5
-			_gsxgw.S("<li")
-			_gsxgw.S(">")
-			_gsxgw.S("✅ ")
+			_gsxgw.S("<li>✅ ")
 //line pages.gsx:79:13
-			_gsxgw.S("<strong")
-			_gsxgw.S(">")
-			_gsxgw.S("Standalone functions")
-			_gsxgw.S("</strong>")
-			_gsxgw.S(" — UserStatsWidget, SalesChartWidget, NotificationsList are shared components")
-			_gsxgw.S("</li>")
-//line pages.gsx:80:5
-			_gsxgw.S("<li")
-			_gsxgw.S(">")
-			_gsxgw.S("✅ ")
-//line pages.gsx:80:13
-			_gsxgw.S("<strong")
-			_gsxgw.S(">")
-			_gsxgw.S("Conditional loading")
-			_gsxgw.S("</strong>")
-			_gsxgw.S(" — Props checks target.Is() and loads only needed data")
-			_gsxgw.S("</li>")
-//line pages.gsx:81:5
-			_gsxgw.S("<li")
-			_gsxgw.S(">")
-			_gsxgw.S("✅ ")
-//line pages.gsx:81:13
-			_gsxgw.S("<strong")
-			_gsxgw.S(">")
-			_gsxgw.S("RenderComponent (direct)")
-			_gsxgw.S("</strong>")
-			_gsxgw.S(" — construct the gsx component with its props struct and pass directly")
-			_gsxgw.S("</li>")
-//line pages.gsx:82:5
-			_gsxgw.S("<li")
-			_gsxgw.S(">")
-			_gsxgw.S("✅ ")
-//line pages.gsx:82:13
-			_gsxgw.S("<strong")
-			_gsxgw.S(">")
-			_gsxgw.S("No wrapper methods")
-			_gsxgw.S("</strong>")
-			_gsxgw.S(" — No need to create dashboard.UserStats() method!")
-			_gsxgw.S("</li>")
-//line pages.gsx:83:5
-			_gsxgw.S("<li")
-			_gsxgw.S(">")
-			_gsxgw.S("✅ ")
-//line pages.gsx:83:13
-			_gsxgw.S("<strong")
-			_gsxgw.S(">")
-			_gsxgw.S("HTMX integration")
-			_gsxgw.S("</strong>")
-			_gsxgw.S(" — HTMXRenderTarget automatically handles partial updates")
-			_gsxgw.S("</li>")
-			_gsxgw.S("</ul>")
-			_gsxgw.S("</div>")
+			_gsxgw.S("<strong>HTMX integration</strong> — HTMXRenderTarget automatically handles partial updates</li></ul></div>")
 			return _gsxgw.Err()
 		})}))
 		return _gsxgw.Err()
@@ -345,50 +244,31 @@ type HtmlProps struct {
 	Children gsx.Node
 }
 
+//line pages.gsx:86:1
 func Html(_gsxp HtmlProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		children := _gsxp.Children
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
-//line pages.gsx:92:2
-		_gsxgw.S("<html")
-		_gsxgw.S(" lang=\"en\"")
-		_gsxgw.S(">")
-//line pages.gsx:93:3
-		_gsxgw.S("<head")
-		_gsxgw.S(">")
-//line pages.gsx:94:4
-		_gsxgw.S("<link")
-		_gsxgw.S(" rel=\"stylesheet\"")
-		_gsxgw.S(" href=\"https://unpkg.com/missing.css@1.1.3\"")
-		_gsxgw.S("/>")
-//line pages.gsx:95:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
-//line pages.gsx:96:4
-		_gsxgw.S("<title")
-		_gsxgw.S(">")
-		_gsxgw.S("RenderTarget API Example")
-		_gsxgw.S("</title>")
-//line pages.gsx:97:4
-		_gsxgw.S("<style")
-		_gsxgw.S(">")
-		_gsxgw.S(".widget{padding: 1rem;border: 1px solid #ddd;border-radius: 8px;background: white}.widget h3{margin-top: 0}.chart{display: flex;align-items: flex-end;height: 150px;margin: 1rem 0}")
-		_gsxgw.S("</style>")
-		_gsxgw.S("</head>")
-//line pages.gsx:115:3
-		_gsxgw.S("<body")
-		_gsxgw.S(">")
-//line pages.gsx:116:4
-		_gsxgw.S("<main")
-		_gsxgw.S(">")
-//line pages.gsx:117:5
+//line pages.gsx:88:2
+		_gsxgw.S("<html lang=\"en\">")
+//line pages.gsx:89:3
+		_gsxgw.S("<head>")
+//line pages.gsx:90:4
+		_gsxgw.S("<link rel=\"stylesheet\" href=\"https://unpkg.com/missing.css@1.1.3\"/>")
+//line pages.gsx:91:4
+		_gsxgw.S("<script src=\"https://unpkg.com/htmx.org@2.0.4\"></script>")
+//line pages.gsx:92:4
+		_gsxgw.S("<title>RenderTarget API Example</title>")
+//line pages.gsx:93:4
+		_gsxgw.S("<style>.widget{padding: 1rem;border: 1px solid #ddd;border-radius: 8px;background: white}.widget h3{margin-top: 0}.chart{display: flex;align-items: flex-end;height: 150px;margin: 1rem 0}</style></head>")
+//line pages.gsx:111:3
+		_gsxgw.S("<body>")
+//line pages.gsx:112:4
+		_gsxgw.S("<main>")
+//line pages.gsx:113:5
 		_gsxgw.Node(ctx, children)
-		_gsxgw.S("</main>")
-		_gsxgw.S("</body>")
-		_gsxgw.S("</html>")
+		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
 	})
 }
@@ -397,14 +277,15 @@ type ErrorPageProps struct {
 	Err error
 }
 
+//line pages.gsx:119:1
 func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:124:2
+//line pages.gsx:120:2
 		_gsxgw.Node(ctx, Html(HtmlProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:125:3
+//line pages.gsx:121:3
 			_gsxgw.Node(ctx, ErrorComp(ErrorCompProps{Err: err}))
 			return _gsxgw.Err()
 		})}))
@@ -416,19 +297,16 @@ type ErrorCompProps struct {
 	Err error
 }
 
+//line pages.gsx:125:1
 func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:130:2
-		_gsxgw.S("<h1")
-		_gsxgw.S(">")
-		_gsxgw.S("Error")
-		_gsxgw.S("</h1>")
-//line pages.gsx:131:2
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-//line pages.gsx:131:5
+//line pages.gsx:126:2
+		_gsxgw.S("<h1>Error</h1>")
+//line pages.gsx:127:2
+		_gsxgw.S("<p>")
+//line pages.gsx:127:5
 		_gsxgw.Text(string(err.Error()))
 		_gsxgw.S("</p>")
 		return _gsxgw.Err()

From 654bfd798d8f39e6afbd5efe6cbd4802b06c9339 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Fri, 26 Jun 2026 14:27:40 +0100
Subject: [PATCH 10/13] regen

---
 examples/blog/admin/components.gsx          |  83 ++++--
 examples/blog/admin/components.x.go         | 248 ++++++-----------
 examples/blog/admin/dashboard.gsx           |  28 +-
 examples/blog/admin/dashboard.x.go          |  76 ++---
 examples/blog/admin/login.gsx               |  19 +-
 examples/blog/admin/login.x.go              | 120 +++-----
 examples/blog/admin/posts.gsx               |  34 ++-
 examples/blog/admin/posts.x.go              | 132 +++------
 examples/blog/admin/users.gsx               | 101 ++++---
 examples/blog/admin/users.x.go              | 117 +++-----
 examples/blog/blog/category.gsx             |  10 +-
 examples/blog/blog/category.x.go            |  38 +--
 examples/blog/blog/components.gsx           |  23 +-
 examples/blog/blog/components.x.go          |  83 ++----
 examples/blog/blog/home.gsx                 |   7 +-
 examples/blog/blog/home.x.go                |  28 +-
 examples/blog/blog/post.gsx                 |  38 ++-
 examples/blog/blog/post.x.go                |  81 ++----
 examples/blog/blog/search.gsx               |  16 +-
 examples/blog/blog/search.x.go              |  58 ++--
 examples/blog/ui/components/components.gsx  |  68 +++--
 examples/blog/ui/components/components.x.go | 243 ++++++----------
 examples/blog/ui/layout/layout.gsx          | 101 +++++--
 examples/blog/ui/layout/layout.x.go         | 289 ++++++--------------
 examples/htmx-render-target/pages.gsx       | 100 ++++---
 examples/htmx-render-target/pages.x.go      | 117 ++++----
 examples/htmx/pages.gsx                     |  71 +++--
 examples/htmx/pages.x.go                    | 229 +++++-----------
 examples/lint-misuse/pages.gsx              |  10 +-
 examples/lint-misuse/pages.x.go             |  52 +---
 examples/simple/pages.gsx                   |  24 +-
 examples/simple/pages.x.go                  | 172 ++++--------
 examples/todo/pages.gsx                     |  22 +-
 examples/todo/pages.x.go                    | 141 +++-------
 34 files changed, 1228 insertions(+), 1751 deletions(-)

diff --git a/examples/blog/admin/components.gsx b/examples/blog/admin/components.gsx
index 5f31138..91a5a16 100644
--- a/examples/blog/admin/components.gsx
+++ b/examples/blog/admin/components.gsx
@@ -13,13 +13,15 @@ import (
 // was lowercase `statCell`).
 component StatCell(label string, value int) {
 	<div class="rounded-lg border bg-white p-4 text-center shadow-sm">
-		<div class="text-3xl font-semibold text-slate-900">{value}</div>
-		<div class="mt-1 text-xs uppercase tracking-wide text-slate-500">{label}</div>
+		<div class="text-3xl font-semibold text-slate-900">{ value }</div>
+		<div class="mt-1 text-xs uppercase tracking-wide text-slate-500">
+			{ label }
+		</div>
 	</div>
 }
 
 component StatsGrid(stats store.Stats) {
-	<div id={ StatsGrid |> id } class="grid grid-cols-2 gap-3 md:grid-cols-4">
+	<div id={StatsGrid |> id} class="grid grid-cols-2 gap-3 md:grid-cols-4">
 		<StatCell label="Posts" value={stats.Posts}/>
 		<StatCell label="Drafts" value={stats.Drafts}/>
 		<StatCell label="Comments" value={stats.Comments}/>
@@ -28,7 +30,7 @@ component StatsGrid(stats store.Stats) {
 }
 
 component RecentPostsCard(posts []store.Post) {
-	<div id={ RecentPostsCard |> id }>
+	<div id={RecentPostsCard |> id}>
 		<components.Card title="Recent posts">
 			<ul class="divide-y text-sm">
 				{ if len(posts) == 0 {
@@ -36,13 +38,24 @@ component RecentPostsCard(posts []store.Post) {
 				} }
 				{ for _, p := range posts {
 					<li class="flex items-center justify-between py-2">
-						<a class="hover:underline" href={ postEditPage{} |> url("id", p.ID) }>
-							{p.Title}
+						<a
+							class="hover:underline"
+							href={postEditPage{} |> url("id", p.ID)}
+						>
+							{ p.Title }
 						</a>
 						{ if p.Published {
-							<span class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800">live</span>
+							<span
+								class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800"
+							>
+								live
+							</span>
 						} else {
-							<span class="rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700">draft</span>
+							<span
+								class="rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700"
+							>
+								draft
+							</span>
 						} }
 					</li>
 				} }
@@ -52,9 +65,14 @@ component RecentPostsCard(posts []store.Post) {
 }
 
 component PostsTable(posts []store.Post) {
-	<div id={ PostsTable |> id } class="overflow-hidden rounded-lg border bg-white shadow-sm">
+	<div
+		id={PostsTable |> id}
+		class="overflow-hidden rounded-lg border bg-white shadow-sm"
+	>
 		<table class="w-full text-sm">
-			<thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
+			<thead
+				class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500"
+			>
 				<tr>
 					<th class="px-3 py-2">Title</th>
 					<th class="px-3 py-2">Status</th>
@@ -66,33 +84,60 @@ component PostsTable(posts []store.Post) {
 				{ for _, p := range posts {
 					<tr class="border-t">
 						<td class="px-3 py-2 font-medium">
-							<a class="hover:underline" href={ postEditPage{} |> url("id", p.ID) }>{p.Title}</a>
+							<a
+								class="hover:underline"
+								href={postEditPage{} |> url("id", p.ID)}
+							>
+								{ p.Title }
+							</a>
 						</td>
 						<td class="px-3 py-2">
 							{ if p.Published {
-								<span class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800">published</span>
+								<span
+									class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800"
+								>
+									published
+								</span>
 							} else {
-								<span class="rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700">draft</span>
+								<span
+									class="rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700"
+								>
+									draft
+								</span>
 							} }
 						</td>
-						<td class="px-3 py-2 text-slate-500">{p.CreatedAt.Format("Jan 2, 2006")}</td>
+						<td class="px-3 py-2 text-slate-500">
+							{ p.CreatedAt.Format("Jan 2, 2006") }
+						</td>
 						<td class="px-3 py-2 text-right">
 							<form
 								method="POST"
-								action={ postDeleteHandler{} |> url("id", p.ID) }
-								hx-post={ postDeleteHandler{} |> url("id", p.ID) }
-								hx-target={ PostsTable |> target }
+								action={postDeleteHandler{} |> url("id", p.ID)}
+								hx-post={postDeleteHandler{} |> url("id", p.ID)}
+								hx-target={PostsTable |> target}
 								hx-swap="outerHTML"
 								hx-confirm="Delete this post?"
 								class="inline"
 							>
-								<button class="text-xs text-red-600 hover:underline" type="submit">Delete</button>
+								<button
+									class="text-xs text-red-600 hover:underline"
+									type="submit"
+								>
+									Delete
+								</button>
 							</form>
 						</td>
 					</tr>
 				} }
 				{ if len(posts) == 0 {
-					<tr><td colspan="4" class="px-3 py-6 text-center text-slate-500">No posts yet.</td></tr>
+					<tr>
+						<td
+							colspan="4"
+							class="px-3 py-6 text-center text-slate-500"
+						>
+							No posts yet.
+						</td>
+					</tr>
 				} }
 			</tbody>
 		</table>
diff --git a/examples/blog/admin/components.x.go b/examples/blog/admin/components.x.go
index ddb9e44..c670bcd 100644
--- a/examples/blog/admin/components.x.go
+++ b/examples/blog/admin/components.x.go
@@ -28,28 +28,22 @@ func StatCell(_gsxp StatCellProps) gsx.Node {
 		value := _gsxp.Value
 		_gsxgw := gsx.W(_gsxw)
 //line components.gsx:15:2
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"")
+		_gsxgw.S("<div class=\"")
 		_gsxgw.Class(gsx.Class("rounded-lg border bg-white p-4 text-center shadow-sm"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
 //line components.gsx:16:3
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"text-3xl font-semibold text-slate-900\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<div class=\"text-3xl font-semibold text-slate-900\">")
 //line components.gsx:16:54
 		_gsxgw.Text(strconv.FormatInt(int64(value), 10))
 		_gsxgw.S("</div>")
 //line components.gsx:17:3
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"mt-1 text-xs uppercase tracking-wide text-slate-500\"")
-		_gsxgw.S(">")
-//line components.gsx:17:68
+		_gsxgw.S("<div class=\"mt-1 text-xs uppercase tracking-wide text-slate-500\">")
+//line components.gsx:18:4
 		_gsxgw.Text(string(label))
-		_gsxgw.S("</div>")
-		_gsxgw.S("</div>")
+		_gsxgw.S("</div></div>")
 		return _gsxgw.Err()
 	})
 }
@@ -63,7 +57,7 @@ func StatsGrid(_gsxp StatsGridProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		stats := _gsxp.Stats
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:22:2
+//line components.gsx:24:2
 		_gsxgw.S("<div")
 		if !_gsxp.Attrs.Has("id") {
 			_gsxv0, _gsxerr := _gsxf0.ID(ctx, (StatsGrid))
@@ -80,13 +74,13 @@ func StatsGrid(_gsxp StatsGridProps) gsx.Node {
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:23:3
+//line components.gsx:25:3
 		_gsxgw.Node(ctx, StatCell(StatCellProps{Label: "Posts", Value: stats.Posts}))
-//line components.gsx:24:3
+//line components.gsx:26:3
 		_gsxgw.Node(ctx, StatCell(StatCellProps{Label: "Drafts", Value: stats.Drafts}))
-//line components.gsx:25:3
+//line components.gsx:27:3
 		_gsxgw.Node(ctx, StatCell(StatCellProps{Label: "Comments", Value: stats.Comments}))
-//line components.gsx:26:3
+//line components.gsx:28:3
 		_gsxgw.Node(ctx, StatCell(StatCellProps{Label: "Categories", Value: stats.Categories}))
 		_gsxgw.S("</div>")
 		return _gsxgw.Err()
@@ -102,7 +96,7 @@ func RecentPostsCard(_gsxp RecentPostsCardProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		posts := _gsxp.Posts
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:31:2
+//line components.gsx:33:2
 		_gsxgw.S("<div")
 		if !_gsxp.Attrs.Has("id") {
 			_gsxv1, _gsxerr := _gsxf0.ID(ctx, (RecentPostsCard))
@@ -117,57 +111,39 @@ func RecentPostsCard(_gsxp RecentPostsCardProps) gsx.Node {
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:32:3
+//line components.gsx:34:3
 		_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Recent posts", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line components.gsx:33:4
-			_gsxgw.S("<ul")
-			_gsxgw.S(" class=\"divide-y text-sm\"")
-			_gsxgw.S(">")
-//line components.gsx:34:5
+//line components.gsx:35:4
+			_gsxgw.S("<ul class=\"divide-y text-sm\">")
+//line components.gsx:36:5
 			if len(posts) == 0 {
-//line components.gsx:35:6
-				_gsxgw.S("<li")
-				_gsxgw.S(" class=\"py-2 text-slate-500\"")
-				_gsxgw.S(">")
-				_gsxgw.S("No posts yet.")
-				_gsxgw.S("</li>")
+//line components.gsx:37:6
+				_gsxgw.S("<li class=\"py-2 text-slate-500\">No posts yet.</li>")
 			}
-//line components.gsx:37:5
+//line components.gsx:39:5
 			for _, p := range posts {
-//line components.gsx:38:6
-				_gsxgw.S("<li")
-				_gsxgw.S(" class=\"flex items-center justify-between py-2\"")
-				_gsxgw.S(">")
-//line components.gsx:39:7
-				_gsxgw.S("<a")
-				_gsxgw.S(" class=\"hover:underline\"")
+//line components.gsx:40:6
+				_gsxgw.S("<li class=\"flex items-center justify-between py-2\">")
+//line components.gsx:41:7
+				_gsxgw.S("<a class=\"hover:underline\"")
 				_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (postEditPage{}), "id", p.ID)
 				if _gsxerr != nil {
 					return _gsxerr
 				}
 				_gsxgw.S(" href=\"")
 				_gsxgw.URL(string(_gsxv2))
-				_gsxgw.S("\"")
-				_gsxgw.S(">")
-//line components.gsx:40:8
+				_gsxgw.S("\">")
+//line components.gsx:45:8
 				_gsxgw.Text(string(p.Title))
 				_gsxgw.S("</a>")
-//line components.gsx:42:7
+//line components.gsx:47:7
 				if p.Published {
-//line components.gsx:43:8
-					_gsxgw.S("<span")
-					_gsxgw.S(" class=\"rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800\"")
-					_gsxgw.S(">")
-					_gsxgw.S("live")
-					_gsxgw.S("</span>")
+//line components.gsx:48:8
+					_gsxgw.S("<span class=\"rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800\">live</span>")
 				} else {
-//line components.gsx:45:8
-					_gsxgw.S("<span")
-					_gsxgw.S(" class=\"rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700\"")
-					_gsxgw.S(">")
-					_gsxgw.S("draft")
-					_gsxgw.S("</span>")
+//line components.gsx:54:8
+					_gsxgw.S("<span class=\"rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700\">draft</span>")
 				}
 				_gsxgw.S("</li>")
 			}
@@ -188,7 +164,7 @@ func PostsTable(_gsxp PostsTableProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		posts := _gsxp.Posts
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:55:2
+//line components.gsx:68:2
 		_gsxgw.S("<div")
 		if !_gsxp.Attrs.Has("id") {
 			_gsxv3, _gsxerr := _gsxf0.ID(ctx, (PostsTable))
@@ -205,105 +181,60 @@ func PostsTable(_gsxp PostsTableProps) gsx.Node {
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:56:3
-		_gsxgw.S("<table")
-		_gsxgw.S(" class=\"w-full text-sm\"")
-		_gsxgw.S(">")
-//line components.gsx:57:4
-		_gsxgw.S("<thead")
-		_gsxgw.S(" class=\"bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500\"")
-		_gsxgw.S(">")
-//line components.gsx:58:5
-		_gsxgw.S("<tr")
-		_gsxgw.S(">")
-//line components.gsx:59:6
-		_gsxgw.S("<th")
-		_gsxgw.S(" class=\"px-3 py-2\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Title")
-		_gsxgw.S("</th>")
-//line components.gsx:60:6
-		_gsxgw.S("<th")
-		_gsxgw.S(" class=\"px-3 py-2\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Status")
-		_gsxgw.S("</th>")
-//line components.gsx:61:6
-		_gsxgw.S("<th")
-		_gsxgw.S(" class=\"px-3 py-2\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Created")
-		_gsxgw.S("</th>")
-//line components.gsx:62:6
-		_gsxgw.S("<th")
-		_gsxgw.S(" class=\"px-3 py-2\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</th>")
-		_gsxgw.S("</tr>")
-		_gsxgw.S("</thead>")
-//line components.gsx:65:4
-		_gsxgw.S("<tbody")
-		_gsxgw.S(">")
-//line components.gsx:66:5
+//line components.gsx:72:3
+		_gsxgw.S("<table class=\"w-full text-sm\">")
+//line components.gsx:73:4
+		_gsxgw.S("<thead class=\"bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500\">")
+//line components.gsx:76:5
+		_gsxgw.S("<tr>")
+//line components.gsx:77:6
+		_gsxgw.S("<th class=\"px-3 py-2\">Title</th>")
+//line components.gsx:78:6
+		_gsxgw.S("<th class=\"px-3 py-2\">Status</th>")
+//line components.gsx:79:6
+		_gsxgw.S("<th class=\"px-3 py-2\">Created</th>")
+//line components.gsx:80:6
+		_gsxgw.S("<th class=\"px-3 py-2\"></th></tr></thead>")
+//line components.gsx:83:4
+		_gsxgw.S("<tbody>")
+//line components.gsx:84:5
 		for _, p := range posts {
-//line components.gsx:67:6
-			_gsxgw.S("<tr")
-			_gsxgw.S(" class=\"border-t\"")
-			_gsxgw.S(">")
-//line components.gsx:68:7
-			_gsxgw.S("<td")
-			_gsxgw.S(" class=\"px-3 py-2 font-medium\"")
-			_gsxgw.S(">")
-//line components.gsx:69:8
-			_gsxgw.S("<a")
-			_gsxgw.S(" class=\"hover:underline\"")
+//line components.gsx:85:6
+			_gsxgw.S("<tr class=\"border-t\">")
+//line components.gsx:86:7
+			_gsxgw.S("<td class=\"px-3 py-2 font-medium\">")
+//line components.gsx:87:8
+			_gsxgw.S("<a class=\"hover:underline\"")
 			_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (postEditPage{}), "id", p.ID)
 			if _gsxerr != nil {
 				return _gsxerr
 			}
 			_gsxgw.S(" href=\"")
 			_gsxgw.URL(string(_gsxv4))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
-//line components.gsx:69:78
+			_gsxgw.S("\">")
+//line components.gsx:91:9
 			_gsxgw.Text(string(p.Title))
-			_gsxgw.S("</a>")
-			_gsxgw.S("</td>")
-//line components.gsx:71:7
-			_gsxgw.S("<td")
-			_gsxgw.S(" class=\"px-3 py-2\"")
-			_gsxgw.S(">")
-//line components.gsx:72:8
+			_gsxgw.S("</a></td>")
+//line components.gsx:94:7
+			_gsxgw.S("<td class=\"px-3 py-2\">")
+//line components.gsx:95:8
 			if p.Published {
-//line components.gsx:73:9
-				_gsxgw.S("<span")
-				_gsxgw.S(" class=\"rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800\"")
-				_gsxgw.S(">")
-				_gsxgw.S("published")
-				_gsxgw.S("</span>")
+//line components.gsx:96:9
+				_gsxgw.S("<span class=\"rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800\">published</span>")
 			} else {
-//line components.gsx:75:9
-				_gsxgw.S("<span")
-				_gsxgw.S(" class=\"rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700\"")
-				_gsxgw.S(">")
-				_gsxgw.S("draft")
-				_gsxgw.S("</span>")
+//line components.gsx:102:9
+				_gsxgw.S("<span class=\"rounded bg-slate-200 px-2 py-0.5 text-xs text-slate-700\">draft</span>")
 			}
 			_gsxgw.S("</td>")
-//line components.gsx:78:7
-			_gsxgw.S("<td")
-			_gsxgw.S(" class=\"px-3 py-2 text-slate-500\"")
-			_gsxgw.S(">")
-//line components.gsx:78:44
+//line components.gsx:109:7
+			_gsxgw.S("<td class=\"px-3 py-2 text-slate-500\">")
+//line components.gsx:110:8
 			_gsxgw.Text(string(p.CreatedAt.Format("Jan 2, 2006")))
 			_gsxgw.S("</td>")
-//line components.gsx:79:7
-			_gsxgw.S("<td")
-			_gsxgw.S(" class=\"px-3 py-2 text-right\"")
-			_gsxgw.S(">")
-//line components.gsx:80:8
-			_gsxgw.S("<form")
-			_gsxgw.S(" method=\"POST\"")
+//line components.gsx:112:7
+			_gsxgw.S("<td class=\"px-3 py-2 text-right\">")
+//line components.gsx:113:8
+			_gsxgw.S("<form method=\"POST\"")
 			_gsxv5, _gsxerr := _gsxf0.URLFor(ctx, (postDeleteHandler{}), "id", p.ID)
 			if _gsxerr != nil {
 				return _gsxerr
@@ -324,39 +255,18 @@ func PostsTable(_gsxp PostsTableProps) gsx.Node {
 			}
 			_gsxgw.S(" hx-target=\"")
 			_gsxgw.AttrValue(string(_gsxv7))
-			_gsxgw.S("\"")
-			_gsxgw.S(" hx-swap=\"outerHTML\"")
-			_gsxgw.S(" hx-confirm=\"Delete this post?\"")
-			_gsxgw.S(" class=\"inline\"")
-			_gsxgw.S(">")
-//line components.gsx:89:9
-			_gsxgw.S("<button")
-			_gsxgw.S(" class=\"text-xs text-red-600 hover:underline\"")
-			_gsxgw.S(" type=\"submit\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Delete")
-			_gsxgw.S("</button>")
-			_gsxgw.S("</form>")
-			_gsxgw.S("</td>")
-			_gsxgw.S("</tr>")
+			_gsxgw.S("\" hx-swap=\"outerHTML\" hx-confirm=\"Delete this post?\" class=\"inline\">")
+//line components.gsx:122:9
+			_gsxgw.S("<button class=\"text-xs text-red-600 hover:underline\" type=\"submit\">Delete</button></form></td></tr>")
 		}
-//line components.gsx:94:5
+//line components.gsx:132:5
 		if len(posts) == 0 {
-//line components.gsx:95:6
-			_gsxgw.S("<tr")
-			_gsxgw.S(">")
-//line components.gsx:95:10
-			_gsxgw.S("<td")
-			_gsxgw.S(" colspan=\"4\"")
-			_gsxgw.S(" class=\"px-3 py-6 text-center text-slate-500\"")
-			_gsxgw.S(">")
-			_gsxgw.S("No posts yet.")
-			_gsxgw.S("</td>")
-			_gsxgw.S("</tr>")
+//line components.gsx:133:6
+			_gsxgw.S("<tr>")
+//line components.gsx:134:7
+			_gsxgw.S("<td colspan=\"4\" class=\"px-3 py-6 text-center text-slate-500\">No posts yet.</td></tr>")
 		}
-		_gsxgw.S("</tbody>")
-		_gsxgw.S("</table>")
-		_gsxgw.S("</div>")
+		_gsxgw.S("</tbody></table></div>")
 		return _gsxgw.Err()
 	})
 }
diff --git a/examples/blog/admin/dashboard.gsx b/examples/blog/admin/dashboard.gsx
index e304b16..a2c123a 100644
--- a/examples/blog/admin/dashboard.gsx
+++ b/examples/blog/admin/dashboard.gsx
@@ -51,16 +51,20 @@ component (p dashboardPage) Page(props dashboardProps) {
 			<div class="flex gap-2 text-xs">
 				<button
 					class="rounded border px-2 py-1 hover:bg-white"
-					hx-get={ dashboardPage{} |> url }
-					hx-target={ StatsGrid |> target }
+					hx-get={dashboardPage{} |> url}
+					hx-target={StatsGrid |> target}
 					hx-swap="outerHTML"
-				>↻ Stats</button>
+				>
+					↻ Stats
+				</button>
 				<button
 					class="rounded border px-2 py-1 hover:bg-white"
-					hx-get={ dashboardPage{} |> url }
-					hx-target={ RecentPostsCard |> target }
+					hx-get={dashboardPage{} |> url}
+					hx-target={RecentPostsCard |> target}
 					hx-swap="outerHTML"
-				>↻ Recent posts</button>
+				>
+					↻ Recent posts
+				</button>
 			</div>
 		</header>
 		<section class="space-y-6">
@@ -68,9 +72,15 @@ component (p dashboardPage) Page(props dashboardProps) {
 			<RecentPostsCard posts={props.RecentPosts}/>
 			<components.Card title="Try it">
 				<ul class="list-disc space-y-1 pl-5 text-sm text-slate-700">
-					<li>Click ↻ Stats — only the StatsGrid widget refreshes (check Network tab).</li>
-					<li>Click ↻ Recent posts — only that card reloads, with its own DB query.</li>
-					<li>Hard refresh — the full document re-renders via Page().</li>
+					<li>
+						Click ↻ Stats — only the StatsGrid widget refreshes (check Network tab).
+					</li>
+					<li>
+						Click ↻ Recent posts — only that card reloads, with its own DB query.
+					</li>
+					<li>
+						Hard refresh — the full document re-renders via Page().
+					</li>
 				</ul>
 			</components.Card>
 		</section>
diff --git a/examples/blog/admin/dashboard.x.go b/examples/blog/admin/dashboard.x.go
index 2ee649b..290ee42 100644
--- a/examples/blog/admin/dashboard.x.go
+++ b/examples/blog/admin/dashboard.x.go
@@ -57,22 +57,13 @@ func (p dashboardPage) Page(props dashboardProps) gsx.Node {
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Dashboard", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line dashboard.gsx:49:3
-			_gsxgw.S("<header")
-			_gsxgw.S(" class=\"mb-6 flex items-end justify-between\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<header class=\"mb-6 flex items-end justify-between\">")
 //line dashboard.gsx:50:4
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"text-2xl font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Dashboard")
-			_gsxgw.S("</h1>")
+			_gsxgw.S("<h1 class=\"text-2xl font-semibold\">Dashboard</h1>")
 //line dashboard.gsx:51:4
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"flex gap-2 text-xs\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<div class=\"flex gap-2 text-xs\">")
 //line dashboard.gsx:52:5
-			_gsxgw.S("<button")
-			_gsxgw.S(" class=\"rounded border px-2 py-1 hover:bg-white\"")
+			_gsxgw.S("<button class=\"rounded border px-2 py-1 hover:bg-white\"")
 			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (dashboardPage{}))
 			if _gsxerr != nil {
 				return _gsxerr
@@ -86,14 +77,9 @@ func (p dashboardPage) Page(props dashboardProps) gsx.Node {
 			}
 			_gsxgw.S(" hx-target=\"")
 			_gsxgw.AttrValue(string(_gsxv1))
-			_gsxgw.S("\"")
-			_gsxgw.S(" hx-swap=\"outerHTML\"")
-			_gsxgw.S(">")
-			_gsxgw.S("↻ Stats")
-			_gsxgw.S("</button>")
-//line dashboard.gsx:58:5
-			_gsxgw.S("<button")
-			_gsxgw.S(" class=\"rounded border px-2 py-1 hover:bg-white\"")
+			_gsxgw.S("\" hx-swap=\"outerHTML\">↻ Stats</button>")
+//line dashboard.gsx:60:5
+			_gsxgw.S("<button class=\"rounded border px-2 py-1 hover:bg-white\"")
 			_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (dashboardPage{}))
 			if _gsxerr != nil {
 				return _gsxerr
@@ -107,44 +93,24 @@ func (p dashboardPage) Page(props dashboardProps) gsx.Node {
 			}
 			_gsxgw.S(" hx-target=\"")
 			_gsxgw.AttrValue(string(_gsxv3))
-			_gsxgw.S("\"")
-			_gsxgw.S(" hx-swap=\"outerHTML\"")
-			_gsxgw.S(">")
-			_gsxgw.S("↻ Recent posts")
-			_gsxgw.S("</button>")
-			_gsxgw.S("</div>")
-			_gsxgw.S("</header>")
-//line dashboard.gsx:66:3
-			_gsxgw.S("<section")
-			_gsxgw.S(" class=\"space-y-6\"")
-			_gsxgw.S(">")
-//line dashboard.gsx:67:4
+			_gsxgw.S("\" hx-swap=\"outerHTML\">↻ Recent posts</button></div></header>")
+//line dashboard.gsx:70:3
+			_gsxgw.S("<section class=\"space-y-6\">")
+//line dashboard.gsx:71:4
 			_gsxgw.Node(ctx, StatsGrid(StatsGridProps{Stats: props.Stats}))
-//line dashboard.gsx:68:4
+//line dashboard.gsx:72:4
 			_gsxgw.Node(ctx, RecentPostsCard(RecentPostsCardProps{Posts: props.RecentPosts}))
-//line dashboard.gsx:69:4
+//line dashboard.gsx:73:4
 			_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Try it", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 				_gsxgw := gsx.W(_gsxw)
-//line dashboard.gsx:70:5
-				_gsxgw.S("<ul")
-				_gsxgw.S(" class=\"list-disc space-y-1 pl-5 text-sm text-slate-700\"")
-				_gsxgw.S(">")
-//line dashboard.gsx:71:6
-				_gsxgw.S("<li")
-				_gsxgw.S(">")
-				_gsxgw.S("Click ↻ Stats — only the StatsGrid widget refreshes (check Network tab).")
-				_gsxgw.S("</li>")
-//line dashboard.gsx:72:6
-				_gsxgw.S("<li")
-				_gsxgw.S(">")
-				_gsxgw.S("Click ↻ Recent posts — only that card reloads, with its own DB query.")
-				_gsxgw.S("</li>")
-//line dashboard.gsx:73:6
-				_gsxgw.S("<li")
-				_gsxgw.S(">")
-				_gsxgw.S("Hard refresh — the full document re-renders via Page().")
-				_gsxgw.S("</li>")
-				_gsxgw.S("</ul>")
+//line dashboard.gsx:74:5
+				_gsxgw.S("<ul class=\"list-disc space-y-1 pl-5 text-sm text-slate-700\">")
+//line dashboard.gsx:75:6
+				_gsxgw.S("<li>Click ↻ Stats — only the StatsGrid widget refreshes (check Network tab).</li>")
+//line dashboard.gsx:78:6
+				_gsxgw.S("<li>Click ↻ Recent posts — only that card reloads, with its own DB query.</li>")
+//line dashboard.gsx:81:6
+				_gsxgw.S("<li>Hard refresh — the full document re-renders via Page().</li></ul>")
 				return _gsxgw.Err()
 			})}))
 			_gsxgw.S("</section>")
diff --git a/examples/blog/admin/login.gsx b/examples/blog/admin/login.gsx
index 55091d0..b65a597 100644
--- a/examples/blog/admin/login.gsx
+++ b/examples/blog/admin/login.gsx
@@ -17,9 +17,14 @@ component LoginShell(username, errMsg string) {
 			<main class="mx-auto max-w-sm px-4 py-16">
 				<components.Card title="Sign in">
 					<form method="POST" class="space-y-3">
-						<components.Alert kind={components.AlertError} msg={errMsg}/>
+						<components.Alert
+							kind={components.AlertError}
+							msg={errMsg}
+						/>
 						<label class="block text-sm">
-							<span class="mb-1 block font-medium text-slate-700">Username</span>
+							<span class="mb-1 block font-medium text-slate-700">
+								Username
+							</span>
 							<input
 								name="username"
 								value={username}
@@ -29,7 +34,9 @@ component LoginShell(username, errMsg string) {
 							/>
 						</label>
 						<label class="block text-sm">
-							<span class="mb-1 block font-medium text-slate-700">Password</span>
+							<span class="mb-1 block font-medium text-slate-700">
+								Password
+							</span>
 							<input
 								type="password"
 								name="password"
@@ -43,7 +50,11 @@ component LoginShell(username, errMsg string) {
 						>
 							Sign in
 						</button>
-						<p class="text-xs text-slate-500">Demo credentials: <code>admin</code> / <code>admin</code></p>
+						<p class="text-xs text-slate-500">
+							Demo credentials: <code>admin</code> / <code>
+								admin
+							</code>
+						</p>
 					</form>
 				</components.Card>
 			</main>
diff --git a/examples/blog/admin/login.x.go b/examples/blog/admin/login.x.go
index e956a2e..73e7105 100644
--- a/examples/blog/admin/login.x.go
+++ b/examples/blog/admin/login.x.go
@@ -26,114 +26,56 @@ func LoginShell(_gsxp LoginShellProps) gsx.Node {
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
 //line login.gsx:10:2
-		_gsxgw.S("<html")
-		_gsxgw.S(" lang=\"en\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<html lang=\"en\">")
 //line login.gsx:11:3
-		_gsxgw.S("<head")
-		_gsxgw.S(">")
+		_gsxgw.S("<head>")
 //line login.gsx:12:4
-		_gsxgw.S("<meta")
-		_gsxgw.S(" charset=\"utf-8\"")
-		_gsxgw.S("/>")
+		_gsxgw.S("<meta charset=\"utf-8\"/>")
 //line login.gsx:13:4
-		_gsxgw.S("<title")
-		_gsxgw.S(">")
-		_gsxgw.S("Sign in — blog admin")
-		_gsxgw.S("</title>")
+		_gsxgw.S("<title>Sign in — blog admin</title>")
 //line login.gsx:14:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://cdn.tailwindcss.com\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
-		_gsxgw.S("</head>")
+		_gsxgw.S("<script src=\"https://cdn.tailwindcss.com\"></script></head>")
 //line login.gsx:16:3
-		_gsxgw.S("<body")
-		_gsxgw.S(" class=\"bg-slate-100 text-slate-900\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<body class=\"bg-slate-100 text-slate-900\">")
 //line login.gsx:17:4
-		_gsxgw.S("<main")
-		_gsxgw.S(" class=\"mx-auto max-w-sm px-4 py-16\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<main class=\"mx-auto max-w-sm px-4 py-16\">")
 //line login.gsx:18:5
 		_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Sign in", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line login.gsx:19:6
-			_gsxgw.S("<form")
-			_gsxgw.S(" method=\"POST\"")
-			_gsxgw.S(" class=\"space-y-3\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<form method=\"POST\" class=\"space-y-3\">")
 //line login.gsx:20:7
 			_gsxgw.Node(ctx, components.Alert(components.AlertProps{Kind: components.AlertError, Msg: errMsg}))
-//line login.gsx:21:7
-			_gsxgw.S("<label")
-			_gsxgw.S(" class=\"block text-sm\"")
-			_gsxgw.S(">")
-//line login.gsx:22:8
-			_gsxgw.S("<span")
-			_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Username")
-			_gsxgw.S("</span>")
-//line login.gsx:23:8
-			_gsxgw.S("<input")
-			_gsxgw.S(" name=\"username\"")
-			_gsxgw.S(" value=\"")
+//line login.gsx:24:7
+			_gsxgw.S("<label class=\"block text-sm\">")
+//line login.gsx:25:8
+			_gsxgw.S("<span class=\"mb-1 block font-medium text-slate-700\">Username</span>")
+//line login.gsx:28:8
+			_gsxgw.S("<input name=\"username\" value=\"")
 			_gsxgw.AttrValue(string(username))
 			_gsxgw.S("\"")
 			_gsxgw.BoolAttr("required", true)
 			_gsxgw.BoolAttr("autofocus", true)
-			_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
-			_gsxgw.S("/>")
-			_gsxgw.S("</label>")
-//line login.gsx:31:7
-			_gsxgw.S("<label")
-			_gsxgw.S(" class=\"block text-sm\"")
-			_gsxgw.S(">")
-//line login.gsx:32:8
-			_gsxgw.S("<span")
-			_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Password")
-			_gsxgw.S("</span>")
-//line login.gsx:33:8
-			_gsxgw.S("<input")
-			_gsxgw.S(" type=\"password\"")
-			_gsxgw.S(" name=\"password\"")
+			_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"/></label>")
+//line login.gsx:36:7
+			_gsxgw.S("<label class=\"block text-sm\">")
+//line login.gsx:37:8
+			_gsxgw.S("<span class=\"mb-1 block font-medium text-slate-700\">Password</span>")
+//line login.gsx:40:8
+			_gsxgw.S("<input type=\"password\" name=\"password\"")
 			_gsxgw.BoolAttr("required", true)
-			_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
-			_gsxgw.S("/>")
-			_gsxgw.S("</label>")
-//line login.gsx:40:7
-			_gsxgw.S("<button")
-			_gsxgw.S(" type=\"submit\"")
-			_gsxgw.S(" class=\"inline-flex w-full items-center justify-center rounded bg-slate-900 px-3 py-2 text-sm font-medium text-white hover:bg-slate-700\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Sign in")
-			_gsxgw.S("</button>")
-//line login.gsx:46:7
-			_gsxgw.S("<p")
-			_gsxgw.S(" class=\"text-xs text-slate-500\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Demo credentials: ")
-//line login.gsx:46:59
-			_gsxgw.S("<code")
-			_gsxgw.S(">")
-			_gsxgw.S("admin")
-			_gsxgw.S("</code>")
-			_gsxgw.S(" / ")
-//line login.gsx:46:80
-			_gsxgw.S("<code")
-			_gsxgw.S(">")
-			_gsxgw.S("admin")
-			_gsxgw.S("</code>")
-			_gsxgw.S("</p>")
-			_gsxgw.S("</form>")
+			_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"/></label>")
+//line login.gsx:47:7
+			_gsxgw.S("<button type=\"submit\" class=\"inline-flex w-full items-center justify-center rounded bg-slate-900 px-3 py-2 text-sm font-medium text-white hover:bg-slate-700\">Sign in</button>")
+//line login.gsx:53:7
+			_gsxgw.S("<p class=\"text-xs text-slate-500\">Demo credentials: ")
+//line login.gsx:54:26
+			_gsxgw.S("<code>admin</code> / ")
+//line login.gsx:54:47
+			_gsxgw.S("<code>admin</code></p></form>")
 			return _gsxgw.Err()
 		})}))
-		_gsxgw.S("</main>")
-		_gsxgw.S("</body>")
-		_gsxgw.S("</html>")
+		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
 	})
 }
diff --git a/examples/blog/admin/posts.gsx b/examples/blog/admin/posts.gsx
index 1ea8a37..c2f96a8 100644
--- a/examples/blog/admin/posts.gsx
+++ b/examples/blog/admin/posts.gsx
@@ -18,7 +18,7 @@ import (
 // User: …, Children: body}).
 component AdminShellWith(title string, user store.User) {
 	<layout.AdminShell title={title} current={user}>
-		{children}
+		{ children }
 	</layout.AdminShell>
 }
 
@@ -41,7 +41,12 @@ component (p postListPage) Page(props postListProps) {
 	<layout.AdminShell title="Posts" current={props.User}>
 		<header class="mb-4 flex items-center justify-between">
 			<h1 class="text-2xl font-semibold">All posts</h1>
-			<a class="rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700" href={ postNewPage{} |> url }>New post</a>
+			<a
+				class="rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700"
+				href={postNewPage{} |> url}
+			>
+				New post
+			</a>
 		</header>
 		<PostsTable posts={props.Posts}/>
 	</layout.AdminShell>
@@ -96,16 +101,26 @@ component (p postEditPage) Page(props postFormViewProps) {
 // --- Shared form ---
 
 component PostForm(p store.Post, cats []store.Category, errMsg string) {
-	<form method="POST" action={ postFormAction(ctx, p) } class="space-y-3">
+	<form method="POST" action={postFormAction(ctx, p)} class="space-y-3">
 		<components.Alert kind={components.AlertError} msg={errMsg}/>
 		<components.Input name="title" label="Title" value={p.Title} errMsg=""/>
-		<components.Input name="slug" label="Slug (auto if blank)" value={p.Slug} errMsg=""/>
+		<components.Input
+			name="slug"
+			label="Slug (auto if blank)"
+			value={p.Slug}
+			errMsg=""
+		/>
 		<label class="block text-sm">
 			<span class="mb-1 block font-medium text-slate-700">Category</span>
-			<select name="category_id" class="w-full rounded border border-slate-300 px-2 py-1.5 text-sm">
+			<select
+				name="category_id"
+				class="w-full rounded border border-slate-300 px-2 py-1.5 text-sm"
+			>
 				<option value="0">— pick one —</option>
 				{ for _, c := range cats {
-					<option value={c.ID} selected={ c.ID == p.CategoryID }>{c.Name}</option>
+					<option value={c.ID} selected={c.ID == p.CategoryID}>
+						{ c.Name }
+					</option>
 				} }
 			</select>
 		</label>
@@ -116,7 +131,12 @@ component PostForm(p store.Post, cats []store.Category, errMsg string) {
 		</label>
 		<div class="flex items-center gap-2">
 			<components.Button label="Save" { gsx.Attrs{"type": "submit"}... }/>
-			<a class="text-sm text-slate-500 hover:underline" href={ postListPage{} |> url }>Cancel</a>
+			<a
+				class="text-sm text-slate-500 hover:underline"
+				href={postListPage{} |> url}
+			>
+				Cancel
+			</a>
 		</div>
 	</form>
 }
diff --git a/examples/blog/admin/posts.x.go b/examples/blog/admin/posts.x.go
index 540b0c7..73ce318 100644
--- a/examples/blog/admin/posts.x.go
+++ b/examples/blog/admin/posts.x.go
@@ -67,30 +67,19 @@ func (p postListPage) Page(props postListProps) gsx.Node {
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Posts", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line posts.gsx:42:3
-			_gsxgw.S("<header")
-			_gsxgw.S(" class=\"mb-4 flex items-center justify-between\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<header class=\"mb-4 flex items-center justify-between\">")
 //line posts.gsx:43:4
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"text-2xl font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("All posts")
-			_gsxgw.S("</h1>")
+			_gsxgw.S("<h1 class=\"text-2xl font-semibold\">All posts</h1>")
 //line posts.gsx:44:4
-			_gsxgw.S("<a")
-			_gsxgw.S(" class=\"rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700\"")
+			_gsxgw.S("<a class=\"rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700\"")
 			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (postNewPage{}))
 			if _gsxerr != nil {
 				return _gsxerr
 			}
 			_gsxgw.S(" href=\"")
 			_gsxgw.URL(string(_gsxv0))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
-			_gsxgw.S("New post")
-			_gsxgw.S("</a>")
-			_gsxgw.S("</header>")
-//line posts.gsx:46:3
+			_gsxgw.S("\">New post</a></header>")
+//line posts.gsx:51:3
 			_gsxgw.Node(ctx, PostsTable(PostsTableProps{Posts: props.Posts}))
 			return _gsxgw.Err()
 		})}))
@@ -116,16 +105,12 @@ func (postNewPage) Props(r *http.Request, s *store.Store) (postFormViewProps, er
 func (p postNewPage) Page(props postFormViewProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:66:2
+//line posts.gsx:71:2
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "New post", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:67:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("New post")
-			_gsxgw.S("</h1>")
-//line posts.gsx:68:3
+//line posts.gsx:72:3
+			_gsxgw.S("<h1 class=\"mb-4 text-2xl font-semibold\">New post</h1>")
+//line posts.gsx:73:3
 			_gsxgw.Node(ctx, PostForm(PostFormProps{P: props.Post, Cats: props.Categories, ErrMsg: ""}))
 			return _gsxgw.Err()
 		})}))
@@ -153,16 +138,12 @@ func (postEditPage) Props(r *http.Request, s *store.Store) (postFormViewProps, e
 func (p postEditPage) Page(props postFormViewProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:90:2
+//line posts.gsx:95:2
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Edit post", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:91:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Edit post")
-			_gsxgw.S("</h1>")
-//line posts.gsx:92:3
+//line posts.gsx:96:3
+			_gsxgw.S("<h1 class=\"mb-4 text-2xl font-semibold\">Edit post</h1>")
+//line posts.gsx:97:3
 			_gsxgw.Node(ctx, PostForm(PostFormProps{P: props.Post, Cats: props.Categories, ErrMsg: ""}))
 			return _gsxgw.Err()
 		})}))
@@ -185,7 +166,7 @@ func PostForm(_gsxp PostFormProps) gsx.Node {
 		cats := _gsxp.Cats
 		errMsg := _gsxp.ErrMsg
 		_gsxgw := gsx.W(_gsxw)
-//line posts.gsx:99:2
+//line posts.gsx:104:2
 		_gsxgw.S("<form")
 		if !_gsxp.Attrs.Has("method") {
 			_gsxgw.S(" method=\"POST\"")
@@ -201,83 +182,54 @@ func PostForm(_gsxp PostFormProps) gsx.Node {
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line posts.gsx:100:3
+//line posts.gsx:105:3
 		_gsxgw.Node(ctx, components.Alert(components.AlertProps{Kind: components.AlertError, Msg: errMsg}))
-//line posts.gsx:101:3
+//line posts.gsx:106:3
 		_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "title", Label: "Title", Value: p.Title, ErrMsg: ""}))
-//line posts.gsx:102:3
+//line posts.gsx:107:3
 		_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "slug", Label: "Slug (auto if blank)", Value: p.Slug, ErrMsg: ""}))
-//line posts.gsx:103:3
-		_gsxgw.S("<label")
-		_gsxgw.S(" class=\"block text-sm\"")
-		_gsxgw.S(">")
-//line posts.gsx:104:4
-		_gsxgw.S("<span")
-		_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Category")
-		_gsxgw.S("</span>")
-//line posts.gsx:105:4
-		_gsxgw.S("<select")
-		_gsxgw.S(" name=\"category_id\"")
-		_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
-		_gsxgw.S(">")
-//line posts.gsx:106:5
-		_gsxgw.S("<option")
-		_gsxgw.S(" value=\"0\"")
-		_gsxgw.S(">")
-		_gsxgw.S("— pick one —")
-		_gsxgw.S("</option>")
-//line posts.gsx:107:5
+//line posts.gsx:113:3
+		_gsxgw.S("<label class=\"block text-sm\">")
+//line posts.gsx:114:4
+		_gsxgw.S("<span class=\"mb-1 block font-medium text-slate-700\">Category</span>")
+//line posts.gsx:115:4
+		_gsxgw.S("<select name=\"category_id\" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\">")
+//line posts.gsx:119:5
+		_gsxgw.S("<option value=\"0\">— pick one —</option>")
+//line posts.gsx:120:5
 		for _, c := range cats {
-//line posts.gsx:108:6
-			_gsxgw.S("<option")
-			_gsxgw.S(" value=\"")
+//line posts.gsx:121:6
+			_gsxgw.S("<option value=\"")
 			_gsxgw.AttrValue(strconv.FormatInt(int64(c.ID), 10))
 			_gsxgw.S("\"")
 			_gsxgw.BoolAttr("selected", bool(c.ID == p.CategoryID))
 			_gsxgw.S(">")
-//line posts.gsx:108:61
+//line posts.gsx:122:7
 			_gsxgw.Text(string(c.Name))
 			_gsxgw.S("</option>")
 		}
-		_gsxgw.S("</select>")
-		_gsxgw.S("</label>")
-//line posts.gsx:112:3
+		_gsxgw.S("</select></label>")
+//line posts.gsx:127:3
 		_gsxgw.Node(ctx, components.Textarea(components.TextareaProps{Name: "body", Label: "Body", Value: p.Body, ErrMsg: ""}))
-//line posts.gsx:113:3
-		_gsxgw.S("<label")
-		_gsxgw.S(" class=\"flex items-center gap-2 text-sm\"")
-		_gsxgw.S(">")
-//line posts.gsx:114:4
-		_gsxgw.S("<input")
-		_gsxgw.S(" type=\"checkbox\"")
-		_gsxgw.S(" name=\"published\"")
+//line posts.gsx:128:3
+		_gsxgw.S("<label class=\"flex items-center gap-2 text-sm\">")
+//line posts.gsx:129:4
+		_gsxgw.S("<input type=\"checkbox\" name=\"published\"")
 		_gsxgw.BoolAttr("checked", bool(p.Published))
-		_gsxgw.S("/>")
-		_gsxgw.S("Publish immediately")
-		_gsxgw.S("</label>")
-//line posts.gsx:117:3
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"flex items-center gap-2\"")
-		_gsxgw.S(">")
-//line posts.gsx:118:4
+		_gsxgw.S("/>Publish immediately</label>")
+//line posts.gsx:132:3
+		_gsxgw.S("<div class=\"flex items-center gap-2\">")
+//line posts.gsx:133:4
 		_gsxgw.Node(ctx, components.Button(components.ButtonProps{Label: "Save", Attrs: gsx.Attrs{}.Merge(gsx.Attrs{"type": "submit"})}))
-//line posts.gsx:119:4
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"text-sm text-slate-500 hover:underline\"")
+//line posts.gsx:134:4
+		_gsxgw.S("<a class=\"text-sm text-slate-500 hover:underline\"")
 		_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (postListPage{}))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv1))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Cancel")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</div>")
-		_gsxgw.S("</form>")
+		_gsxgw.S("\">Cancel</a></div></form>")
 		return _gsxgw.Err()
 	})
 }
diff --git a/examples/blog/admin/users.gsx b/examples/blog/admin/users.gsx
index 34add61..87ef00c 100644
--- a/examples/blog/admin/users.gsx
+++ b/examples/blog/admin/users.gsx
@@ -26,46 +26,69 @@ component (p userListPage) Page(props userListProps) {
 	<layout.AdminShell title="Users" current={props.User}>
 		<h1 class="mb-4 text-2xl font-semibold">Users</h1>
 		<div class="grid gap-4 md:grid-cols-2">
-		<components.Card title="Existing users">
-			<ul class="divide-y text-sm">
-				{ for _, u := range props.Users {
-					<li class="flex items-center justify-between py-2">
-						<span>
-							{u.Username}
-							{ if u.IsAdmin {
-								<span class="ml-2 rounded bg-slate-900 px-2 py-0.5 text-xs text-white">admin</span>
-							} }
+			<components.Card title="Existing users">
+				<ul class="divide-y text-sm">
+					{ for _, u := range props.Users {
+						<li class="flex items-center justify-between py-2">
+							<span>
+								{ u.Username }
+								{ if u.IsAdmin {
+									<span
+										class="ml-2 rounded bg-slate-900 px-2 py-0.5 text-xs text-white"
+									>
+										admin
+									</span>
+								} }
+							</span>
+							<form
+								method="POST"
+								action={userDeleteHandler{} |> url("id", u.ID)}
+								class="m-0"
+							>
+								<button
+									class="text-xs text-red-600 hover:underline"
+									type="submit"
+								>
+									Delete
+								</button>
+							</form>
+						</li>
+					} }
+				</ul>
+			</components.Card>
+			<components.Card title="Create user">
+				<form
+					method="POST"
+					action={userCreateHandler{} |> url}
+					class="space-y-3"
+				>
+					<components.Input
+						name="username"
+						label="Username"
+						value=""
+						errMsg=""
+					/>
+					<label class="block text-sm">
+						<span class="mb-1 block font-medium text-slate-700">
+							Password
 						</span>
-						<form
-							method="POST"
-							action={ userDeleteHandler{} |> url("id", u.ID) }
-							class="m-0"
-						>
-							<button class="text-xs text-red-600 hover:underline" type="submit">Delete</button>
-						</form>
-					</li>
-				} }
-			</ul>
-		</components.Card>
-		<components.Card title="Create user">
-			<form method="POST" action={ userCreateHandler{} |> url } class="space-y-3">
-				<components.Input name="username" label="Username" value="" errMsg=""/>
-				<label class="block text-sm">
-					<span class="mb-1 block font-medium text-slate-700">Password</span>
-					<input
-						type="password"
-						name="password"
-						required
-						class="w-full rounded border border-slate-300 px-2 py-1.5 text-sm"
+						<input
+							type="password"
+							name="password"
+							required
+							class="w-full rounded border border-slate-300 px-2 py-1.5 text-sm"
+						/>
+					</label>
+					<label class="flex items-center gap-2 text-sm">
+						<input type="checkbox" name="is_admin"/>
+						Grant admin
+					</label>
+					<components.Button
+						label="Create"
+						{ gsx.Attrs{"type": "submit"}... }
 					/>
-				</label>
-				<label class="flex items-center gap-2 text-sm">
-					<input type="checkbox" name="is_admin"/>
-					Grant admin
-				</label>
-				<components.Button label="Create" { gsx.Attrs{"type": "submit"}... }/>
-			</form>
-		</components.Card>
-	</div>
+				</form>
+			</components.Card>
+		</div>
 	</layout.AdminShell>
 }
diff --git a/examples/blog/admin/users.x.go b/examples/blog/admin/users.x.go
index a9078e6..d8a2a9f 100644
--- a/examples/blog/admin/users.x.go
+++ b/examples/blog/admin/users.x.go
@@ -34,115 +34,70 @@ func (p userListPage) Page(props userListProps) gsx.Node {
 		_gsxgw.Node(ctx, layout.AdminShell(layout.AdminShellProps{Title: "Users", Current: props.User, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line users.gsx:27:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Users")
-			_gsxgw.S("</h1>")
+			_gsxgw.S("<h1 class=\"mb-4 text-2xl font-semibold\">Users</h1>")
 //line users.gsx:28:3
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"grid gap-4 md:grid-cols-2\"")
-			_gsxgw.S(">")
-//line users.gsx:29:3
+			_gsxgw.S("<div class=\"grid gap-4 md:grid-cols-2\">")
+//line users.gsx:29:4
 			_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Existing users", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 				_gsxgw := gsx.W(_gsxw)
-//line users.gsx:30:4
-				_gsxgw.S("<ul")
-				_gsxgw.S(" class=\"divide-y text-sm\"")
-				_gsxgw.S(">")
-//line users.gsx:31:5
+//line users.gsx:30:5
+				_gsxgw.S("<ul class=\"divide-y text-sm\">")
+//line users.gsx:31:6
 				for _, u := range props.Users {
-//line users.gsx:32:6
-					_gsxgw.S("<li")
-					_gsxgw.S(" class=\"flex items-center justify-between py-2\"")
-					_gsxgw.S(">")
-//line users.gsx:33:7
-					_gsxgw.S("<span")
-					_gsxgw.S(">")
-//line users.gsx:34:8
+//line users.gsx:32:7
+					_gsxgw.S("<li class=\"flex items-center justify-between py-2\">")
+//line users.gsx:33:8
+					_gsxgw.S("<span>")
+//line users.gsx:34:9
 					_gsxgw.Text(string(u.Username))
-//line users.gsx:35:8
+//line users.gsx:35:9
 					if u.IsAdmin {
-//line users.gsx:36:9
-						_gsxgw.S("<span")
-						_gsxgw.S(" class=\"ml-2 rounded bg-slate-900 px-2 py-0.5 text-xs text-white\"")
-						_gsxgw.S(">")
-						_gsxgw.S("admin")
-						_gsxgw.S("</span>")
+//line users.gsx:36:10
+						_gsxgw.S("<span class=\"ml-2 rounded bg-slate-900 px-2 py-0.5 text-xs text-white\">admin</span>")
 					}
 					_gsxgw.S("</span>")
-//line users.gsx:39:7
-					_gsxgw.S("<form")
-					_gsxgw.S(" method=\"POST\"")
+//line users.gsx:43:8
+					_gsxgw.S("<form method=\"POST\"")
 					_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (userDeleteHandler{}), "id", u.ID)
 					if _gsxerr != nil {
 						return _gsxerr
 					}
 					_gsxgw.S(" action=\"")
 					_gsxgw.URL(string(_gsxv0))
-					_gsxgw.S("\"")
-					_gsxgw.S(" class=\"m-0\"")
-					_gsxgw.S(">")
-//line users.gsx:44:8
-					_gsxgw.S("<button")
-					_gsxgw.S(" class=\"text-xs text-red-600 hover:underline\"")
-					_gsxgw.S(" type=\"submit\"")
-					_gsxgw.S(">")
-					_gsxgw.S("Delete")
-					_gsxgw.S("</button>")
-					_gsxgw.S("</form>")
-					_gsxgw.S("</li>")
+					_gsxgw.S("\" class=\"m-0\">")
+//line users.gsx:48:9
+					_gsxgw.S("<button class=\"text-xs text-red-600 hover:underline\" type=\"submit\">Delete</button></form></li>")
 				}
 				_gsxgw.S("</ul>")
 				return _gsxgw.Err()
 			})}))
-//line users.gsx:50:3
+//line users.gsx:59:4
 			_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Create user", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 				_gsxgw := gsx.W(_gsxw)
-//line users.gsx:51:4
-				_gsxgw.S("<form")
-				_gsxgw.S(" method=\"POST\"")
+//line users.gsx:60:5
+				_gsxgw.S("<form method=\"POST\"")
 				_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (userCreateHandler{}))
 				if _gsxerr != nil {
 					return _gsxerr
 				}
 				_gsxgw.S(" action=\"")
 				_gsxgw.URL(string(_gsxv1))
-				_gsxgw.S("\"")
-				_gsxgw.S(" class=\"space-y-3\"")
-				_gsxgw.S(">")
-//line users.gsx:52:5
+				_gsxgw.S("\" class=\"space-y-3\">")
+//line users.gsx:65:6
 				_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "username", Label: "Username", Value: "", ErrMsg: ""}))
-//line users.gsx:53:5
-				_gsxgw.S("<label")
-				_gsxgw.S(" class=\"block text-sm\"")
-				_gsxgw.S(">")
-//line users.gsx:54:6
-				_gsxgw.S("<span")
-				_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
-				_gsxgw.S(">")
-				_gsxgw.S("Password")
-				_gsxgw.S("</span>")
-//line users.gsx:55:6
-				_gsxgw.S("<input")
-				_gsxgw.S(" type=\"password\"")
-				_gsxgw.S(" name=\"password\"")
+//line users.gsx:71:6
+				_gsxgw.S("<label class=\"block text-sm\">")
+//line users.gsx:72:7
+				_gsxgw.S("<span class=\"mb-1 block font-medium text-slate-700\">Password</span>")
+//line users.gsx:75:7
+				_gsxgw.S("<input type=\"password\" name=\"password\"")
 				_gsxgw.BoolAttr("required", true)
-				_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"")
-				_gsxgw.S("/>")
-				_gsxgw.S("</label>")
-//line users.gsx:62:5
-				_gsxgw.S("<label")
-				_gsxgw.S(" class=\"flex items-center gap-2 text-sm\"")
-				_gsxgw.S(">")
-//line users.gsx:63:6
-				_gsxgw.S("<input")
-				_gsxgw.S(" type=\"checkbox\"")
-				_gsxgw.S(" name=\"is_admin\"")
-				_gsxgw.S("/>")
-				_gsxgw.S("Grant admin")
-				_gsxgw.S("</label>")
-//line users.gsx:66:5
+				_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-2 py-1.5 text-sm\"/></label>")
+//line users.gsx:82:6
+				_gsxgw.S("<label class=\"flex items-center gap-2 text-sm\">")
+//line users.gsx:83:7
+				_gsxgw.S("<input type=\"checkbox\" name=\"is_admin\"/>Grant admin</label>")
+//line users.gsx:86:6
 				_gsxgw.Node(ctx, components.Button(components.ButtonProps{Label: "Create", Attrs: gsx.Attrs{}.Merge(gsx.Attrs{"type": "submit"})}))
 				_gsxgw.S("</form>")
 				return _gsxgw.Err()
diff --git a/examples/blog/blog/category.gsx b/examples/blog/blog/category.gsx
index 8586d97..4527eb6 100644
--- a/examples/blog/blog/category.gsx
+++ b/examples/blog/blog/category.gsx
@@ -53,8 +53,10 @@ func (categoryPage) Props(r *http.Request, s *store.Store) (categoryProps, error
 
 component (p categoryPage) Page(props categoryProps) {
 	<layout.PublicShell title={props.Category.Name}>
-		<h1 class="mb-1 text-2xl font-semibold">{props.Category.Name}</h1>
-		<p class="mb-6 text-sm text-slate-500">Posts filed under this category.</p>
+		<h1 class="mb-1 text-2xl font-semibold">{ props.Category.Name }</h1>
+		<p class="mb-6 text-sm text-slate-500">
+			Posts filed under this category.
+		</p>
 		<div class="space-y-4">
 			{ if len(props.Posts) == 0 {
 				<p class="text-sm text-slate-500">Nothing here yet.</p>
@@ -63,8 +65,6 @@ component (p categoryPage) Page(props categoryProps) {
 				<PostCard p={post}/>
 			} }
 		</div>
-		<div class="mt-6">
-			{ components.Pagination(props.Pagination) }
-		</div>
+		<div class="mt-6">{ components.Pagination(props.Pagination) }</div>
 	</layout.PublicShell>
 }
diff --git a/examples/blog/blog/category.x.go b/examples/blog/blog/category.x.go
index 5d09775..2faa8e3 100644
--- a/examples/blog/blog/category.x.go
+++ b/examples/blog/blog/category.x.go
@@ -63,42 +63,28 @@ func (p categoryPage) Page(props categoryProps) gsx.Node {
 		_gsxgw.Node(ctx, layout.PublicShell(layout.PublicShellProps{Title: props.Category.Name, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line category.gsx:56:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"mb-1 text-2xl font-semibold\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<h1 class=\"mb-1 text-2xl font-semibold\">")
 //line category.gsx:56:43
 			_gsxgw.Text(string(props.Category.Name))
 			_gsxgw.S("</h1>")
 //line category.gsx:57:3
-			_gsxgw.S("<p")
-			_gsxgw.S(" class=\"mb-6 text-sm text-slate-500\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Posts filed under this category.")
-			_gsxgw.S("</p>")
-//line category.gsx:58:3
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"space-y-4\"")
-			_gsxgw.S(">")
-//line category.gsx:59:4
+			_gsxgw.S("<p class=\"mb-6 text-sm text-slate-500\">Posts filed under this category.</p>")
+//line category.gsx:60:3
+			_gsxgw.S("<div class=\"space-y-4\">")
+//line category.gsx:61:4
 			if len(props.Posts) == 0 {
-//line category.gsx:60:5
-				_gsxgw.S("<p")
-				_gsxgw.S(" class=\"text-sm text-slate-500\"")
-				_gsxgw.S(">")
-				_gsxgw.S("Nothing here yet.")
-				_gsxgw.S("</p>")
+//line category.gsx:62:5
+				_gsxgw.S("<p class=\"text-sm text-slate-500\">Nothing here yet.</p>")
 			}
-//line category.gsx:62:4
+//line category.gsx:64:4
 			for _, post := range props.Posts {
-//line category.gsx:63:5
+//line category.gsx:65:5
 				_gsxgw.Node(ctx, PostCard(PostCardProps{P: post}))
 			}
 			_gsxgw.S("</div>")
-//line category.gsx:66:3
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"mt-6\"")
-			_gsxgw.S(">")
-//line category.gsx:67:4
+//line category.gsx:68:3
+			_gsxgw.S("<div class=\"mt-6\">")
+//line category.gsx:68:21
 			_gsxgw.Node(ctx, components.Pagination(props.Pagination))
 			_gsxgw.S("</div>")
 			return _gsxgw.Err()
diff --git a/examples/blog/blog/components.gsx b/examples/blog/blog/components.gsx
index 6b214ad..16b6e9c 100644
--- a/examples/blog/blog/components.gsx
+++ b/examples/blog/blog/components.gsx
@@ -10,17 +10,20 @@ import (
 
 component PostMeta(p store.Post) {
 	<p class="text-xs text-slate-500">
-		Posted {p.CreatedAt.Format("Jan 2, 2006")}
+		Posted { p.CreatedAt.Format("Jan 2, 2006") }
 	</p>
 }
 
 component PostCard(p store.Post) {
 	<article class="rounded-lg border bg-white p-5 shadow-sm">
-		<a class="text-lg font-semibold text-slate-900 hover:underline" href={ postPage{} |> url("slug", p.Slug) }>
-			{p.Title}
+		<a
+			class="text-lg font-semibold text-slate-900 hover:underline"
+			href={postPage{} |> url("slug", p.Slug)}
+		>
+			{ p.Title }
 		</a>
 		<PostMeta p={p}/>
-		<p class="mt-2 line-clamp-2 text-sm text-slate-700">{p.Body}</p>
+		<p class="mt-2 line-clamp-2 text-sm text-slate-700">{ p.Body }</p>
 	</article>
 }
 
@@ -28,18 +31,20 @@ component PostCard(p store.Post) {
 // can re-render it from ServeHTTP via RenderComponent(CommentsList(...)).
 // It owns its own wrapper id, which doubles as the HTMX hx-target.
 component CommentsList(comments []store.Comment) {
-	<div id={ CommentsList |> id } class="space-y-3">
+	<div id={CommentsList |> id} class="space-y-3">
 		{ if len(comments) == 0 {
-			<p class="text-sm text-slate-500">No comments yet — be the first.</p>
+			<p class="text-sm text-slate-500">
+				No comments yet — be the first.
+			</p>
 		} }
 		{ for _, c := range comments {
 			<article class="rounded border bg-slate-50 p-3">
 				<header class="text-xs font-medium text-slate-700">
-					{c.Author} · {c.CreatedAt.Format("15:04 Jan 2")}
+					{ c.Author } · { c.CreatedAt.Format("15:04 Jan 2") }
 				</header>
-				<p class="mt-1 text-sm text-slate-800">{c.Body}</p>
+				<p class="mt-1 text-sm text-slate-800">{ c.Body }</p>
 			</article>
 		} }
-		<p class="text-xs text-slate-400">Total: {len(comments)}</p>
+		<p class="text-xs text-slate-400">Total: { len(comments) }</p>
 	</div>
 }
diff --git a/examples/blog/blog/components.x.go b/examples/blog/blog/components.x.go
index e43fb10..b45e9a5 100644
--- a/examples/blog/blog/components.x.go
+++ b/examples/blog/blog/components.x.go
@@ -22,14 +22,12 @@ func PostMeta(_gsxp PostMetaProps) gsx.Node {
 		p := _gsxp.P
 		_gsxgw := gsx.W(_gsxw)
 //line components.gsx:12:2
-		_gsxgw.S("<p")
-		_gsxgw.S(" class=\"")
+		_gsxgw.S("<p class=\"")
 		_gsxgw.Class(gsx.Class("text-xs text-slate-500"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
-		_gsxgw.S(">")
-		_gsxgw.S("Posted ")
+		_gsxgw.S(">Posted ")
 //line components.gsx:13:10
 		_gsxgw.Text(string(p.CreatedAt.Format("Jan 2, 2006")))
 		_gsxgw.S("</p>")
@@ -47,37 +45,31 @@ func PostCard(_gsxp PostCardProps) gsx.Node {
 		p := _gsxp.P
 		_gsxgw := gsx.W(_gsxw)
 //line components.gsx:18:2
-		_gsxgw.S("<article")
-		_gsxgw.S(" class=\"")
+		_gsxgw.S("<article class=\"")
 		_gsxgw.Class(gsx.Class("rounded-lg border bg-white p-5 shadow-sm"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
 //line components.gsx:19:3
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"text-lg font-semibold text-slate-900 hover:underline\"")
+		_gsxgw.S("<a class=\"text-lg font-semibold text-slate-900 hover:underline\"")
 		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (postPage{}), "slug", p.Slug)
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv0))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-//line components.gsx:20:4
+		_gsxgw.S("\">")
+//line components.gsx:23:4
 		_gsxgw.Text(string(p.Title))
 		_gsxgw.S("</a>")
-//line components.gsx:22:3
+//line components.gsx:25:3
 		_gsxgw.Node(ctx, PostMeta(PostMetaProps{P: p}))
-//line components.gsx:23:3
-		_gsxgw.S("<p")
-		_gsxgw.S(" class=\"mt-2 line-clamp-2 text-sm text-slate-700\"")
-		_gsxgw.S(">")
-//line components.gsx:23:55
+//line components.gsx:26:3
+		_gsxgw.S("<p class=\"mt-2 line-clamp-2 text-sm text-slate-700\">")
+//line components.gsx:26:55
 		_gsxgw.Text(string(p.Body))
-		_gsxgw.S("</p>")
-		_gsxgw.S("</article>")
+		_gsxgw.S("</p></article>")
 		return _gsxgw.Err()
 	})
 }
@@ -95,7 +87,7 @@ func CommentsList(_gsxp CommentsListProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		comments := _gsxp.Comments
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:31:2
+//line components.gsx:34:2
 		_gsxgw.S("<div")
 		if !_gsxp.Attrs.Has("id") {
 			_gsxv1, _gsxerr := _gsxf0.ID(ctx, (CommentsList))
@@ -112,49 +104,34 @@ func CommentsList(_gsxp CommentsListProps) gsx.Node {
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:32:3
+//line components.gsx:35:3
 		if len(comments) == 0 {
-//line components.gsx:33:4
-			_gsxgw.S("<p")
-			_gsxgw.S(" class=\"text-sm text-slate-500\"")
-			_gsxgw.S(">")
-			_gsxgw.S("No comments yet — be the first.")
-			_gsxgw.S("</p>")
+//line components.gsx:36:4
+			_gsxgw.S("<p class=\"text-sm text-slate-500\">No comments yet — be the first.</p>")
 		}
-//line components.gsx:35:3
+//line components.gsx:40:3
 		for _, c := range comments {
-//line components.gsx:36:4
-			_gsxgw.S("<article")
-			_gsxgw.S(" class=\"rounded border bg-slate-50 p-3\"")
-			_gsxgw.S(">")
-//line components.gsx:37:5
-			_gsxgw.S("<header")
-			_gsxgw.S(" class=\"text-xs font-medium text-slate-700\"")
-			_gsxgw.S(">")
-//line components.gsx:38:6
+//line components.gsx:41:4
+			_gsxgw.S("<article class=\"rounded border bg-slate-50 p-3\">")
+//line components.gsx:42:5
+			_gsxgw.S("<header class=\"text-xs font-medium text-slate-700\">")
+//line components.gsx:43:6
 			_gsxgw.Text(string(c.Author))
 			_gsxgw.S(" · ")
-//line components.gsx:38:20
+//line components.gsx:43:22
 			_gsxgw.Text(string(c.CreatedAt.Format("15:04 Jan 2")))
 			_gsxgw.S("</header>")
-//line components.gsx:40:5
-			_gsxgw.S("<p")
-			_gsxgw.S(" class=\"mt-1 text-sm text-slate-800\"")
-			_gsxgw.S(">")
-//line components.gsx:40:44
+//line components.gsx:45:5
+			_gsxgw.S("<p class=\"mt-1 text-sm text-slate-800\">")
+//line components.gsx:45:44
 			_gsxgw.Text(string(c.Body))
-			_gsxgw.S("</p>")
-			_gsxgw.S("</article>")
+			_gsxgw.S("</p></article>")
 		}
-//line components.gsx:43:3
-		_gsxgw.S("<p")
-		_gsxgw.S(" class=\"text-xs text-slate-400\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Total: ")
-//line components.gsx:43:44
+//line components.gsx:48:3
+		_gsxgw.S("<p class=\"text-xs text-slate-400\">Total: ")
+//line components.gsx:48:44
 		_gsxgw.Text(strconv.FormatInt(int64(len(comments)), 10))
-		_gsxgw.S("</p>")
-		_gsxgw.S("</div>")
+		_gsxgw.S("</p></div>")
 		return _gsxgw.Err()
 	})
 }
diff --git a/examples/blog/blog/home.gsx b/examples/blog/blog/home.gsx
index 874ebe3..4fc5d6e 100644
--- a/examples/blog/blog/home.gsx
+++ b/examples/blog/blog/home.gsx
@@ -38,8 +38,11 @@ component (p homePage) Page(props homeProps) {
 			<ul class="flex flex-wrap gap-2">
 				{ for _, c := range props.Categories {
 					<li>
-						<a class="rounded-full border px-3 py-1 text-sm hover:bg-slate-50" href={ categoryPage{} |> url("slug", c.Slug) }>
-							{c.Name}
+						<a
+							class="rounded-full border px-3 py-1 text-sm hover:bg-slate-50"
+							href={categoryPage{} |> url("slug", c.Slug)}
+						>
+							{ c.Name }
 						</a>
 					</li>
 				} }
diff --git a/examples/blog/blog/home.x.go b/examples/blog/blog/home.x.go
index 45beebf..944dc86 100644
--- a/examples/blog/blog/home.x.go
+++ b/examples/blog/blog/home.x.go
@@ -40,15 +40,9 @@ func (p homePage) Page(props homeProps) gsx.Node {
 		_gsxgw.Node(ctx, layout.PublicShell(layout.PublicShellProps{Title: "Home", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line home.gsx:31:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Recent Posts")
-			_gsxgw.S("</h1>")
+			_gsxgw.S("<h1 class=\"mb-4 text-2xl font-semibold\">Recent Posts</h1>")
 //line home.gsx:32:3
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"space-y-4\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<div class=\"space-y-4\">")
 //line home.gsx:33:4
 			for _, post := range props.Posts {
 //line home.gsx:34:5
@@ -59,29 +53,23 @@ func (p homePage) Page(props homeProps) gsx.Node {
 			_gsxgw.Node(ctx, components.Card(components.CardProps{Title: "Browse by category", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 				_gsxgw := gsx.W(_gsxw)
 //line home.gsx:38:4
-				_gsxgw.S("<ul")
-				_gsxgw.S(" class=\"flex flex-wrap gap-2\"")
-				_gsxgw.S(">")
+				_gsxgw.S("<ul class=\"flex flex-wrap gap-2\">")
 //line home.gsx:39:5
 				for _, c := range props.Categories {
 //line home.gsx:40:6
-					_gsxgw.S("<li")
-					_gsxgw.S(">")
+					_gsxgw.S("<li>")
 //line home.gsx:41:7
-					_gsxgw.S("<a")
-					_gsxgw.S(" class=\"rounded-full border px-3 py-1 text-sm hover:bg-slate-50\"")
+					_gsxgw.S("<a class=\"rounded-full border px-3 py-1 text-sm hover:bg-slate-50\"")
 					_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (categoryPage{}), "slug", c.Slug)
 					if _gsxerr != nil {
 						return _gsxerr
 					}
 					_gsxgw.S(" href=\"")
 					_gsxgw.URL(string(_gsxv0))
-					_gsxgw.S("\"")
-					_gsxgw.S(">")
-//line home.gsx:42:8
+					_gsxgw.S("\">")
+//line home.gsx:45:8
 					_gsxgw.Text(string(c.Name))
-					_gsxgw.S("</a>")
-					_gsxgw.S("</li>")
+					_gsxgw.S("</a></li>")
 				}
 				_gsxgw.S("</ul>")
 				return _gsxgw.Err()
diff --git a/examples/blog/blog/post.gsx b/examples/blog/blog/post.gsx
index 755f364..cef8761 100644
--- a/examples/blog/blog/post.gsx
+++ b/examples/blog/blog/post.gsx
@@ -37,15 +37,22 @@ func (postPage) Props(r *http.Request, s *store.Store) (postProps, error) {
 component (p postPage) Page(props postProps) {
 	<layout.PublicShell title={props.Post.Title}>
 		<article class="space-y-3">
-			<h1 class="text-2xl font-semibold">{props.Post.Title}</h1>
+			<h1 class="text-2xl font-semibold">{ props.Post.Title }</h1>
 			<p class="text-sm text-slate-500">
-				by {props.Author.Username}
+				by { props.Author.Username }
 				{ if props.Category.Slug != "" {
-					· <a class="hover:underline" href={ categoryPage{} |> url("slug", props.Category.Slug) }>{props.Category.Name}</a>
+					· <a
+						class="hover:underline"
+						href={
+							categoryPage{} |> url("slug", props.Category.Slug)
+						}
+					>
+						{ props.Category.Name }
+					</a>
 				} }
 			</p>
 			<div class="prose max-w-none text-slate-800">
-				<p>{props.Post.Body}</p>
+				<p>{ props.Post.Body }</p>
 			</div>
 		</article>
 		<section class="mt-10 space-y-4">
@@ -53,15 +60,28 @@ component (p postPage) Page(props postProps) {
 			<CommentsList comments={props.Comments}/>
 			<form
 				class="space-y-2 rounded border bg-white p-4"
-				hx-post={ commentHandler{} |> url("slug", props.Post.Slug) }
-				hx-target={ CommentsList |> target }
+				hx-post={commentHandler{} |> url("slug", props.Post.Slug)}
+				hx-target={CommentsList |> target}
 				hx-swap="outerHTML"
 				hx-on:htmx:after-request="this.reset()"
 			>
 				<h3 class="text-sm font-semibold">Add a comment</h3>
-				<components.Input name="author" label="Name" value="" errMsg=""/>
-				<components.Textarea name="body" label="Comment" value="" errMsg=""/>
-				<components.Button label="Post comment" { gsx.Attrs{"type": "submit"}... }/>
+				<components.Input
+					name="author"
+					label="Name"
+					value=""
+					errMsg=""
+				/>
+				<components.Textarea
+					name="body"
+					label="Comment"
+					value=""
+					errMsg=""
+				/>
+				<components.Button
+					label="Post comment"
+					{ gsx.Attrs{"type": "submit"}... }
+				/>
 			</form>
 		</section>
 	</layout.PublicShell>
diff --git a/examples/blog/blog/post.x.go b/examples/blog/blog/post.x.go
index de94be3..7cfb5b5 100644
--- a/examples/blog/blog/post.x.go
+++ b/examples/blog/blog/post.x.go
@@ -46,69 +46,48 @@ func (p postPage) Page(props postProps) gsx.Node {
 		_gsxgw.Node(ctx, layout.PublicShell(layout.PublicShellProps{Title: props.Post.Title, Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line post.gsx:39:3
-			_gsxgw.S("<article")
-			_gsxgw.S(" class=\"space-y-3\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<article class=\"space-y-3\">")
 //line post.gsx:40:4
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"text-2xl font-semibold\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<h1 class=\"text-2xl font-semibold\">")
 //line post.gsx:40:39
 			_gsxgw.Text(string(props.Post.Title))
 			_gsxgw.S("</h1>")
 //line post.gsx:41:4
-			_gsxgw.S("<p")
-			_gsxgw.S(" class=\"text-sm text-slate-500\"")
-			_gsxgw.S(">")
-			_gsxgw.S("by ")
+			_gsxgw.S("<p class=\"text-sm text-slate-500\">by ")
 //line post.gsx:42:8
 			_gsxgw.Text(string(props.Author.Username))
 //line post.gsx:43:5
 			if props.Category.Slug != "" {
 				_gsxgw.S("· ")
 //line post.gsx:44:9
-				_gsxgw.S("<a")
-				_gsxgw.S(" class=\"hover:underline\"")
+				_gsxgw.S("<a class=\"hover:underline\"")
 				_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (categoryPage{}), "slug", props.Category.Slug)
 				if _gsxerr != nil {
 					return _gsxerr
 				}
 				_gsxgw.S(" href=\"")
 				_gsxgw.URL(string(_gsxv0))
-				_gsxgw.S("\"")
-				_gsxgw.S(">")
-//line post.gsx:44:96
+				_gsxgw.S("\">")
+//line post.gsx:50:7
 				_gsxgw.Text(string(props.Category.Name))
 				_gsxgw.S("</a>")
 			}
 			_gsxgw.S("</p>")
-//line post.gsx:47:4
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"prose max-w-none text-slate-800\"")
-			_gsxgw.S(">")
-//line post.gsx:48:5
-			_gsxgw.S("<p")
-			_gsxgw.S(">")
-//line post.gsx:48:8
+//line post.gsx:54:4
+			_gsxgw.S("<div class=\"prose max-w-none text-slate-800\">")
+//line post.gsx:55:5
+			_gsxgw.S("<p>")
+//line post.gsx:55:8
 			_gsxgw.Text(string(props.Post.Body))
-			_gsxgw.S("</p>")
-			_gsxgw.S("</div>")
-			_gsxgw.S("</article>")
-//line post.gsx:51:3
-			_gsxgw.S("<section")
-			_gsxgw.S(" class=\"mt-10 space-y-4\"")
-			_gsxgw.S(">")
-//line post.gsx:52:4
-			_gsxgw.S("<h2")
-			_gsxgw.S(" class=\"text-lg font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Comments")
-			_gsxgw.S("</h2>")
-//line post.gsx:53:4
+			_gsxgw.S("</p></div></article>")
+//line post.gsx:58:3
+			_gsxgw.S("<section class=\"mt-10 space-y-4\">")
+//line post.gsx:59:4
+			_gsxgw.S("<h2 class=\"text-lg font-semibold\">Comments</h2>")
+//line post.gsx:60:4
 			_gsxgw.Node(ctx, CommentsList(CommentsListProps{Comments: props.Comments}))
-//line post.gsx:54:4
-			_gsxgw.S("<form")
-			_gsxgw.S(" class=\"space-y-2 rounded border bg-white p-4\"")
+//line post.gsx:61:4
+			_gsxgw.S("<form class=\"space-y-2 rounded border bg-white p-4\"")
 			_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (commentHandler{}), "slug", props.Post.Slug)
 			if _gsxerr != nil {
 				return _gsxerr
@@ -122,24 +101,16 @@ func (p postPage) Page(props postProps) gsx.Node {
 			}
 			_gsxgw.S(" hx-target=\"")
 			_gsxgw.AttrValue(string(_gsxv2))
-			_gsxgw.S("\"")
-			_gsxgw.S(" hx-swap=\"outerHTML\"")
-			_gsxgw.S(" hx-on:htmx:after-request=\"this.reset()\"")
-			_gsxgw.S(">")
-//line post.gsx:61:5
-			_gsxgw.S("<h3")
-			_gsxgw.S(" class=\"text-sm font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Add a comment")
-			_gsxgw.S("</h3>")
-//line post.gsx:62:5
+			_gsxgw.S("\" hx-swap=\"outerHTML\" hx-on:htmx:after-request=\"this.reset()\">")
+//line post.gsx:68:5
+			_gsxgw.S("<h3 class=\"text-sm font-semibold\">Add a comment</h3>")
+//line post.gsx:69:5
 			_gsxgw.Node(ctx, components.Input(components.InputProps{Name: "author", Label: "Name", Value: "", ErrMsg: ""}))
-//line post.gsx:63:5
+//line post.gsx:75:5
 			_gsxgw.Node(ctx, components.Textarea(components.TextareaProps{Name: "body", Label: "Comment", Value: "", ErrMsg: ""}))
-//line post.gsx:64:5
+//line post.gsx:81:5
 			_gsxgw.Node(ctx, components.Button(components.ButtonProps{Label: "Post comment", Attrs: gsx.Attrs{}.Merge(gsx.Attrs{"type": "submit"})}))
-			_gsxgw.S("</form>")
-			_gsxgw.S("</section>")
+			_gsxgw.S("</form></section>")
 			return _gsxgw.Err()
 		})}))
 		return _gsxgw.Err()
diff --git a/examples/blog/blog/search.gsx b/examples/blog/blog/search.gsx
index a6efeb5..afa51fe 100644
--- a/examples/blog/blog/search.gsx
+++ b/examples/blog/blog/search.gsx
@@ -35,8 +35,8 @@ component (p searchPage) Page(props searchProps) {
 		<h1 class="mb-4 text-2xl font-semibold">Search</h1>
 		<form
 			class="mb-6"
-			hx-get={ searchPage{} |> url }
-			hx-target={ p.Results |> target }
+			hx-get={searchPage{} |> url}
+			hx-target={p.Results |> target}
 			hx-swap="outerHTML"
 			hx-trigger="input changed delay:250ms from:input, submit"
 			hx-push-url="true"
@@ -54,13 +54,19 @@ component (p searchPage) Page(props searchProps) {
 }
 
 component (p searchPage) Results(props searchProps) {
-	<div id={ searchPage.Results |> id } class="space-y-4">
+	<div id={searchPage.Results |> id} class="space-y-4">
 		{ if props.Query == "" {
 			<p class="text-sm text-slate-500">Type a query to search.</p>
 		} else if len(props.Posts) == 0 {
-			<p class="text-sm text-slate-500">No results for "{props.Query}".</p>
+			<p class="text-sm text-slate-500">
+				No results for "
+				{ props.Query }
+				".
+			</p>
 		} else {
-			<p class="text-xs text-slate-500">{resultsCount(len(props.Posts))}</p>
+			<p class="text-xs text-slate-500">
+				{ resultsCount(len(props.Posts)) }
+			</p>
 			{ for _, post := range props.Posts {
 				<PostCard p={post}/>
 			} }
diff --git a/examples/blog/blog/search.x.go b/examples/blog/blog/search.x.go
index 0b19de3..4c92d7e 100644
--- a/examples/blog/blog/search.x.go
+++ b/examples/blog/blog/search.x.go
@@ -43,14 +43,9 @@ func (p searchPage) Page(props searchProps) gsx.Node {
 		_gsxgw.Node(ctx, layout.PublicShell(layout.PublicShellProps{Title: "Search", Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line search.gsx:35:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(" class=\"mb-4 text-2xl font-semibold\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Search")
-			_gsxgw.S("</h1>")
+			_gsxgw.S("<h1 class=\"mb-4 text-2xl font-semibold\">Search</h1>")
 //line search.gsx:36:3
-			_gsxgw.S("<form")
-			_gsxgw.S(" class=\"mb-6\"")
+			_gsxgw.S("<form class=\"mb-6\"")
 			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (searchPage{}))
 			if _gsxerr != nil {
 				return _gsxerr
@@ -64,22 +59,13 @@ func (p searchPage) Page(props searchProps) gsx.Node {
 			}
 			_gsxgw.S(" hx-target=\"")
 			_gsxgw.AttrValue(string(_gsxv1))
-			_gsxgw.S("\"")
-			_gsxgw.S(" hx-swap=\"outerHTML\"")
-			_gsxgw.S(" hx-trigger=\"input changed delay:250ms from:input, submit\"")
-			_gsxgw.S(" hx-push-url=\"true\"")
-			_gsxgw.S(">")
+			_gsxgw.S("\" hx-swap=\"outerHTML\" hx-trigger=\"input changed delay:250ms from:input, submit\" hx-push-url=\"true\">")
 //line search.gsx:44:4
-			_gsxgw.S("<input")
-			_gsxgw.S(" name=\"q\"")
-			_gsxgw.S(" value=\"")
+			_gsxgw.S("<input name=\"q\" value=\"")
 			_gsxgw.AttrValue(string(props.Query))
-			_gsxgw.S("\"")
-			_gsxgw.S(" placeholder=\"Search posts...\"")
-			_gsxgw.S(" class=\"w-full rounded border border-slate-300 px-3 py-2 text-sm\"")
+			_gsxgw.S("\" placeholder=\"Search posts...\" class=\"w-full rounded border border-slate-300 px-3 py-2 text-sm\"")
 			_gsxgw.BoolAttr("autofocus", true)
-			_gsxgw.S("/>")
-			_gsxgw.S("</form>")
+			_gsxgw.S("/></form>")
 //line search.gsx:52:3
 			_gsxgw.Node(ctx, p.Results(props))
 			return _gsxgw.Err()
@@ -99,40 +85,28 @@ func (p searchPage) Results(props searchProps) gsx.Node {
 		}
 		_gsxgw.S(" id=\"")
 		_gsxgw.AttrValue(string(_gsxv2))
-		_gsxgw.S("\"")
-		_gsxgw.S(" class=\"space-y-4\"")
-		_gsxgw.S(">")
+		_gsxgw.S("\" class=\"space-y-4\">")
 //line search.gsx:58:3
 		if props.Query == "" {
 //line search.gsx:59:4
-			_gsxgw.S("<p")
-			_gsxgw.S(" class=\"text-sm text-slate-500\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Type a query to search.")
-			_gsxgw.S("</p>")
+			_gsxgw.S("<p class=\"text-sm text-slate-500\">Type a query to search.</p>")
 		} else {
 //line search.gsx:60:10
 			if len(props.Posts) == 0 {
 //line search.gsx:61:4
-				_gsxgw.S("<p")
-				_gsxgw.S(" class=\"text-sm text-slate-500\"")
-				_gsxgw.S(">")
-				_gsxgw.S("No results for \"")
-//line search.gsx:61:54
+				_gsxgw.S("<p class=\"text-sm text-slate-500\">No results for \"")
+//line search.gsx:63:5
 				_gsxgw.Text(string(props.Query))
-				_gsxgw.S("\".")
-				_gsxgw.S("</p>")
+				_gsxgw.S("\".</p>")
 			} else {
-//line search.gsx:63:4
-				_gsxgw.S("<p")
-				_gsxgw.S(" class=\"text-xs text-slate-500\"")
-				_gsxgw.S(">")
-//line search.gsx:63:38
+//line search.gsx:67:4
+				_gsxgw.S("<p class=\"text-xs text-slate-500\">")
+//line search.gsx:68:5
 				_gsxgw.Text(string(resultsCount(len(props.Posts))))
 				_gsxgw.S("</p>")
-//line search.gsx:64:4
+//line search.gsx:70:4
 				for _, post := range props.Posts {
-//line search.gsx:65:5
+//line search.gsx:71:5
 					_gsxgw.Node(ctx, PostCard(PostCardProps{P: post}))
 				}
 			}
diff --git a/examples/blog/ui/components/components.gsx b/examples/blog/ui/components/components.gsx
index 1e84124..423096b 100644
--- a/examples/blog/ui/components/components.gsx
+++ b/examples/blog/ui/components/components.gsx
@@ -28,16 +28,20 @@ func alertClasses(kind AlertKind) string {
 
 component Alert(kind AlertKind, msg string) {
 	{ if msg != "" {
-		<div class={ "rounded border px-3 py-2 text-sm", alertClasses(kind) }>{msg}</div>
+		<div class={ "rounded border px-3 py-2 text-sm", alertClasses(kind) }>
+			{ msg }
+		</div>
 	} }
 }
 
 component Card(title string) {
 	<section class="rounded-lg border bg-white p-5 shadow-sm">
 		{ if title != "" {
-			<h2 class="mb-3 text-base font-semibold text-slate-900">{title}</h2>
+			<h2 class="mb-3 text-base font-semibold text-slate-900">
+				{ title }
+			</h2>
 		} }
-		{children}
+		{ children }
 	</section>
 }
 
@@ -47,42 +51,38 @@ component Button(label string) {
 	<button
 		class="inline-flex items-center rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700"
 	>
-		{label}
+		{ label }
 	</button>
 }
 
 component Input(name, label, value, errMsg string) {
 	<label class="block text-sm">
-		<span class="mb-1 block font-medium text-slate-700">{label}</span>
+		<span class="mb-1 block font-medium text-slate-700">{ label }</span>
 		<input
 			name={name}
 			value={value}
 			class={
-				"w-full rounded border px-2 py-1.5 text-sm",
-				"border-slate-300": errMsg == "",
-				"border-red-400": errMsg != "",
+				"w-full rounded border px-2 py-1.5 text-sm", "border-slate-300": errMsg == "", "border-red-400": errMsg != ""
 			}
 		/>
 		{ if errMsg != "" {
-			<span class="mt-1 block text-xs text-red-600">{errMsg}</span>
+			<span class="mt-1 block text-xs text-red-600">{ errMsg }</span>
 		} }
 	</label>
 }
 
 component Textarea(name, label, value, errMsg string) {
 	<label class="block text-sm">
-		<span class="mb-1 block font-medium text-slate-700">{label}</span>
+		<span class="mb-1 block font-medium text-slate-700">{ label }</span>
 		<textarea
 			name={name}
 			rows="6"
 			class={
-				"w-full rounded border px-2 py-1.5 text-sm",
-				"border-slate-300": errMsg == "",
-				"border-red-400": errMsg != "",
+				"w-full rounded border px-2 py-1.5 text-sm", "border-slate-300": errMsg == "", "border-red-400": errMsg != ""
 			}
-		>{value}</textarea>
+		>{ value }</textarea>
 		{ if errMsg != "" {
-			<span class="mt-1 block text-xs text-red-600">{errMsg}</span>
+			<span class="mt-1 block text-xs text-red-600">{ errMsg }</span>
 		} }
 	</label>
 }
@@ -91,18 +91,34 @@ component Textarea(name, label, value, errMsg string) {
 // with HX-Target: #pagination resolve here regardless of which page hosts it.
 component Pagination(p PageNav) {
 	<nav id="pagination" class="flex items-center justify-between text-sm">
-		<span class="text-slate-500">{p.Range()}</span>
+		<span class="text-slate-500">{ p.Range() }</span>
 		<div class="flex gap-2">
 			{ if p.HasPrev() {
-				<a class="rounded border px-2 py-1 hover:bg-slate-50" href={ p.URL(p.Page - 1) }>← Prev</a>
+				<a
+					class="rounded border px-2 py-1 hover:bg-slate-50"
+					href={p.URL(p.Page - 1)}
+				>
+					← Prev
+				</a>
 			} else {
-				<span class="rounded border px-2 py-1 text-slate-300">← Prev</span>
+				<span class="rounded border px-2 py-1 text-slate-300">
+					← Prev
+				</span>
 			} }
-			<span class="px-2 py-1 text-slate-600">Page {p.Page} of {p.Pages()}</span>
+			<span class="px-2 py-1 text-slate-600">
+				Page { p.Page } of { p.Pages() }
+			</span>
 			{ if p.HasNext() {
-				<a class="rounded border px-2 py-1 hover:bg-slate-50" href={ p.URL(p.Page + 1) }>Next →</a>
+				<a
+					class="rounded border px-2 py-1 hover:bg-slate-50"
+					href={p.URL(p.Page + 1)}
+				>
+					Next →
+				</a>
 			} else {
-				<span class="rounded border px-2 py-1 text-slate-300">Next →</span>
+				<span class="rounded border px-2 py-1 text-slate-300">
+					Next →
+				</span>
 			} }
 		</div>
 	</nav>
@@ -115,7 +131,7 @@ component ErrorPage(status int, msg string) {
 	<html lang="en">
 		<head>
 			<meta charset="utf-8"/>
-			<title>Error {status}</title>
+			<title>Error { status }</title>
 			<script src="https://cdn.tailwindcss.com"></script>
 		</head>
 		<body class="bg-slate-50 text-slate-900">
@@ -128,8 +144,10 @@ component ErrorPage(status int, msg string) {
 
 component ErrorBlock(status int, msg string) {
 	<div class="rounded-lg border border-red-200 bg-red-50 p-6 text-center">
-		<div class="text-4xl font-semibold text-red-700">{status}</div>
-		<p class="mt-2 text-red-700">{msg}</p>
-		<a class="mt-4 inline-block text-sm text-red-700 underline" href="/">Back to home</a>
+		<div class="text-4xl font-semibold text-red-700">{ status }</div>
+		<p class="mt-2 text-red-700">{ msg }</p>
+		<a class="mt-4 inline-block text-sm text-red-700 underline" href="/">
+			Back to home
+		</a>
 	</div>
 }
diff --git a/examples/blog/ui/components/components.x.go b/examples/blog/ui/components/components.x.go
index 876cce7..dfad0d8 100644
--- a/examples/blog/ui/components/components.x.go
+++ b/examples/blog/ui/components/components.x.go
@@ -42,12 +42,10 @@ func Alert(_gsxp AlertProps) gsx.Node {
 //line components.gsx:30:2
 		if msg != "" {
 //line components.gsx:31:3
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"")
+			_gsxgw.S("<div class=\"")
 			_gsxgw.Class(gsx.Class("rounded border px-3 py-2 text-sm"), gsx.Class(alertClasses(kind)))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
-//line components.gsx:31:73
+			_gsxgw.S("\">")
+//line components.gsx:32:4
 			_gsxgw.Text(string(msg))
 			_gsxgw.S("</div>")
 		}
@@ -66,25 +64,22 @@ func Card(_gsxp CardProps) gsx.Node {
 		title := _gsxp.Title
 		children := _gsxp.Children
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:36:2
-		_gsxgw.S("<section")
-		_gsxgw.S(" class=\"")
+//line components.gsx:38:2
+		_gsxgw.S("<section class=\"")
 		_gsxgw.Class(gsx.Class("rounded-lg border bg-white p-5 shadow-sm"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:37:3
+//line components.gsx:39:3
 		if title != "" {
-//line components.gsx:38:4
-			_gsxgw.S("<h2")
-			_gsxgw.S(" class=\"mb-3 text-base font-semibold text-slate-900\"")
-			_gsxgw.S(">")
-//line components.gsx:38:60
+//line components.gsx:40:4
+			_gsxgw.S("<h2 class=\"mb-3 text-base font-semibold text-slate-900\">")
+//line components.gsx:41:5
 			_gsxgw.Text(string(title))
 			_gsxgw.S("</h2>")
 		}
-//line components.gsx:40:3
+//line components.gsx:44:3
 		_gsxgw.Node(ctx, children)
 		_gsxgw.S("</section>")
 		return _gsxgw.Err()
@@ -103,15 +98,14 @@ func Button(_gsxp ButtonProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		label := _gsxp.Label
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:47:2
-		_gsxgw.S("<button")
-		_gsxgw.S(" class=\"")
+//line components.gsx:51:2
+		_gsxgw.S("<button class=\"")
 		_gsxgw.Class(gsx.Class("inline-flex items-center rounded bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:50:3
+//line components.gsx:54:3
 		_gsxgw.Text(string(label))
 		_gsxgw.S("</button>")
 		return _gsxgw.Err()
@@ -133,40 +127,31 @@ func Input(_gsxp InputProps) gsx.Node {
 		value := _gsxp.Value
 		errMsg := _gsxp.ErrMsg
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:55:2
-		_gsxgw.S("<label")
-		_gsxgw.S(" class=\"")
+//line components.gsx:59:2
+		_gsxgw.S("<label class=\"")
 		_gsxgw.Class(gsx.Class("block text-sm"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:56:3
-		_gsxgw.S("<span")
-		_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
-		_gsxgw.S(">")
-//line components.gsx:56:55
+//line components.gsx:60:3
+		_gsxgw.S("<span class=\"mb-1 block font-medium text-slate-700\">")
+//line components.gsx:60:55
 		_gsxgw.Text(string(label))
 		_gsxgw.S("</span>")
-//line components.gsx:57:3
-		_gsxgw.S("<input")
-		_gsxgw.S(" name=\"")
+//line components.gsx:61:3
+		_gsxgw.S("<input name=\"")
 		_gsxgw.AttrValue(string(name))
-		_gsxgw.S("\"")
-		_gsxgw.S(" value=\"")
+		_gsxgw.S("\" value=\"")
 		_gsxgw.AttrValue(string(value))
-		_gsxgw.S("\"")
-		_gsxgw.S(" class=\"")
+		_gsxgw.S("\" class=\"")
 		_gsxgw.Class(gsx.Class("w-full rounded border px-2 py-1.5 text-sm"), gsx.ClassIf("border-slate-300", errMsg == ""), gsx.ClassIf("border-red-400", errMsg != ""))
-		_gsxgw.S("\"")
-		_gsxgw.S("/>")
-//line components.gsx:66:3
+		_gsxgw.S("\"/>")
+//line components.gsx:68:3
 		if errMsg != "" {
-//line components.gsx:67:4
-			_gsxgw.S("<span")
-			_gsxgw.S(" class=\"mt-1 block text-xs text-red-600\"")
-			_gsxgw.S(">")
-//line components.gsx:67:50
+//line components.gsx:69:4
+			_gsxgw.S("<span class=\"mt-1 block text-xs text-red-600\">")
+//line components.gsx:69:50
 			_gsxgw.Text(string(errMsg))
 			_gsxgw.S("</span>")
 		}
@@ -190,40 +175,31 @@ func Textarea(_gsxp TextareaProps) gsx.Node {
 		value := _gsxp.Value
 		errMsg := _gsxp.ErrMsg
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:73:2
-		_gsxgw.S("<label")
-		_gsxgw.S(" class=\"")
+//line components.gsx:75:2
+		_gsxgw.S("<label class=\"")
 		_gsxgw.Class(gsx.Class("block text-sm"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:74:3
-		_gsxgw.S("<span")
-		_gsxgw.S(" class=\"mb-1 block font-medium text-slate-700\"")
-		_gsxgw.S(">")
-//line components.gsx:74:55
+//line components.gsx:76:3
+		_gsxgw.S("<span class=\"mb-1 block font-medium text-slate-700\">")
+//line components.gsx:76:55
 		_gsxgw.Text(string(label))
 		_gsxgw.S("</span>")
-//line components.gsx:75:3
-		_gsxgw.S("<textarea")
-		_gsxgw.S(" name=\"")
+//line components.gsx:77:3
+		_gsxgw.S("<textarea name=\"")
 		_gsxgw.AttrValue(string(name))
-		_gsxgw.S("\"")
-		_gsxgw.S(" rows=\"6\"")
-		_gsxgw.S(" class=\"")
+		_gsxgw.S("\" rows=\"6\" class=\"")
 		_gsxgw.Class(gsx.Class("w-full rounded border px-2 py-1.5 text-sm"), gsx.ClassIf("border-slate-300", errMsg == ""), gsx.ClassIf("border-red-400", errMsg != ""))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
+		_gsxgw.S("\">")
 //line components.gsx:83:4
 		_gsxgw.Text(string(value))
 		_gsxgw.S("</textarea>")
 //line components.gsx:84:3
 		if errMsg != "" {
 //line components.gsx:85:4
-			_gsxgw.S("<span")
-			_gsxgw.S(" class=\"mt-1 block text-xs text-red-600\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<span class=\"mt-1 block text-xs text-red-600\">")
 //line components.gsx:85:50
 			_gsxgw.Text(string(errMsg))
 			_gsxgw.S("</span>")
@@ -240,80 +216,53 @@ func Pagination(p PageNav) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
 //line components.gsx:93:2
-		_gsxgw.S("<nav")
-		_gsxgw.S(" id=\"pagination\"")
-		_gsxgw.S(" class=\"flex items-center justify-between text-sm\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<nav id=\"pagination\" class=\"flex items-center justify-between text-sm\">")
 //line components.gsx:94:3
-		_gsxgw.S("<span")
-		_gsxgw.S(" class=\"text-slate-500\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<span class=\"text-slate-500\">")
 //line components.gsx:94:32
 		_gsxgw.Text(string(p.Range()))
 		_gsxgw.S("</span>")
 //line components.gsx:95:3
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"flex gap-2\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<div class=\"flex gap-2\">")
 //line components.gsx:96:4
 		if p.HasPrev() {
 //line components.gsx:97:5
-			_gsxgw.S("<a")
-			_gsxgw.S(" class=\"rounded border px-2 py-1 hover:bg-slate-50\"")
+			_gsxgw.S("<a class=\"rounded border px-2 py-1 hover:bg-slate-50\"")
 			_gsxv0, _gsxerr := p.URL(p.Page - 1)
 			if _gsxerr != nil {
 				return _gsxerr
 			}
 			_gsxgw.S(" href=\"")
 			_gsxgw.URL(string(_gsxv0))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
-			_gsxgw.S("← Prev")
-			_gsxgw.S("</a>")
+			_gsxgw.S("\">← Prev</a>")
 		} else {
-//line components.gsx:99:5
-			_gsxgw.S("<span")
-			_gsxgw.S(" class=\"rounded border px-2 py-1 text-slate-300\"")
-			_gsxgw.S(">")
-			_gsxgw.S("← Prev")
-			_gsxgw.S("</span>")
+//line components.gsx:104:5
+			_gsxgw.S("<span class=\"rounded border px-2 py-1 text-slate-300\">← Prev</span>")
 		}
-//line components.gsx:101:4
-		_gsxgw.S("<span")
-		_gsxgw.S(" class=\"px-2 py-1 text-slate-600\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Page ")
-//line components.gsx:101:48
+//line components.gsx:108:4
+		_gsxgw.S("<span class=\"px-2 py-1 text-slate-600\">Page ")
+//line components.gsx:109:10
 		_gsxgw.Text(strconv.FormatInt(int64(p.Page), 10))
 		_gsxgw.S(" of ")
-//line components.gsx:101:60
+//line components.gsx:109:24
 		_gsxgw.Text(strconv.FormatInt(int64(p.Pages()), 10))
 		_gsxgw.S("</span>")
-//line components.gsx:102:4
+//line components.gsx:111:4
 		if p.HasNext() {
-//line components.gsx:103:5
-			_gsxgw.S("<a")
-			_gsxgw.S(" class=\"rounded border px-2 py-1 hover:bg-slate-50\"")
+//line components.gsx:112:5
+			_gsxgw.S("<a class=\"rounded border px-2 py-1 hover:bg-slate-50\"")
 			_gsxv1, _gsxerr := p.URL(p.Page + 1)
 			if _gsxerr != nil {
 				return _gsxerr
 			}
 			_gsxgw.S(" href=\"")
 			_gsxgw.URL(string(_gsxv1))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Next →")
-			_gsxgw.S("</a>")
+			_gsxgw.S("\">Next →</a>")
 		} else {
-//line components.gsx:105:5
-			_gsxgw.S("<span")
-			_gsxgw.S(" class=\"rounded border px-2 py-1 text-slate-300\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Next →")
-			_gsxgw.S("</span>")
+//line components.gsx:119:5
+			_gsxgw.S("<span class=\"rounded border px-2 py-1 text-slate-300\">Next →</span>")
 		}
-		_gsxgw.S("</div>")
-		_gsxgw.S("</nav>")
+		_gsxgw.S("</div></nav>")
 		return _gsxgw.Err()
 	})
 }
@@ -332,43 +281,26 @@ func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 		msg := _gsxp.Msg
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
-//line components.gsx:115:2
-		_gsxgw.S("<html")
-		_gsxgw.S(" lang=\"en\"")
-		_gsxgw.S(">")
-//line components.gsx:116:3
-		_gsxgw.S("<head")
-		_gsxgw.S(">")
-//line components.gsx:117:4
-		_gsxgw.S("<meta")
-		_gsxgw.S(" charset=\"utf-8\"")
-		_gsxgw.S("/>")
-//line components.gsx:118:4
-		_gsxgw.S("<title")
-		_gsxgw.S(">")
-		_gsxgw.S("Error ")
-//line components.gsx:118:17
+//line components.gsx:131:2
+		_gsxgw.S("<html lang=\"en\">")
+//line components.gsx:132:3
+		_gsxgw.S("<head>")
+//line components.gsx:133:4
+		_gsxgw.S("<meta charset=\"utf-8\"/>")
+//line components.gsx:134:4
+		_gsxgw.S("<title>Error ")
+//line components.gsx:134:17
 		_gsxgw.Text(strconv.FormatInt(int64(status), 10))
 		_gsxgw.S("</title>")
-//line components.gsx:119:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://cdn.tailwindcss.com\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
-		_gsxgw.S("</head>")
-//line components.gsx:121:3
-		_gsxgw.S("<body")
-		_gsxgw.S(" class=\"bg-slate-50 text-slate-900\"")
-		_gsxgw.S(">")
-//line components.gsx:122:4
-		_gsxgw.S("<main")
-		_gsxgw.S(" class=\"mx-auto max-w-md px-4 py-16\"")
-		_gsxgw.S(">")
-//line components.gsx:123:5
+//line components.gsx:135:4
+		_gsxgw.S("<script src=\"https://cdn.tailwindcss.com\"></script></head>")
+//line components.gsx:137:3
+		_gsxgw.S("<body class=\"bg-slate-50 text-slate-900\">")
+//line components.gsx:138:4
+		_gsxgw.S("<main class=\"mx-auto max-w-md px-4 py-16\">")
+//line components.gsx:139:5
 		_gsxgw.Node(ctx, ErrorBlock(ErrorBlockProps{Status: status, Msg: msg}))
-		_gsxgw.S("</main>")
-		_gsxgw.S("</body>")
-		_gsxgw.S("</html>")
+		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
 	})
 }
@@ -384,36 +316,25 @@ func ErrorBlock(_gsxp ErrorBlockProps) gsx.Node {
 		status := _gsxp.Status
 		msg := _gsxp.Msg
 		_gsxgw := gsx.W(_gsxw)
-//line components.gsx:130:2
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"")
+//line components.gsx:146:2
+		_gsxgw.S("<div class=\"")
 		_gsxgw.Class(gsx.Class("rounded-lg border border-red-200 bg-red-50 p-6 text-center"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line components.gsx:131:3
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"text-4xl font-semibold text-red-700\"")
-		_gsxgw.S(">")
-//line components.gsx:131:52
+//line components.gsx:147:3
+		_gsxgw.S("<div class=\"text-4xl font-semibold text-red-700\">")
+//line components.gsx:147:52
 		_gsxgw.Text(strconv.FormatInt(int64(status), 10))
 		_gsxgw.S("</div>")
-//line components.gsx:132:3
-		_gsxgw.S("<p")
-		_gsxgw.S(" class=\"mt-2 text-red-700\"")
-		_gsxgw.S(">")
-//line components.gsx:132:32
+//line components.gsx:148:3
+		_gsxgw.S("<p class=\"mt-2 text-red-700\">")
+//line components.gsx:148:32
 		_gsxgw.Text(string(msg))
 		_gsxgw.S("</p>")
-//line components.gsx:133:3
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"mt-4 inline-block text-sm text-red-700 underline\"")
-		_gsxgw.S(" href=\"/\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Back to home")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</div>")
+//line components.gsx:149:3
+		_gsxgw.S("<a class=\"mt-4 inline-block text-sm text-red-700 underline\" href=\"/\">Back to home</a></div>")
 		return _gsxgw.Err()
 	})
 }
diff --git a/examples/blog/ui/layout/layout.gsx b/examples/blog/ui/layout/layout.gsx
index 6a261cb..14c91a2 100644
--- a/examples/blog/ui/layout/layout.gsx
+++ b/examples/blog/ui/layout/layout.gsx
@@ -16,24 +16,49 @@ component PublicShell(title string) {
 	<html lang="en">
 		<head>
 			<meta charset="utf-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1"/>
-			<title>{title} — structpages blog</title>
+			<meta
+				name="viewport"
+				content="width=device-width, initial-scale=1"
+			/>
+			<title>{ title } — structpages blog</title>
 			<script src="https://cdn.tailwindcss.com"></script>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 		</head>
 		<body class="bg-slate-50 text-slate-900">
 			<header class="border-b bg-white">
-				<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
-					<a class="text-lg font-semibold" href={ structpages.Ref("home") |> url }>structpages blog</a>
+				<div
+					class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3"
+				>
+					<a
+						class="text-lg font-semibold"
+						href={structpages.Ref("home") |> url}
+					>
+						structpages blog
+					</a>
 					<nav class="flex gap-4 text-sm">
-						<a class="hover:underline" href={ structpages.Ref("home") |> url }>Home</a>
-						<a class="hover:underline" href={ structpages.Ref("search") |> url }>Search</a>
-						<a class="text-slate-500 hover:text-slate-900" href={ structpages.Ref("loginPage") |> url }>Admin</a>
+						<a
+							class="hover:underline"
+							href={structpages.Ref("home") |> url}
+						>
+							Home
+						</a>
+						<a
+							class="hover:underline"
+							href={structpages.Ref("search") |> url}
+						>
+							Search
+						</a>
+						<a
+							class="text-slate-500 hover:text-slate-900"
+							href={structpages.Ref("loginPage") |> url}
+						>
+							Admin
+						</a>
 					</nav>
 				</div>
 			</header>
 			<main id="content" class="mx-auto max-w-3xl px-4 py-8">
-				{children}
+				{ children }
 			</main>
 		</body>
 	</html>
@@ -45,32 +70,68 @@ component AdminShell(title string, current store.User) {
 	<html lang="en">
 		<head>
 			<meta charset="utf-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1"/>
-			<title>Admin — {title}</title>
+			<meta
+				name="viewport"
+				content="width=device-width, initial-scale=1"
+			/>
+			<title>Admin — { title }</title>
 			<script src="https://cdn.tailwindcss.com"></script>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 		</head>
 		<body class="bg-slate-100 text-slate-900">
 			<header class="border-b bg-slate-900 text-slate-100">
-				<div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
-					<a class="flex items-center gap-2 text-lg font-semibold" href={ structpages.Ref("dashboard") |> url }>
-						<img src="/admin/static/admin-logo.svg" alt="" class="h-5 w-5"/>
+				<div
+					class="mx-auto flex max-w-5xl items-center justify-between px-4 py-3"
+				>
+					<a
+						class="flex items-center gap-2 text-lg font-semibold"
+						href={structpages.Ref("dashboard") |> url}
+					>
+						<img
+							src="/admin/static/admin-logo.svg"
+							alt=""
+							class="h-5 w-5"
+						/>
 						blog admin
 					</a>
 					<nav class="flex items-center gap-4 text-sm">
-						<a class="hover:underline" href={ structpages.Ref("dashboard") |> url }>Dashboard</a>
-						<a class="hover:underline" href={ structpages.Ref("postList") |> url }>Posts</a>
-						<a class="hover:underline" href={ structpages.Ref("userList") |> url }>Users</a>
+						<a
+							class="hover:underline"
+							href={structpages.Ref("dashboard") |> url}
+						>
+							Dashboard
+						</a>
+						<a
+							class="hover:underline"
+							href={structpages.Ref("postList") |> url}
+						>
+							Posts
+						</a>
+						<a
+							class="hover:underline"
+							href={structpages.Ref("userList") |> url}
+						>
+							Users
+						</a>
 						<span class="text-slate-400">|</span>
-						<span class="text-slate-300">{current.Username}</span>
-						<form method="POST" action={ structpages.Ref("logout") |> url } class="m-0">
-							<button class="text-slate-300 hover:text-white" type="submit">Sign out</button>
+						<span class="text-slate-300">{ current.Username }</span>
+						<form
+							method="POST"
+							action={structpages.Ref("logout") |> url}
+							class="m-0"
+						>
+							<button
+								class="text-slate-300 hover:text-white"
+								type="submit"
+							>
+								Sign out
+							</button>
 						</form>
 					</nav>
 				</div>
 			</header>
 			<main id="content" class="mx-auto max-w-5xl px-4 py-8">
-				{children}
+				{ children }
 			</main>
 		</body>
 	</html>
diff --git a/examples/blog/ui/layout/layout.x.go b/examples/blog/ui/layout/layout.x.go
index db55845..fb0715b 100644
--- a/examples/blog/ui/layout/layout.x.go
+++ b/examples/blog/ui/layout/layout.x.go
@@ -28,120 +28,71 @@ func PublicShell(_gsxp PublicShellProps) gsx.Node {
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
 //line layout.gsx:16:2
-		_gsxgw.S("<html")
-		_gsxgw.S(" lang=\"en\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<html lang=\"en\">")
 //line layout.gsx:17:3
-		_gsxgw.S("<head")
-		_gsxgw.S(">")
+		_gsxgw.S("<head>")
 //line layout.gsx:18:4
-		_gsxgw.S("<meta")
-		_gsxgw.S(" charset=\"utf-8\"")
-		_gsxgw.S("/>")
+		_gsxgw.S("<meta charset=\"utf-8\"/>")
 //line layout.gsx:19:4
-		_gsxgw.S("<meta")
-		_gsxgw.S(" name=\"viewport\"")
-		_gsxgw.S(" content=\"width=device-width, initial-scale=1\"")
-		_gsxgw.S("/>")
-//line layout.gsx:20:4
-		_gsxgw.S("<title")
-		_gsxgw.S(">")
-//line layout.gsx:20:11
+		_gsxgw.S("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/>")
+//line layout.gsx:23:4
+		_gsxgw.S("<title>")
+//line layout.gsx:23:11
 		_gsxgw.Text(string(title))
-		_gsxgw.S(" — structpages blog")
-		_gsxgw.S("</title>")
-//line layout.gsx:21:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://cdn.tailwindcss.com\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
-//line layout.gsx:22:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
-		_gsxgw.S("</head>")
-//line layout.gsx:24:3
-		_gsxgw.S("<body")
-		_gsxgw.S(" class=\"bg-slate-50 text-slate-900\"")
-		_gsxgw.S(">")
+		_gsxgw.S(" — structpages blog</title>")
+//line layout.gsx:24:4
+		_gsxgw.S("<script src=\"https://cdn.tailwindcss.com\"></script>")
 //line layout.gsx:25:4
-		_gsxgw.S("<header")
-		_gsxgw.S(" class=\"border-b bg-white\"")
-		_gsxgw.S(">")
-//line layout.gsx:26:5
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"mx-auto flex max-w-3xl items-center justify-between px-4 py-3\"")
-		_gsxgw.S(">")
-//line layout.gsx:27:6
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"text-lg font-semibold\"")
+		_gsxgw.S("<script src=\"https://unpkg.com/htmx.org@2.0.4\"></script></head>")
+//line layout.gsx:27:3
+		_gsxgw.S("<body class=\"bg-slate-50 text-slate-900\">")
+//line layout.gsx:28:4
+		_gsxgw.S("<header class=\"border-b bg-white\">")
+//line layout.gsx:29:5
+		_gsxgw.S("<div class=\"mx-auto flex max-w-3xl items-center justify-between px-4 py-3\">")
+//line layout.gsx:32:6
+		_gsxgw.S("<a class=\"text-lg font-semibold\"")
 		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("home")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv0))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("structpages blog")
-		_gsxgw.S("</a>")
-//line layout.gsx:28:6
-		_gsxgw.S("<nav")
-		_gsxgw.S(" class=\"flex gap-4 text-sm\"")
-		_gsxgw.S(">")
-//line layout.gsx:29:7
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxgw.S("\">structpages blog</a>")
+//line layout.gsx:38:6
+		_gsxgw.S("<nav class=\"flex gap-4 text-sm\">")
+//line layout.gsx:39:7
+		_gsxgw.S("<a class=\"hover:underline\"")
 		_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("home")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv1))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Home")
-		_gsxgw.S("</a>")
-//line layout.gsx:30:7
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxgw.S("\">Home</a>")
+//line layout.gsx:45:7
+		_gsxgw.S("<a class=\"hover:underline\"")
 		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("search")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv2))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Search")
-		_gsxgw.S("</a>")
-//line layout.gsx:31:7
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"text-slate-500 hover:text-slate-900\"")
+		_gsxgw.S("\">Search</a>")
+//line layout.gsx:51:7
+		_gsxgw.S("<a class=\"text-slate-500 hover:text-slate-900\"")
 		_gsxv3, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("loginPage")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv3))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Admin")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</nav>")
-		_gsxgw.S("</div>")
-		_gsxgw.S("</header>")
-//line layout.gsx:35:4
-		_gsxgw.S("<main")
-		_gsxgw.S(" id=\"content\"")
-		_gsxgw.S(" class=\"mx-auto max-w-3xl px-4 py-8\"")
-		_gsxgw.S(">")
-//line layout.gsx:36:5
+		_gsxgw.S("\">Admin</a></nav></div></header>")
+//line layout.gsx:60:4
+		_gsxgw.S("<main id=\"content\" class=\"mx-auto max-w-3xl px-4 py-8\">")
+//line layout.gsx:61:5
 		_gsxgw.Node(ctx, children)
-		_gsxgw.S("</main>")
-		_gsxgw.S("</body>")
-		_gsxgw.S("</html>")
+		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
 	})
 }
@@ -161,160 +112,92 @@ func AdminShell(_gsxp AdminShellProps) gsx.Node {
 		children := _gsxp.Children
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
-//line layout.gsx:45:2
-		_gsxgw.S("<html")
-		_gsxgw.S(" lang=\"en\"")
-		_gsxgw.S(">")
-//line layout.gsx:46:3
-		_gsxgw.S("<head")
-		_gsxgw.S(">")
-//line layout.gsx:47:4
-		_gsxgw.S("<meta")
-		_gsxgw.S(" charset=\"utf-8\"")
-		_gsxgw.S("/>")
-//line layout.gsx:48:4
-		_gsxgw.S("<meta")
-		_gsxgw.S(" name=\"viewport\"")
-		_gsxgw.S(" content=\"width=device-width, initial-scale=1\"")
-		_gsxgw.S("/>")
-//line layout.gsx:49:4
-		_gsxgw.S("<title")
-		_gsxgw.S(">")
-		_gsxgw.S("Admin — ")
-//line layout.gsx:49:21
+//line layout.gsx:70:2
+		_gsxgw.S("<html lang=\"en\">")
+//line layout.gsx:71:3
+		_gsxgw.S("<head>")
+//line layout.gsx:72:4
+		_gsxgw.S("<meta charset=\"utf-8\"/>")
+//line layout.gsx:73:4
+		_gsxgw.S("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/>")
+//line layout.gsx:77:4
+		_gsxgw.S("<title>Admin — ")
+//line layout.gsx:77:21
 		_gsxgw.Text(string(title))
 		_gsxgw.S("</title>")
-//line layout.gsx:50:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://cdn.tailwindcss.com\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
-//line layout.gsx:51:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
-		_gsxgw.S("</head>")
-//line layout.gsx:53:3
-		_gsxgw.S("<body")
-		_gsxgw.S(" class=\"bg-slate-100 text-slate-900\"")
-		_gsxgw.S(">")
-//line layout.gsx:54:4
-		_gsxgw.S("<header")
-		_gsxgw.S(" class=\"border-b bg-slate-900 text-slate-100\"")
-		_gsxgw.S(">")
-//line layout.gsx:55:5
-		_gsxgw.S("<div")
-		_gsxgw.S(" class=\"mx-auto flex max-w-5xl items-center justify-between px-4 py-3\"")
-		_gsxgw.S(">")
-//line layout.gsx:56:6
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"flex items-center gap-2 text-lg font-semibold\"")
+//line layout.gsx:78:4
+		_gsxgw.S("<script src=\"https://cdn.tailwindcss.com\"></script>")
+//line layout.gsx:79:4
+		_gsxgw.S("<script src=\"https://unpkg.com/htmx.org@2.0.4\"></script></head>")
+//line layout.gsx:81:3
+		_gsxgw.S("<body class=\"bg-slate-100 text-slate-900\">")
+//line layout.gsx:82:4
+		_gsxgw.S("<header class=\"border-b bg-slate-900 text-slate-100\">")
+//line layout.gsx:83:5
+		_gsxgw.S("<div class=\"mx-auto flex max-w-5xl items-center justify-between px-4 py-3\">")
+//line layout.gsx:86:6
+		_gsxgw.S("<a class=\"flex items-center gap-2 text-lg font-semibold\"")
 		_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("dashboard")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv4))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-//line layout.gsx:57:7
-		_gsxgw.S("<img")
-		_gsxgw.S(" src=\"/admin/static/admin-logo.svg\"")
-		_gsxgw.S(" alt=\"\"")
-		_gsxgw.S(" class=\"h-5 w-5\"")
-		_gsxgw.S("/>")
-		_gsxgw.S("blog admin")
-		_gsxgw.S("</a>")
-//line layout.gsx:60:6
-		_gsxgw.S("<nav")
-		_gsxgw.S(" class=\"flex items-center gap-4 text-sm\"")
-		_gsxgw.S(">")
-//line layout.gsx:61:7
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxgw.S("\">")
+//line layout.gsx:90:7
+		_gsxgw.S("<img src=\"/admin/static/admin-logo.svg\" alt=\"\" class=\"h-5 w-5\"/>blog admin</a>")
+//line layout.gsx:97:6
+		_gsxgw.S("<nav class=\"flex items-center gap-4 text-sm\">")
+//line layout.gsx:98:7
+		_gsxgw.S("<a class=\"hover:underline\"")
 		_gsxv5, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("dashboard")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv5))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Dashboard")
-		_gsxgw.S("</a>")
-//line layout.gsx:62:7
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxgw.S("\">Dashboard</a>")
+//line layout.gsx:104:7
+		_gsxgw.S("<a class=\"hover:underline\"")
 		_gsxv6, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("postList")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv6))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Posts")
-		_gsxgw.S("</a>")
-//line layout.gsx:63:7
-		_gsxgw.S("<a")
-		_gsxgw.S(" class=\"hover:underline\"")
+		_gsxgw.S("\">Posts</a>")
+//line layout.gsx:110:7
+		_gsxgw.S("<a class=\"hover:underline\"")
 		_gsxv7, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("userList")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv7))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Users")
-		_gsxgw.S("</a>")
-//line layout.gsx:64:7
-		_gsxgw.S("<span")
-		_gsxgw.S(" class=\"text-slate-400\"")
-		_gsxgw.S(">")
-		_gsxgw.S("|")
-		_gsxgw.S("</span>")
-//line layout.gsx:65:7
-		_gsxgw.S("<span")
-		_gsxgw.S(" class=\"text-slate-300\"")
-		_gsxgw.S(">")
-//line layout.gsx:65:36
+		_gsxgw.S("\">Users</a>")
+//line layout.gsx:116:7
+		_gsxgw.S("<span class=\"text-slate-400\">|</span>")
+//line layout.gsx:117:7
+		_gsxgw.S("<span class=\"text-slate-300\">")
+//line layout.gsx:117:36
 		_gsxgw.Text(string(current.Username))
 		_gsxgw.S("</span>")
-//line layout.gsx:66:7
-		_gsxgw.S("<form")
-		_gsxgw.S(" method=\"POST\"")
+//line layout.gsx:118:7
+		_gsxgw.S("<form method=\"POST\"")
 		_gsxv8, _gsxerr := _gsxf0.URLFor(ctx, (structpages.Ref("logout")))
 		if _gsxerr != nil {
 			return _gsxerr
 		}
 		_gsxgw.S(" action=\"")
 		_gsxgw.URL(string(_gsxv8))
-		_gsxgw.S("\"")
-		_gsxgw.S(" class=\"m-0\"")
-		_gsxgw.S(">")
-//line layout.gsx:67:8
-		_gsxgw.S("<button")
-		_gsxgw.S(" class=\"text-slate-300 hover:text-white\"")
-		_gsxgw.S(" type=\"submit\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Sign out")
-		_gsxgw.S("</button>")
-		_gsxgw.S("</form>")
-		_gsxgw.S("</nav>")
-		_gsxgw.S("</div>")
-		_gsxgw.S("</header>")
-//line layout.gsx:72:4
-		_gsxgw.S("<main")
-		_gsxgw.S(" id=\"content\"")
-		_gsxgw.S(" class=\"mx-auto max-w-5xl px-4 py-8\"")
-		_gsxgw.S(">")
-//line layout.gsx:73:5
+		_gsxgw.S("\" class=\"m-0\">")
+//line layout.gsx:123:8
+		_gsxgw.S("<button class=\"text-slate-300 hover:text-white\" type=\"submit\">Sign out</button></form></nav></div></header>")
+//line layout.gsx:133:4
+		_gsxgw.S("<main id=\"content\" class=\"mx-auto max-w-5xl px-4 py-8\">")
+//line layout.gsx:134:5
 		_gsxgw.Node(ctx, children)
-		_gsxgw.S("</main>")
-		_gsxgw.S("</body>")
-		_gsxgw.S("</html>")
+		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
 	})
 }
diff --git a/examples/htmx-render-target/pages.gsx b/examples/htmx-render-target/pages.gsx
index aaee61e..332f3b8 100644
--- a/examples/htmx-render-target/pages.gsx
+++ b/examples/htmx-render-target/pages.gsx
@@ -10,9 +10,11 @@ component UserStatsWidget(stats UserStats) {
 		<p>New Today: { stats.NewToday }</p>
 		<button
 			type="button"
-			hx-get={ dashboard{} |> url }
-			hx-target={ UserStatsWidget |> target }
-		>Refresh Stats</button>
+			hx-get={dashboard{} |> url}
+			hx-target={UserStatsWidget |> target}
+		>
+			Refresh Stats
+		</button>
 	</div>
 }
 
@@ -21,15 +23,21 @@ component SalesChartWidget(data SalesData) {
 		<h3>Sales Chart</h3>
 		<div class="chart">
 			{ for _, point := range data.Points {
-				<div class="bar" data-h={ point.Value } style="width: 30px; background: blue; display: inline-block; margin: 2px;"></div>
+				<div
+					class="bar"
+					data-h={point.Value}
+					style="width: 30px; background: blue; display: inline-block; margin: 2px;"
+				></div>
 			} }
 		</div>
 		<p>Total Sales: ${ data.Total |> format("%.2f") }</p>
 		<button
 			type="button"
-			hx-get={ dashboard{} |> url }
-			hx-target={ SalesChartWidget |> target }
-		>Refresh Sales</button>
+			hx-get={dashboard{} |> url}
+			hx-target={SalesChartWidget |> target}
+		>
+			Refresh Sales
+		</button>
 	</div>
 }
 
@@ -38,14 +46,18 @@ component NotificationsList(notifications []Notification) {
 		<h3>Recent Notifications</h3>
 		<ul>
 			{ for _, n := range notifications {
-				<li>{ n.Message } <small>({ n.Time.Format("15:04") })</small></li>
+				<li>
+					{ n.Message } <small>({ n.Time.Format("15:04") })</small>
+				</li>
 			} }
 		</ul>
 		<button
 			type="button"
-			hx-get={ dashboard{} |> url }
-			hx-target={ NotificationsList |> target }
-		>Refresh Notifications</button>
+			hx-get={dashboard{} |> url}
+			hx-target={NotificationsList |> target}
+		>
+			Refresh Notifications
+		</button>
 	</div>
 }
 
@@ -56,27 +68,55 @@ type dashboard struct{}
 component (p dashboard) Page(props dashboardData) {
 	<Html>
 		<h1>Dashboard</h1>
-		<p>This example demonstrates the RenderTarget API with standalone function components.</p>
-		<p>Click "Refresh" buttons to see HTMX partial updates — each widget loads only its own data!</p>
-		<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;">
-			<div id={ UserStatsWidget |> id }>
-				<UserStatsWidget { props.Stats... } />
+		<p>
+			This example demonstrates the RenderTarget API with standalone function components.
+		</p>
+		<p>
+			Click "Refresh" buttons to see HTMX partial updates — each widget loads only its own data!
+		</p>
+		<div
+			style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;"
+		>
+			<div id={UserStatsWidget |> id}>
+				<UserStatsWidget { props.Stats... }/>
 			</div>
-			<div id={ SalesChartWidget |> id }>
-				<SalesChartWidget { props.Sales... } />
+			<div id={SalesChartWidget |> id}>
+				<SalesChartWidget { props.Sales... }/>
 			</div>
-			<div id={ NotificationsList |> id }>
-				<NotificationsList notifications={props.Notifications} />
+			<div id={NotificationsList |> id}>
+				<NotificationsList notifications={props.Notifications}/>
 			</div>
 		</div>
-		<div style="margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 4px;">
+		<div
+			style="margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 4px;"
+		>
 			<h4>How it works:</h4>
 			<ul>
-				<li>✅ <strong>Standalone functions</strong> — UserStatsWidget, SalesChartWidget, NotificationsList are shared components</li>
-				<li>✅ <strong>Conditional loading</strong> — Props checks target.Is() and loads only needed data</li>
-				<li>✅ <strong>RenderComponent (direct)</strong> — construct the gsx component with its props struct and pass directly</li>
-				<li>✅ <strong>No wrapper methods</strong> — No need to create dashboard.UserStats() method!</li>
-				<li>✅ <strong>HTMX integration</strong> — HTMXRenderTarget automatically handles partial updates</li>
+				<li>
+					✅ <strong>
+						Standalone functions
+					</strong> — UserStatsWidget, SalesChartWidget, NotificationsList are shared components
+				</li>
+				<li>
+					✅ <strong>
+						Conditional loading
+					</strong> — Props checks target.Is() and loads only needed data
+				</li>
+				<li>
+					✅ <strong>
+						RenderComponent (direct)
+					</strong> — construct the gsx component with its props struct and pass directly
+				</li>
+				<li>
+					✅ <strong>
+						No wrapper methods
+					</strong> — No need to create dashboard.UserStats() method!
+				</li>
+				<li>
+					✅ <strong>
+						HTMX integration
+					</strong> — HTMXRenderTarget automatically handles partial updates
+				</li>
 			</ul>
 		</div>
 	</Html>
@@ -87,7 +127,7 @@ component Html() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
-			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3" />
+			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3"/>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 			<title>RenderTarget API Example</title>
 			<style>
@@ -109,16 +149,14 @@ component Html() {
 			</style>
 		</head>
 		<body>
-			<main>
-				{children}
-			</main>
+			<main>{ children }</main>
 		</body>
 	</html>
 }
 
 component ErrorPage(err error) {
 	<Html>
-		<ErrorComp err={err} />
+		<ErrorComp err={err}/>
 	</Html>
 }
 
diff --git a/examples/htmx-render-target/pages.x.go b/examples/htmx-render-target/pages.x.go
index 7922f49..8d78e3c 100644
--- a/examples/htmx-render-target/pages.x.go
+++ b/examples/htmx-render-target/pages.x.go
@@ -15,7 +15,6 @@ import (
 // Shared standalone function components (can be used across multiple pages).
 // These demonstrate the power of RenderTarget — no wrapper methods needed.
 
-//line pages.gsx:6:1
 func UserStatsWidget(stats UserStats) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -53,30 +52,29 @@ func UserStatsWidget(stats UserStats) gsx.Node {
 	})
 }
 
-//line pages.gsx:19:1
 func SalesChartWidget(data SalesData) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:20:2
+//line pages.gsx:22:2
 		_gsxgw.S("<div class=\"widget\">")
-//line pages.gsx:21:3
+//line pages.gsx:23:3
 		_gsxgw.S("<h3>Sales Chart</h3>")
-//line pages.gsx:22:3
+//line pages.gsx:24:3
 		_gsxgw.S("<div class=\"chart\">")
-//line pages.gsx:23:4
+//line pages.gsx:25:4
 		for _, point := range data.Points {
-//line pages.gsx:24:5
+//line pages.gsx:26:5
 			_gsxgw.S("<div class=\"bar\" data-h=\"")
 			_gsxgw.AttrValue(strconv.FormatInt(int64(point.Value), 10))
 			_gsxgw.S("\" style=\"width: 30px; background: blue; display: inline-block; margin: 2px;\"></div>")
 		}
 		_gsxgw.S("</div>")
-//line pages.gsx:27:3
+//line pages.gsx:33:3
 		_gsxgw.S("<p>Total Sales: $")
-//line pages.gsx:27:20
+//line pages.gsx:33:20
 		_gsxgw.Text(string(_gsxstd.Format((data.Total), "%.2f")))
 		_gsxgw.S("</p>")
-//line pages.gsx:28:3
+//line pages.gsx:34:3
 		_gsxgw.S("<button type=\"button\"")
 		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (dashboard{}))
 		if _gsxerr != nil {
@@ -101,37 +99,36 @@ type NotificationsListProps struct {
 	Attrs         gsx.Attrs
 }
 
-//line pages.gsx:36:1
 func NotificationsList(_gsxp NotificationsListProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		notifications := _gsxp.Notifications
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:37:2
+//line pages.gsx:45:2
 		_gsxgw.S("<div class=\"")
 		_gsxgw.Class(gsx.Class("widget"), gsx.Class(_gsxp.Attrs.Class()))
 		_gsxgw.S("\"")
 		_gsxgw.StyleMerged("", _gsxp.Attrs.Style())
 		_gsxgw.Spread(ctx, _gsxp.Attrs.Without("class", "style"))
 		_gsxgw.S(">")
-//line pages.gsx:38:3
+//line pages.gsx:46:3
 		_gsxgw.S("<h3>Recent Notifications</h3>")
-//line pages.gsx:39:3
+//line pages.gsx:47:3
 		_gsxgw.S("<ul>")
-//line pages.gsx:40:4
+//line pages.gsx:48:4
 		for _, n := range notifications {
-//line pages.gsx:41:5
+//line pages.gsx:49:5
 			_gsxgw.S("<li>")
-//line pages.gsx:41:9
+//line pages.gsx:50:6
 			_gsxgw.Text(string(n.Message))
 			_gsxgw.S(" ")
-//line pages.gsx:41:23
+//line pages.gsx:50:20
 			_gsxgw.S("<small>(")
-//line pages.gsx:41:31
+//line pages.gsx:50:28
 			_gsxgw.Text(string(n.Time.Format("15:04")))
 			_gsxgw.S(")</small></li>")
 		}
 		_gsxgw.S("</ul>")
-//line pages.gsx:44:3
+//line pages.gsx:54:3
 		_gsxgw.S("<button type=\"button\"")
 		_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (dashboard{}))
 		if _gsxerr != nil {
@@ -155,22 +152,21 @@ func NotificationsList(_gsxp NotificationsListProps) gsx.Node {
 
 type dashboard struct{}
 
-//line pages.gsx:56:1
 func (p dashboard) Page(props dashboardData) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:57:2
+//line pages.gsx:69:2
 		_gsxgw.Node(ctx, Html(HtmlProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:58:3
+//line pages.gsx:70:3
 			_gsxgw.S("<h1>Dashboard</h1>")
-//line pages.gsx:59:3
+//line pages.gsx:71:3
 			_gsxgw.S("<p>This example demonstrates the RenderTarget API with standalone function components.</p>")
-//line pages.gsx:60:3
+//line pages.gsx:74:3
 			_gsxgw.S("<p>Click \"Refresh\" buttons to see HTMX partial updates — each widget loads only its own data!</p>")
-//line pages.gsx:61:3
+//line pages.gsx:77:3
 			_gsxgw.S("<div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;\">")
-//line pages.gsx:62:4
+//line pages.gsx:80:4
 			_gsxgw.S("<div")
 			_gsxv6, _gsxerr := _gsxf0.ID(ctx, (UserStatsWidget))
 			if _gsxerr != nil {
@@ -179,10 +175,10 @@ func (p dashboard) Page(props dashboardData) gsx.Node {
 			_gsxgw.S(" id=\"")
 			_gsxgw.AttrValue(string(_gsxv6))
 			_gsxgw.S("\">")
-//line pages.gsx:63:5
+//line pages.gsx:81:5
 			_gsxgw.Node(ctx, UserStatsWidget(props.Stats))
 			_gsxgw.S("</div>")
-//line pages.gsx:65:4
+//line pages.gsx:83:4
 			_gsxgw.S("<div")
 			_gsxv7, _gsxerr := _gsxf0.ID(ctx, (SalesChartWidget))
 			if _gsxerr != nil {
@@ -191,10 +187,10 @@ func (p dashboard) Page(props dashboardData) gsx.Node {
 			_gsxgw.S(" id=\"")
 			_gsxgw.AttrValue(string(_gsxv7))
 			_gsxgw.S("\">")
-//line pages.gsx:66:5
+//line pages.gsx:84:5
 			_gsxgw.Node(ctx, SalesChartWidget(props.Sales))
 			_gsxgw.S("</div>")
-//line pages.gsx:68:4
+//line pages.gsx:86:4
 			_gsxgw.S("<div")
 			_gsxv8, _gsxerr := _gsxf0.ID(ctx, (NotificationsList))
 			if _gsxerr != nil {
@@ -203,34 +199,34 @@ func (p dashboard) Page(props dashboardData) gsx.Node {
 			_gsxgw.S(" id=\"")
 			_gsxgw.AttrValue(string(_gsxv8))
 			_gsxgw.S("\">")
-//line pages.gsx:69:5
+//line pages.gsx:87:5
 			_gsxgw.Node(ctx, NotificationsList(NotificationsListProps{Notifications: props.Notifications}))
 			_gsxgw.S("</div></div>")
-//line pages.gsx:72:3
+//line pages.gsx:90:3
 			_gsxgw.S("<div style=\"margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 4px;\">")
-//line pages.gsx:73:4
+//line pages.gsx:93:4
 			_gsxgw.S("<h4>How it works:</h4>")
-//line pages.gsx:74:4
+//line pages.gsx:94:4
 			_gsxgw.S("<ul>")
-//line pages.gsx:75:5
+//line pages.gsx:95:5
 			_gsxgw.S("<li>✅ ")
-//line pages.gsx:75:13
+//line pages.gsx:96:10
 			_gsxgw.S("<strong>Standalone functions</strong> — UserStatsWidget, SalesChartWidget, NotificationsList are shared components</li>")
-//line pages.gsx:76:5
+//line pages.gsx:100:5
 			_gsxgw.S("<li>✅ ")
-//line pages.gsx:76:13
+//line pages.gsx:101:10
 			_gsxgw.S("<strong>Conditional loading</strong> — Props checks target.Is() and loads only needed data</li>")
-//line pages.gsx:77:5
+//line pages.gsx:105:5
 			_gsxgw.S("<li>✅ ")
-//line pages.gsx:77:13
+//line pages.gsx:106:10
 			_gsxgw.S("<strong>RenderComponent (direct)</strong> — construct the gsx component with its props struct and pass directly</li>")
-//line pages.gsx:78:5
+//line pages.gsx:110:5
 			_gsxgw.S("<li>✅ ")
-//line pages.gsx:78:13
+//line pages.gsx:111:10
 			_gsxgw.S("<strong>No wrapper methods</strong> — No need to create dashboard.UserStats() method!</li>")
-//line pages.gsx:79:5
+//line pages.gsx:115:5
 			_gsxgw.S("<li>✅ ")
-//line pages.gsx:79:13
+//line pages.gsx:116:10
 			_gsxgw.S("<strong>HTMX integration</strong> — HTMXRenderTarget automatically handles partial updates</li></ul></div>")
 			return _gsxgw.Err()
 		})}))
@@ -244,29 +240,28 @@ type HtmlProps struct {
 	Children gsx.Node
 }
 
-//line pages.gsx:86:1
 func Html(_gsxp HtmlProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		children := _gsxp.Children
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
-//line pages.gsx:88:2
+//line pages.gsx:128:2
 		_gsxgw.S("<html lang=\"en\">")
-//line pages.gsx:89:3
+//line pages.gsx:129:3
 		_gsxgw.S("<head>")
-//line pages.gsx:90:4
+//line pages.gsx:130:4
 		_gsxgw.S("<link rel=\"stylesheet\" href=\"https://unpkg.com/missing.css@1.1.3\"/>")
-//line pages.gsx:91:4
+//line pages.gsx:131:4
 		_gsxgw.S("<script src=\"https://unpkg.com/htmx.org@2.0.4\"></script>")
-//line pages.gsx:92:4
+//line pages.gsx:132:4
 		_gsxgw.S("<title>RenderTarget API Example</title>")
-//line pages.gsx:93:4
+//line pages.gsx:133:4
 		_gsxgw.S("<style>.widget{padding: 1rem;border: 1px solid #ddd;border-radius: 8px;background: white}.widget h3{margin-top: 0}.chart{display: flex;align-items: flex-end;height: 150px;margin: 1rem 0}</style></head>")
-//line pages.gsx:111:3
+//line pages.gsx:151:3
 		_gsxgw.S("<body>")
-//line pages.gsx:112:4
+//line pages.gsx:152:4
 		_gsxgw.S("<main>")
-//line pages.gsx:113:5
+//line pages.gsx:152:10
 		_gsxgw.Node(ctx, children)
 		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
@@ -277,15 +272,14 @@ type ErrorPageProps struct {
 	Err error
 }
 
-//line pages.gsx:119:1
 func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:120:2
+//line pages.gsx:158:2
 		_gsxgw.Node(ctx, Html(HtmlProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:121:3
+//line pages.gsx:159:3
 			_gsxgw.Node(ctx, ErrorComp(ErrorCompProps{Err: err}))
 			return _gsxgw.Err()
 		})}))
@@ -297,16 +291,15 @@ type ErrorCompProps struct {
 	Err error
 }
 
-//line pages.gsx:125:1
 func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:126:2
+//line pages.gsx:164:2
 		_gsxgw.S("<h1>Error</h1>")
-//line pages.gsx:127:2
+//line pages.gsx:165:2
 		_gsxgw.S("<p>")
-//line pages.gsx:127:5
+//line pages.gsx:165:5
 		_gsxgw.Text(string(err.Error()))
 		_gsxgw.S("</p>")
 		return _gsxgw.Err()
diff --git a/examples/htmx/pages.gsx b/examples/htmx/pages.gsx
index a3c5989..be1a6da 100644
--- a/examples/htmx/pages.gsx
+++ b/examples/htmx/pages.gsx
@@ -1,54 +1,77 @@
 package main
 
 import (
-  "fmt"
+	"fmt"
 )
 
 type index struct {
 	product `route:"/product Product"`
 	team    `route:"/team Team"`
 	contact `route:"/contact Contact"`
-  throw   `route:"/throw Throw"`
+	throw   `route:"/throw Throw"`
 }
 type product struct{}
 type team struct{}
 type contact struct{}
 type throw struct{}
 
-component (p index) Page()   { <Layout><p.Main/></Layout> }
+component (p index) Page() {
+	<Layout>
+		<p.Main/>
+	</Layout>
+}
+
 component (p index) Main() {
 	<h1>Welcome to the Index Page</h1>
-	<p>Navigate to the product, team, or contact pages using the links below:</p>
-  <a hx-get={ throw{} |> url } hx-target="#main">Throw (Err)</a>
+	<p>
+		Navigate to the product, team, or contact pages using the links below:
+	</p>
+	<a hx-get={throw{} |> url} hx-target="#main">Throw (Err)</a>
+}
+
+component (p product) Page() {
+	<Layout>
+		<p.Main/>
+	</Layout>
 }
 
-component (p product) Page() { <Layout><p.Main/></Layout> }
 component (p product) Main() {
 	<h1>Product Page</h1>
 	<p>This is the product page.</p>
 }
 
-component (p team) Page() { <Layout><p.Main/></Layout> }
+component (p team) Page() {
+	<Layout>
+		<p.Main/>
+	</Layout>
+}
+
 component (p team) Main() {
 	<h1>Team Page</h1>
 	<p>This is the team page.</p>
 }
 
-component (p contact) Page() { <Layout><p.Main/></Layout> }
+component (p contact) Page() {
+	<Layout>
+		<p.Main/>
+	</Layout>
+}
+
 component (p contact) Main() {
 	<h1>Contact Page</h1>
 	<p>This is the contact page.</p>
 }
 
-func errFunc() (string, error ) { return "", fmt.Errorf("this is an error") }
-component (p throw) Page() { <p>{errFunc()}</p> }
-
+func errFunc() (string, error) { return "", fmt.Errorf("this is an error") }
+component (p throw) Page() {
+	<p>{ errFunc() }</p>
+}
 
 component Layout() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
-			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3" />
+			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3"/>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 			<title>HTMX Example</title>
 		</head>
@@ -56,19 +79,31 @@ component Layout() {
 			<header class="navbar">
 				<nav>
 					<ul role="list" hx-push-url="true" hx-target="#main">
-						<li><a hx-get={ index{} |> url }>Home</a></li>
-						<li><a hx-get={ product{} |> url }>Product</a></li>
-						<li><a hx-get={ team{} |> url }>Team</a></li>
-						<li><a hx-get={ contact{} |> url }>Contact</a></li>
+						<li>
+							<a hx-get={index{} |> url}>Home</a>
+						</li>
+						<li>
+							<a hx-get={product{} |> url}>Product</a>
+						</li>
+						<li>
+							<a hx-get={team{} |> url}>Team</a>
+						</li>
+						<li>
+							<a hx-get={contact{} |> url}>Contact</a>
+						</li>
 					</ul>
 				</nav>
 			</header>
-			<main id="main">{children}</main>
+			<main id="main">{ children }</main>
 		</body>
 	</html>
 }
 
-component ErrorPage(err error) { <Layout><ErrorComp err={err} /></Layout> }
+component ErrorPage(err error) {
+	<Layout>
+		<ErrorComp err={err}/>
+	</Layout>
+}
 
 component ErrorComp(err error) {
 	<h1>Error</h1>
diff --git a/examples/htmx/pages.x.go b/examples/htmx/pages.x.go
index fc661a2..1779d22 100644
--- a/examples/htmx/pages.x.go
+++ b/examples/htmx/pages.x.go
@@ -25,10 +25,10 @@ type throw struct{}
 func (p index) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:18:32
+//line pages.gsx:19:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:18:40
+//line pages.gsx:20:3
 			_gsxgw.Node(ctx, p.Main())
 			return _gsxgw.Err()
 		})}))
@@ -39,17 +39,11 @@ func (p index) Page() gsx.Node {
 func (p index) Main() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:20:2
-		_gsxgw.S("<h1")
-		_gsxgw.S(">")
-		_gsxgw.S("Welcome to the Index Page")
-		_gsxgw.S("</h1>")
-//line pages.gsx:21:2
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-		_gsxgw.S("Navigate to the product, team, or contact pages using the links below:")
-		_gsxgw.S("</p>")
-//line pages.gsx:22:3
+//line pages.gsx:25:2
+		_gsxgw.S("<h1>Welcome to the Index Page</h1>")
+//line pages.gsx:26:2
+		_gsxgw.S("<p>Navigate to the product, team, or contact pages using the links below:</p>")
+//line pages.gsx:29:2
 		_gsxgw.S("<a")
 		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (throw{}))
 		if _gsxerr != nil {
@@ -57,11 +51,7 @@ func (p index) Main() gsx.Node {
 		}
 		_gsxgw.S(" hx-get=\"")
 		_gsxgw.URL(string(_gsxv0))
-		_gsxgw.S("\"")
-		_gsxgw.S(" hx-target=\"#main\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Throw (Err)")
-		_gsxgw.S("</a>")
+		_gsxgw.S("\" hx-target=\"#main\">Throw (Err)</a>")
 		return _gsxgw.Err()
 	})
 }
@@ -69,10 +59,10 @@ func (p index) Main() gsx.Node {
 func (p product) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:25:32
+//line pages.gsx:33:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:25:40
+//line pages.gsx:34:3
 			_gsxgw.Node(ctx, p.Main())
 			return _gsxgw.Err()
 		})}))
@@ -83,16 +73,10 @@ func (p product) Page() gsx.Node {
 func (p product) Main() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:27:2
-		_gsxgw.S("<h1")
-		_gsxgw.S(">")
-		_gsxgw.S("Product Page")
-		_gsxgw.S("</h1>")
-//line pages.gsx:28:2
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-		_gsxgw.S("This is the product page.")
-		_gsxgw.S("</p>")
+//line pages.gsx:39:2
+		_gsxgw.S("<h1>Product Page</h1>")
+//line pages.gsx:40:2
+		_gsxgw.S("<p>This is the product page.</p>")
 		return _gsxgw.Err()
 	})
 }
@@ -100,10 +84,10 @@ func (p product) Main() gsx.Node {
 func (p team) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:31:29
+//line pages.gsx:44:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:31:37
+//line pages.gsx:45:3
 			_gsxgw.Node(ctx, p.Main())
 			return _gsxgw.Err()
 		})}))
@@ -114,16 +98,10 @@ func (p team) Page() gsx.Node {
 func (p team) Main() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:33:2
-		_gsxgw.S("<h1")
-		_gsxgw.S(">")
-		_gsxgw.S("Team Page")
-		_gsxgw.S("</h1>")
-//line pages.gsx:34:2
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-		_gsxgw.S("This is the team page.")
-		_gsxgw.S("</p>")
+//line pages.gsx:50:2
+		_gsxgw.S("<h1>Team Page</h1>")
+//line pages.gsx:51:2
+		_gsxgw.S("<p>This is the team page.</p>")
 		return _gsxgw.Err()
 	})
 }
@@ -131,10 +109,10 @@ func (p team) Main() gsx.Node {
 func (p contact) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:37:32
+//line pages.gsx:55:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:37:40
+//line pages.gsx:56:3
 			_gsxgw.Node(ctx, p.Main())
 			return _gsxgw.Err()
 		})}))
@@ -145,16 +123,10 @@ func (p contact) Page() gsx.Node {
 func (p contact) Main() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:39:2
-		_gsxgw.S("<h1")
-		_gsxgw.S(">")
-		_gsxgw.S("Contact Page")
-		_gsxgw.S("</h1>")
-//line pages.gsx:40:2
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-		_gsxgw.S("This is the contact page.")
-		_gsxgw.S("</p>")
+//line pages.gsx:61:2
+		_gsxgw.S("<h1>Contact Page</h1>")
+//line pages.gsx:62:2
+		_gsxgw.S("<p>This is the contact page.</p>")
 		return _gsxgw.Err()
 	})
 }
@@ -164,10 +136,9 @@ func errFunc() (string, error) { return "", fmt.Errorf("this is an error") }
 func (p throw) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:44:30
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-//line pages.gsx:44:33
+//line pages.gsx:67:2
+		_gsxgw.S("<p>")
+//line pages.gsx:67:5
 		_gsxv1, _gsxerr := errFunc()
 		if _gsxerr != nil {
 			return _gsxerr
@@ -187,49 +158,27 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		children := _gsxp.Children
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
-//line pages.gsx:49:2
-		_gsxgw.S("<html")
-		_gsxgw.S(" lang=\"en\"")
-		_gsxgw.S(">")
-//line pages.gsx:50:3
-		_gsxgw.S("<head")
-		_gsxgw.S(">")
-//line pages.gsx:51:4
-		_gsxgw.S("<link")
-		_gsxgw.S(" rel=\"stylesheet\"")
-		_gsxgw.S(" href=\"https://unpkg.com/missing.css@1.1.3\"")
-		_gsxgw.S("/>")
-//line pages.gsx:52:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
-//line pages.gsx:53:4
-		_gsxgw.S("<title")
-		_gsxgw.S(">")
-		_gsxgw.S("HTMX Example")
-		_gsxgw.S("</title>")
-		_gsxgw.S("</head>")
-//line pages.gsx:55:3
-		_gsxgw.S("<body")
-		_gsxgw.S(">")
-//line pages.gsx:56:4
-		_gsxgw.S("<header")
-		_gsxgw.S(" class=\"navbar\"")
-		_gsxgw.S(">")
-//line pages.gsx:57:5
-		_gsxgw.S("<nav")
-		_gsxgw.S(">")
-//line pages.gsx:58:6
-		_gsxgw.S("<ul")
-		_gsxgw.S(" role=\"list\"")
-		_gsxgw.S(" hx-push-url=\"true\"")
-		_gsxgw.S(" hx-target=\"#main\"")
-		_gsxgw.S(">")
-//line pages.gsx:59:7
-		_gsxgw.S("<li")
-		_gsxgw.S(">")
-//line pages.gsx:59:11
+//line pages.gsx:72:2
+		_gsxgw.S("<html lang=\"en\">")
+//line pages.gsx:73:3
+		_gsxgw.S("<head>")
+//line pages.gsx:74:4
+		_gsxgw.S("<link rel=\"stylesheet\" href=\"https://unpkg.com/missing.css@1.1.3\"/>")
+//line pages.gsx:75:4
+		_gsxgw.S("<script src=\"https://unpkg.com/htmx.org@2.0.4\"></script>")
+//line pages.gsx:76:4
+		_gsxgw.S("<title>HTMX Example</title></head>")
+//line pages.gsx:78:3
+		_gsxgw.S("<body>")
+//line pages.gsx:79:4
+		_gsxgw.S("<header class=\"navbar\">")
+//line pages.gsx:80:5
+		_gsxgw.S("<nav>")
+//line pages.gsx:81:6
+		_gsxgw.S("<ul role=\"list\" hx-push-url=\"true\" hx-target=\"#main\">")
+//line pages.gsx:82:7
+		_gsxgw.S("<li>")
+//line pages.gsx:83:8
 		_gsxgw.S("<a")
 		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (index{}))
 		if _gsxerr != nil {
@@ -237,15 +186,10 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		}
 		_gsxgw.S(" hx-get=\"")
 		_gsxgw.URL(string(_gsxv2))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Home")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</li>")
-//line pages.gsx:60:7
-		_gsxgw.S("<li")
-		_gsxgw.S(">")
-//line pages.gsx:60:11
+		_gsxgw.S("\">Home</a></li>")
+//line pages.gsx:85:7
+		_gsxgw.S("<li>")
+//line pages.gsx:86:8
 		_gsxgw.S("<a")
 		_gsxv3, _gsxerr := _gsxf0.URLFor(ctx, (product{}))
 		if _gsxerr != nil {
@@ -253,15 +197,10 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		}
 		_gsxgw.S(" hx-get=\"")
 		_gsxgw.URL(string(_gsxv3))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Product")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</li>")
-//line pages.gsx:61:7
-		_gsxgw.S("<li")
-		_gsxgw.S(">")
-//line pages.gsx:61:11
+		_gsxgw.S("\">Product</a></li>")
+//line pages.gsx:88:7
+		_gsxgw.S("<li>")
+//line pages.gsx:89:8
 		_gsxgw.S("<a")
 		_gsxv4, _gsxerr := _gsxf0.URLFor(ctx, (team{}))
 		if _gsxerr != nil {
@@ -269,15 +208,10 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		}
 		_gsxgw.S(" hx-get=\"")
 		_gsxgw.URL(string(_gsxv4))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Team")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</li>")
-//line pages.gsx:62:7
-		_gsxgw.S("<li")
-		_gsxgw.S(">")
-//line pages.gsx:62:11
+		_gsxgw.S("\">Team</a></li>")
+//line pages.gsx:91:7
+		_gsxgw.S("<li>")
+//line pages.gsx:92:8
 		_gsxgw.S("<a")
 		_gsxv5, _gsxerr := _gsxf0.URLFor(ctx, (contact{}))
 		if _gsxerr != nil {
@@ -285,23 +219,12 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		}
 		_gsxgw.S(" hx-get=\"")
 		_gsxgw.URL(string(_gsxv5))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Contact")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</li>")
-		_gsxgw.S("</ul>")
-		_gsxgw.S("</nav>")
-		_gsxgw.S("</header>")
-//line pages.gsx:66:4
-		_gsxgw.S("<main")
-		_gsxgw.S(" id=\"main\"")
-		_gsxgw.S(">")
-//line pages.gsx:66:20
+		_gsxgw.S("\">Contact</a></li></ul></nav></header>")
+//line pages.gsx:97:4
+		_gsxgw.S("<main id=\"main\">")
+//line pages.gsx:97:20
 		_gsxgw.Node(ctx, children)
-		_gsxgw.S("</main>")
-		_gsxgw.S("</body>")
-		_gsxgw.S("</html>")
+		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
 	})
 }
@@ -314,10 +237,10 @@ func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:71:34
+//line pages.gsx:103:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:71:42
+//line pages.gsx:104:3
 			_gsxgw.Node(ctx, ErrorComp(ErrorCompProps{Err: err}))
 			return _gsxgw.Err()
 		})}))
@@ -333,15 +256,11 @@ func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:74:2
-		_gsxgw.S("<h1")
-		_gsxgw.S(">")
-		_gsxgw.S("Error")
-		_gsxgw.S("</h1>")
-//line pages.gsx:75:2
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-//line pages.gsx:75:5
+//line pages.gsx:109:2
+		_gsxgw.S("<h1>Error</h1>")
+//line pages.gsx:110:2
+		_gsxgw.S("<p>")
+//line pages.gsx:110:5
 		_gsxgw.Text(string(err.Error()))
 		_gsxgw.S("</p>")
 		return _gsxgw.Err()
diff --git a/examples/lint-misuse/pages.gsx b/examples/lint-misuse/pages.gsx
index e4d28c1..8c5391b 100644
--- a/examples/lint-misuse/pages.gsx
+++ b/examples/lint-misuse/pages.gsx
@@ -19,10 +19,10 @@ import (
 // make these findings go away. The lint still has value in gsx projects.
 component BadLinks(id int, name string) {
 	<a href="/login">Hard-coded internal</a>
-	<a href={ "/" + "admin" }>Expression literal</a>
-	<a href={ "/items/" + strconv.Itoa(id) }>Concat</a>
-	<a href={ fmt.Sprintf("/users/%s", name) }>Sprintf</a>
-	<a hx-get={ "/api/items" }>Bad hx-get</a>
-	<form action={ "/submit" }>Bad action</form>
+	<a href={"/" + "admin"}>Expression literal</a>
+	<a href={"/items/" + strconv.Itoa(id)}>Concat</a>
+	<a href={fmt.Sprintf("/users/%s", name)}>Sprintf</a>
+	<a hx-get={"/api/items"}>Bad hx-get</a>
+	<form action={"/submit"}>Bad action</form>
 	<a href="https://example.com/external">External (allowed)</a>
 }
diff --git a/examples/lint-misuse/pages.x.go b/examples/lint-misuse/pages.x.go
index 890edd8..9fb07de 100644
--- a/examples/lint-misuse/pages.x.go
+++ b/examples/lint-misuse/pages.x.go
@@ -35,57 +35,29 @@ func BadLinks(_gsxp BadLinksProps) gsx.Node {
 		name := _gsxp.Name
 		_gsxgw := gsx.W(_gsxw)
 //line pages.gsx:21:2
-		_gsxgw.S("<a")
-		_gsxgw.S(" href=\"/login\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Hard-coded internal")
-		_gsxgw.S("</a>")
+		_gsxgw.S("<a href=\"/login\">Hard-coded internal</a>")
 //line pages.gsx:22:2
-		_gsxgw.S("<a")
-		_gsxgw.S(" href=\"")
+		_gsxgw.S("<a href=\"")
 		_gsxgw.URL(string("/" + "admin"))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Expression literal")
-		_gsxgw.S("</a>")
+		_gsxgw.S("\">Expression literal</a>")
 //line pages.gsx:23:2
-		_gsxgw.S("<a")
-		_gsxgw.S(" href=\"")
+		_gsxgw.S("<a href=\"")
 		_gsxgw.URL(string("/items/" + strconv.Itoa(id)))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Concat")
-		_gsxgw.S("</a>")
+		_gsxgw.S("\">Concat</a>")
 //line pages.gsx:24:2
-		_gsxgw.S("<a")
-		_gsxgw.S(" href=\"")
+		_gsxgw.S("<a href=\"")
 		_gsxgw.URL(string(fmt.Sprintf("/users/%s", name)))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Sprintf")
-		_gsxgw.S("</a>")
+		_gsxgw.S("\">Sprintf</a>")
 //line pages.gsx:25:2
-		_gsxgw.S("<a")
-		_gsxgw.S(" hx-get=\"")
+		_gsxgw.S("<a hx-get=\"")
 		_gsxgw.URL(string("/api/items"))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Bad hx-get")
-		_gsxgw.S("</a>")
+		_gsxgw.S("\">Bad hx-get</a>")
 //line pages.gsx:26:2
-		_gsxgw.S("<form")
-		_gsxgw.S(" action=\"")
+		_gsxgw.S("<form action=\"")
 		_gsxgw.URL(string("/submit"))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Bad action")
-		_gsxgw.S("</form>")
+		_gsxgw.S("\">Bad action</form>")
 //line pages.gsx:27:2
-		_gsxgw.S("<a")
-		_gsxgw.S(" href=\"https://example.com/external\"")
-		_gsxgw.S(">")
-		_gsxgw.S("External (allowed)")
-		_gsxgw.S("</a>")
+		_gsxgw.S("<a href=\"https://example.com/external\">External (allowed)</a>")
 		return _gsxgw.Err()
 	})
 }
diff --git a/examples/simple/pages.gsx b/examples/simple/pages.gsx
index 69ff909..94861ae 100644
--- a/examples/simple/pages.gsx
+++ b/examples/simple/pages.gsx
@@ -13,7 +13,9 @@ type contact struct{}
 component (p index) Page() {
 	<Layout>
 		<h1>Welcome to the Index Page</h1>
-		<p>Navigate to the product, team, or contact pages using the links below:</p>
+		<p>
+			Navigate to the product, team, or contact pages using the links below:
+		</p>
 	</Layout>
 }
 
@@ -42,21 +44,29 @@ component Layout() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
-			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3" />
+			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3"/>
 			<title>Simple Example</title>
 		</head>
 		<body>
 			<header class="navbar">
 				<nav>
 					<ul role="list">
-						<li><a href={ index{} |> url }>Home</a></li>
-						<li><a href={ product{} |> url }>Product</a></li>
-						<li><a href={ team{} |> url }>Team</a></li>
-						<li><a href={ contact{} |> url }>Contact</a></li>
+						<li>
+							<a href={index{} |> url}>Home</a>
+						</li>
+						<li>
+							<a href={product{} |> url}>Product</a>
+						</li>
+						<li>
+							<a href={team{} |> url}>Team</a>
+						</li>
+						<li>
+							<a href={contact{} |> url}>Contact</a>
+						</li>
 					</ul>
 				</nav>
 			</header>
-			<main>{children}</main>
+			<main>{ children }</main>
 		</body>
 	</html>
 }
diff --git a/examples/simple/pages.x.go b/examples/simple/pages.x.go
index 5f05b95..4fce15f 100644
--- a/examples/simple/pages.x.go
+++ b/examples/simple/pages.x.go
@@ -27,15 +27,9 @@ func (p index) Page() gsx.Node {
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line pages.gsx:15:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(">")
-			_gsxgw.S("Welcome to the Index Page")
-			_gsxgw.S("</h1>")
+			_gsxgw.S("<h1>Welcome to the Index Page</h1>")
 //line pages.gsx:16:3
-			_gsxgw.S("<p")
-			_gsxgw.S(">")
-			_gsxgw.S("Navigate to the product, team, or contact pages using the links below:")
-			_gsxgw.S("</p>")
+			_gsxgw.S("<p>Navigate to the product, team, or contact pages using the links below:</p>")
 			return _gsxgw.Err()
 		})}))
 		return _gsxgw.Err()
@@ -45,19 +39,13 @@ func (p index) Page() gsx.Node {
 func (p product) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:21:2
+//line pages.gsx:23:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:22:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(">")
-			_gsxgw.S("Product Page")
-			_gsxgw.S("</h1>")
-//line pages.gsx:23:3
-			_gsxgw.S("<p")
-			_gsxgw.S(">")
-			_gsxgw.S("This is the product page.")
-			_gsxgw.S("</p>")
+//line pages.gsx:24:3
+			_gsxgw.S("<h1>Product Page</h1>")
+//line pages.gsx:25:3
+			_gsxgw.S("<p>This is the product page.</p>")
 			return _gsxgw.Err()
 		})}))
 		return _gsxgw.Err()
@@ -67,19 +55,13 @@ func (p product) Page() gsx.Node {
 func (p team) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:28:2
+//line pages.gsx:30:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:29:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(">")
-			_gsxgw.S("Team Page")
-			_gsxgw.S("</h1>")
-//line pages.gsx:30:3
-			_gsxgw.S("<p")
-			_gsxgw.S(">")
-			_gsxgw.S("This is the team page.")
-			_gsxgw.S("</p>")
+//line pages.gsx:31:3
+			_gsxgw.S("<h1>Team Page</h1>")
+//line pages.gsx:32:3
+			_gsxgw.S("<p>This is the team page.</p>")
 			return _gsxgw.Err()
 		})}))
 		return _gsxgw.Err()
@@ -89,19 +71,13 @@ func (p team) Page() gsx.Node {
 func (p contact) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:35:2
+//line pages.gsx:37:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:36:3
-			_gsxgw.S("<h1")
-			_gsxgw.S(">")
-			_gsxgw.S("Contact Page")
-			_gsxgw.S("</h1>")
-//line pages.gsx:37:3
-			_gsxgw.S("<p")
-			_gsxgw.S(">")
-			_gsxgw.S("This is the contact page.")
-			_gsxgw.S("</p>")
+//line pages.gsx:38:3
+			_gsxgw.S("<h1>Contact Page</h1>")
+//line pages.gsx:39:3
+			_gsxgw.S("<p>This is the contact page.</p>")
 			return _gsxgw.Err()
 		})}))
 		return _gsxgw.Err()
@@ -117,42 +93,25 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		children := _gsxp.Children
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
-//line pages.gsx:43:2
-		_gsxgw.S("<html")
-		_gsxgw.S(" lang=\"en\"")
-		_gsxgw.S(">")
-//line pages.gsx:44:3
-		_gsxgw.S("<head")
-		_gsxgw.S(">")
-//line pages.gsx:45:4
-		_gsxgw.S("<link")
-		_gsxgw.S(" rel=\"stylesheet\"")
-		_gsxgw.S(" href=\"https://unpkg.com/missing.css@1.1.3\"")
-		_gsxgw.S("/>")
-//line pages.gsx:46:4
-		_gsxgw.S("<title")
-		_gsxgw.S(">")
-		_gsxgw.S("Simple Example")
-		_gsxgw.S("</title>")
-		_gsxgw.S("</head>")
-//line pages.gsx:48:3
-		_gsxgw.S("<body")
-		_gsxgw.S(">")
-//line pages.gsx:49:4
-		_gsxgw.S("<header")
-		_gsxgw.S(" class=\"navbar\"")
-		_gsxgw.S(">")
-//line pages.gsx:50:5
-		_gsxgw.S("<nav")
-		_gsxgw.S(">")
-//line pages.gsx:51:6
-		_gsxgw.S("<ul")
-		_gsxgw.S(" role=\"list\"")
-		_gsxgw.S(">")
-//line pages.gsx:52:7
-		_gsxgw.S("<li")
-		_gsxgw.S(">")
-//line pages.gsx:52:11
+//line pages.gsx:45:2
+		_gsxgw.S("<html lang=\"en\">")
+//line pages.gsx:46:3
+		_gsxgw.S("<head>")
+//line pages.gsx:47:4
+		_gsxgw.S("<link rel=\"stylesheet\" href=\"https://unpkg.com/missing.css@1.1.3\"/>")
+//line pages.gsx:48:4
+		_gsxgw.S("<title>Simple Example</title></head>")
+//line pages.gsx:50:3
+		_gsxgw.S("<body>")
+//line pages.gsx:51:4
+		_gsxgw.S("<header class=\"navbar\">")
+//line pages.gsx:52:5
+		_gsxgw.S("<nav>")
+//line pages.gsx:53:6
+		_gsxgw.S("<ul role=\"list\">")
+//line pages.gsx:54:7
+		_gsxgw.S("<li>")
+//line pages.gsx:55:8
 		_gsxgw.S("<a")
 		_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (index{}))
 		if _gsxerr != nil {
@@ -160,15 +119,10 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv0))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Home")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</li>")
-//line pages.gsx:53:7
-		_gsxgw.S("<li")
-		_gsxgw.S(">")
-//line pages.gsx:53:11
+		_gsxgw.S("\">Home</a></li>")
+//line pages.gsx:57:7
+		_gsxgw.S("<li>")
+//line pages.gsx:58:8
 		_gsxgw.S("<a")
 		_gsxv1, _gsxerr := _gsxf0.URLFor(ctx, (product{}))
 		if _gsxerr != nil {
@@ -176,15 +130,10 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv1))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Product")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</li>")
-//line pages.gsx:54:7
-		_gsxgw.S("<li")
-		_gsxgw.S(">")
-//line pages.gsx:54:11
+		_gsxgw.S("\">Product</a></li>")
+//line pages.gsx:60:7
+		_gsxgw.S("<li>")
+//line pages.gsx:61:8
 		_gsxgw.S("<a")
 		_gsxv2, _gsxerr := _gsxf0.URLFor(ctx, (team{}))
 		if _gsxerr != nil {
@@ -192,15 +141,10 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv2))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Team")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</li>")
-//line pages.gsx:55:7
-		_gsxgw.S("<li")
-		_gsxgw.S(">")
-//line pages.gsx:55:11
+		_gsxgw.S("\">Team</a></li>")
+//line pages.gsx:63:7
+		_gsxgw.S("<li>")
+//line pages.gsx:64:8
 		_gsxgw.S("<a")
 		_gsxv3, _gsxerr := _gsxf0.URLFor(ctx, (contact{}))
 		if _gsxerr != nil {
@@ -208,22 +152,12 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		}
 		_gsxgw.S(" href=\"")
 		_gsxgw.URL(string(_gsxv3))
-		_gsxgw.S("\"")
-		_gsxgw.S(">")
-		_gsxgw.S("Contact")
-		_gsxgw.S("</a>")
-		_gsxgw.S("</li>")
-		_gsxgw.S("</ul>")
-		_gsxgw.S("</nav>")
-		_gsxgw.S("</header>")
-//line pages.gsx:59:4
-		_gsxgw.S("<main")
-		_gsxgw.S(">")
-//line pages.gsx:59:10
+		_gsxgw.S("\">Contact</a></li></ul></nav></header>")
+//line pages.gsx:69:4
+		_gsxgw.S("<main>")
+//line pages.gsx:69:10
 		_gsxgw.Node(ctx, children)
-		_gsxgw.S("</main>")
-		_gsxgw.S("</body>")
-		_gsxgw.S("</html>")
+		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
 	})
 }
diff --git a/examples/todo/pages.gsx b/examples/todo/pages.gsx
index 4f7294e..c90223f 100644
--- a/examples/todo/pages.gsx
+++ b/examples/todo/pages.gsx
@@ -18,8 +18,8 @@ component (p index) Page() {
 		<div class="todo-app">
 			<h1>TODO App</h1>
 			<form
-				hx-post={ add{} |> url }
-				hx-target={ index.TodoList |> target }
+				hx-post={add{} |> url}
+				hx-target={index.TodoList |> target}
 				hx-swap="innerHTML"
 				hx-on:htmx:after-request="this.reset()"
 			>
@@ -33,7 +33,7 @@ component (p index) Page() {
 					<button type="submit">Add Todo</button>
 				</div>
 			</form>
-			<div id={ index.TodoList |> id }>
+			<div id={index.TodoList |> id}>
 				<p.TodoList/>
 			</div>
 		</div>
@@ -90,16 +90,16 @@ component TodoList() {
 					<input
 						type="checkbox"
 						checked={todo.Completed}
-						hx-post={ toggle{} |> url("id", todo.ID) }
-						hx-target={ index.TodoList |> target }
+						hx-post={toggle{} |> url("id", todo.ID)}
+						hx-target={index.TodoList |> target}
 						hx-swap="innerHTML"
 					/>
 					<span class="todo-text">{ todo.Text }</span>
 				</div>
 				<button
 					class="delete-btn"
-					hx-delete={ deleteTodo{} |> url("id", todo.ID) }
-					hx-target={ index.TodoList |> target }
+					hx-delete={deleteTodo{} |> url("id", todo.ID)}
+					hx-target={index.TodoList |> target}
 					hx-swap="innerHTML"
 					hx-confirm="Are you sure you want to delete this todo?"
 				>
@@ -117,7 +117,7 @@ component Layout() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
-			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3" />
+			<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.3"/>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 			<title>TODO App</title>
 			<style>
@@ -215,16 +215,14 @@ component Layout() {
 			</style>
 		</head>
 		<body>
-			<main id="content">
-				{children}
-			</main>
+			<main id="content">{ children }</main>
 		</body>
 	</html>
 }
 
 component ErrorPage(err error) {
 	<Layout>
-		<ErrorComp err={err} />
+		<ErrorComp err={err}/>
 	</Layout>
 }
 
diff --git a/examples/todo/pages.x.go b/examples/todo/pages.x.go
index f7271ee..7097f38 100644
--- a/examples/todo/pages.x.go
+++ b/examples/todo/pages.x.go
@@ -26,14 +26,9 @@ func (p index) Page() gsx.Node {
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
 //line pages.gsx:18:3
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"todo-app\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<div class=\"todo-app\">")
 //line pages.gsx:19:4
-			_gsxgw.S("<h1")
-			_gsxgw.S(">")
-			_gsxgw.S("TODO App")
-			_gsxgw.S("</h1>")
+			_gsxgw.S("<h1>TODO App</h1>")
 //line pages.gsx:20:4
 			_gsxgw.S("<form")
 			_gsxv0, _gsxerr := _gsxf0.URLFor(ctx, (add{}))
@@ -49,29 +44,15 @@ func (p index) Page() gsx.Node {
 			}
 			_gsxgw.S(" hx-target=\"")
 			_gsxgw.AttrValue(string(_gsxv1))
-			_gsxgw.S("\"")
-			_gsxgw.S(" hx-swap=\"innerHTML\"")
-			_gsxgw.S(" hx-on:htmx:after-request=\"this.reset()\"")
-			_gsxgw.S(">")
+			_gsxgw.S("\" hx-swap=\"innerHTML\" hx-on:htmx:after-request=\"this.reset()\">")
 //line pages.gsx:26:5
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"form-group\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<div class=\"form-group\">")
 //line pages.gsx:27:6
-			_gsxgw.S("<input")
-			_gsxgw.S(" type=\"text\"")
-			_gsxgw.S(" name=\"text\"")
-			_gsxgw.S(" placeholder=\"Add a new todo...\"")
+			_gsxgw.S("<input type=\"text\" name=\"text\" placeholder=\"Add a new todo...\"")
 			_gsxgw.BoolAttr("required", true)
 			_gsxgw.S("/>")
 //line pages.gsx:33:6
-			_gsxgw.S("<button")
-			_gsxgw.S(" type=\"submit\"")
-			_gsxgw.S(">")
-			_gsxgw.S("Add Todo")
-			_gsxgw.S("</button>")
-			_gsxgw.S("</div>")
-			_gsxgw.S("</form>")
+			_gsxgw.S("<button type=\"submit\">Add Todo</button></div></form>")
 //line pages.gsx:36:4
 			_gsxgw.S("<div")
 			_gsxv2, _gsxerr := _gsxf0.ID(ctx, (index.TodoList))
@@ -80,12 +61,10 @@ func (p index) Page() gsx.Node {
 			}
 			_gsxgw.S(" id=\"")
 			_gsxgw.AttrValue(string(_gsxv2))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
+			_gsxgw.S("\">")
 //line pages.gsx:37:5
 			_gsxgw.Node(ctx, p.TodoList())
-			_gsxgw.S("</div>")
-			_gsxgw.S("</div>")
+			_gsxgw.S("</div></div>")
 			return _gsxgw.Err()
 		})}))
 		return _gsxgw.Err()
@@ -143,24 +122,17 @@ func TodoList() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
 //line pages.gsx:86:2
-		_gsxgw.S("<ul")
-		_gsxgw.S(" class=\"todo-list\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<ul class=\"todo-list\">")
 //line pages.gsx:87:3
 		for _, todo := range getTodos() {
 //line pages.gsx:88:4
-			_gsxgw.S("<li")
-			_gsxgw.S(" class=\"")
+			_gsxgw.S("<li class=\"")
 			_gsxgw.Class(gsx.Class("todo-item"), gsx.ClassIf("completed", todo.Completed))
-			_gsxgw.S("\"")
-			_gsxgw.S(">")
+			_gsxgw.S("\">")
 //line pages.gsx:89:5
-			_gsxgw.S("<div")
-			_gsxgw.S(" class=\"todo-content\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<div class=\"todo-content\">")
 //line pages.gsx:90:6
-			_gsxgw.S("<input")
-			_gsxgw.S(" type=\"checkbox\"")
+			_gsxgw.S("<input type=\"checkbox\"")
 			_gsxgw.BoolAttr("checked", bool(todo.Completed))
 			_gsxv3, _gsxerr := _gsxf0.URLFor(ctx, (toggle{}), "id", todo.ID)
 			if _gsxerr != nil {
@@ -175,20 +147,14 @@ func TodoList() gsx.Node {
 			}
 			_gsxgw.S(" hx-target=\"")
 			_gsxgw.AttrValue(string(_gsxv4))
-			_gsxgw.S("\"")
-			_gsxgw.S(" hx-swap=\"innerHTML\"")
-			_gsxgw.S("/>")
+			_gsxgw.S("\" hx-swap=\"innerHTML\"/>")
 //line pages.gsx:97:6
-			_gsxgw.S("<span")
-			_gsxgw.S(" class=\"todo-text\"")
-			_gsxgw.S(">")
+			_gsxgw.S("<span class=\"todo-text\">")
 //line pages.gsx:97:30
 			_gsxgw.Text(string(todo.Text))
-			_gsxgw.S("</span>")
-			_gsxgw.S("</div>")
+			_gsxgw.S("</span></div>")
 //line pages.gsx:99:5
-			_gsxgw.S("<button")
-			_gsxgw.S(" class=\"delete-btn\"")
+			_gsxgw.S("<button class=\"delete-btn\"")
 			_gsxv5, _gsxerr := _gsxf0.URLFor(ctx, (deleteTodo{}), "id", todo.ID)
 			if _gsxerr != nil {
 				return _gsxerr
@@ -202,23 +168,13 @@ func TodoList() gsx.Node {
 			}
 			_gsxgw.S(" hx-target=\"")
 			_gsxgw.AttrValue(string(_gsxv6))
-			_gsxgw.S("\"")
-			_gsxgw.S(" hx-swap=\"innerHTML\"")
-			_gsxgw.S(" hx-confirm=\"Are you sure you want to delete this todo?\"")
-			_gsxgw.S(">")
-			_gsxgw.S("×")
-			_gsxgw.S("</button>")
-			_gsxgw.S("</li>")
+			_gsxgw.S("\" hx-swap=\"innerHTML\" hx-confirm=\"Are you sure you want to delete this todo?\">×</button></li>")
 		}
 		_gsxgw.S("</ul>")
 //line pages.gsx:111:2
 		if len(getTodos()) == 0 {
 //line pages.gsx:112:3
-			_gsxgw.S("<p")
-			_gsxgw.S(" class=\"empty-state\"")
-			_gsxgw.S(">")
-			_gsxgw.S("No todos yet. Add one above!")
-			_gsxgw.S("</p>")
+			_gsxgw.S("<p class=\"empty-state\">No todos yet. Add one above!</p>")
 		}
 		return _gsxgw.Err()
 	})
@@ -234,45 +190,24 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 		_gsxgw := gsx.W(_gsxw)
 		_gsxgw.S("<!DOCTYPE html>")
 //line pages.gsx:118:2
-		_gsxgw.S("<html")
-		_gsxgw.S(" lang=\"en\"")
-		_gsxgw.S(">")
+		_gsxgw.S("<html lang=\"en\">")
 //line pages.gsx:119:3
-		_gsxgw.S("<head")
-		_gsxgw.S(">")
+		_gsxgw.S("<head>")
 //line pages.gsx:120:4
-		_gsxgw.S("<link")
-		_gsxgw.S(" rel=\"stylesheet\"")
-		_gsxgw.S(" href=\"https://unpkg.com/missing.css@1.1.3\"")
-		_gsxgw.S("/>")
+		_gsxgw.S("<link rel=\"stylesheet\" href=\"https://unpkg.com/missing.css@1.1.3\"/>")
 //line pages.gsx:121:4
-		_gsxgw.S("<script")
-		_gsxgw.S(" src=\"https://unpkg.com/htmx.org@2.0.4\"")
-		_gsxgw.S(">")
-		_gsxgw.S("</script>")
+		_gsxgw.S("<script src=\"https://unpkg.com/htmx.org@2.0.4\"></script>")
 //line pages.gsx:122:4
-		_gsxgw.S("<title")
-		_gsxgw.S(">")
-		_gsxgw.S("TODO App")
-		_gsxgw.S("</title>")
+		_gsxgw.S("<title>TODO App</title>")
 //line pages.gsx:123:4
-		_gsxgw.S("<style")
-		_gsxgw.S(">")
-		_gsxgw.S(".todo-app{max-width: 600px;margin: 2rem auto;padding: 2rem}.form-group{display: flex;gap: 0.5rem;margin-bottom: 2rem}.form-group input{flex: 1;padding: 0.75rem;border: 1px solid #ddd;border-radius: 4px}.form-group button{padding: 0.75rem 1.5rem;background: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer}.form-group button:hover{background: #0056b3}.todo-list{list-style: none;padding: 0}.todo-item{display: flex;align-items: center;justify-content: space-between;padding: 1rem;border: 1px solid #eee;border-radius: 4px;margin-bottom: 0.5rem;background: white}.todo-item.completed{opacity: 0.6}.todo-item.completed .todo-text{text-decoration: line-through}.todo-content{display: flex;align-items: center;gap: 0.75rem;flex: 1}.todo-text{flex: 1}.delete-btn{background: #dc3545;color: white;border: none;border-radius: 50%;width: 2rem;height: 2rem;cursor: pointer;font-size: 1.2rem;display: flex;align-items: center;justify-content: center}.delete-btn:hover{background: #c82333}.empty-state{text-align: center;color: #666;font-style: italic;padding: 2rem}")
-		_gsxgw.S("</style>")
-		_gsxgw.S("</head>")
+		_gsxgw.S("<style>.todo-app{max-width: 600px;margin: 2rem auto;padding: 2rem}.form-group{display: flex;gap: 0.5rem;margin-bottom: 2rem}.form-group input{flex: 1;padding: 0.75rem;border: 1px solid #ddd;border-radius: 4px}.form-group button{padding: 0.75rem 1.5rem;background: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer}.form-group button:hover{background: #0056b3}.todo-list{list-style: none;padding: 0}.todo-item{display: flex;align-items: center;justify-content: space-between;padding: 1rem;border: 1px solid #eee;border-radius: 4px;margin-bottom: 0.5rem;background: white}.todo-item.completed{opacity: 0.6}.todo-item.completed .todo-text{text-decoration: line-through}.todo-content{display: flex;align-items: center;gap: 0.75rem;flex: 1}.todo-text{flex: 1}.delete-btn{background: #dc3545;color: white;border: none;border-radius: 50%;width: 2rem;height: 2rem;cursor: pointer;font-size: 1.2rem;display: flex;align-items: center;justify-content: center}.delete-btn:hover{background: #c82333}.empty-state{text-align: center;color: #666;font-style: italic;padding: 2rem}</style></head>")
 //line pages.gsx:217:3
-		_gsxgw.S("<body")
-		_gsxgw.S(">")
+		_gsxgw.S("<body>")
 //line pages.gsx:218:4
-		_gsxgw.S("<main")
-		_gsxgw.S(" id=\"content\"")
-		_gsxgw.S(">")
-//line pages.gsx:219:5
+		_gsxgw.S("<main id=\"content\">")
+//line pages.gsx:218:23
 		_gsxgw.Node(ctx, children)
-		_gsxgw.S("</main>")
-		_gsxgw.S("</body>")
-		_gsxgw.S("</html>")
+		_gsxgw.S("</main></body></html>")
 		return _gsxgw.Err()
 	})
 }
@@ -285,10 +220,10 @@ func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:226:2
+//line pages.gsx:224:2
 		_gsxgw.Node(ctx, Layout(LayoutProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:227:3
+//line pages.gsx:225:3
 			_gsxgw.Node(ctx, ErrorComp(ErrorCompProps{Err: err}))
 			return _gsxgw.Err()
 		})}))
@@ -304,15 +239,11 @@ func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:232:2
-		_gsxgw.S("<h1")
-		_gsxgw.S(">")
-		_gsxgw.S("Error")
-		_gsxgw.S("</h1>")
-//line pages.gsx:233:2
-		_gsxgw.S("<p")
-		_gsxgw.S(">")
-//line pages.gsx:233:5
+//line pages.gsx:230:2
+		_gsxgw.S("<h1>Error</h1>")
+//line pages.gsx:231:2
+		_gsxgw.S("<p>")
+//line pages.gsx:231:5
 		_gsxgw.Text(string(err.Error()))
 		_gsxgw.S("</p>")
 		return _gsxgw.Err()

From 6f5477db9680c8fee70b47921add00c89716dda7 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Fri, 26 Jun 2026 21:03:23 +0100
Subject: [PATCH 11/13] regen

---
 examples/htmx-render-target/pages.x.go | 2 +-
 examples/todo/pages.x.go               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/htmx-render-target/pages.x.go b/examples/htmx-render-target/pages.x.go
index 8d78e3c..194ffb8 100644
--- a/examples/htmx-render-target/pages.x.go
+++ b/examples/htmx-render-target/pages.x.go
@@ -256,7 +256,7 @@ func Html(_gsxp HtmlProps) gsx.Node {
 //line pages.gsx:132:4
 		_gsxgw.S("<title>RenderTarget API Example</title>")
 //line pages.gsx:133:4
-		_gsxgw.S("<style>.widget{padding: 1rem;border: 1px solid #ddd;border-radius: 8px;background: white}.widget h3{margin-top: 0}.chart{display: flex;align-items: flex-end;height: 150px;margin: 1rem 0}</style></head>")
+		_gsxgw.S("<style>\n\t\t\t\t.widget {\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\tborder: 1px solid #ddd;\n\t\t\t\t\tborder-radius: 8px;\n\t\t\t\t\tbackground: white;\n\t\t\t\t}\n\t\t\t\t.widget h3 {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t\t.chart {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: flex-end;\n\t\t\t\t\theight: 150px;\n\t\t\t\t\tmargin: 1rem 0;\n\t\t\t\t}\n\t\t\t</style></head>")
 //line pages.gsx:151:3
 		_gsxgw.S("<body>")
 //line pages.gsx:152:4
diff --git a/examples/todo/pages.x.go b/examples/todo/pages.x.go
index 7097f38..923f08e 100644
--- a/examples/todo/pages.x.go
+++ b/examples/todo/pages.x.go
@@ -200,7 +200,7 @@ func Layout(_gsxp LayoutProps) gsx.Node {
 //line pages.gsx:122:4
 		_gsxgw.S("<title>TODO App</title>")
 //line pages.gsx:123:4
-		_gsxgw.S("<style>.todo-app{max-width: 600px;margin: 2rem auto;padding: 2rem}.form-group{display: flex;gap: 0.5rem;margin-bottom: 2rem}.form-group input{flex: 1;padding: 0.75rem;border: 1px solid #ddd;border-radius: 4px}.form-group button{padding: 0.75rem 1.5rem;background: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer}.form-group button:hover{background: #0056b3}.todo-list{list-style: none;padding: 0}.todo-item{display: flex;align-items: center;justify-content: space-between;padding: 1rem;border: 1px solid #eee;border-radius: 4px;margin-bottom: 0.5rem;background: white}.todo-item.completed{opacity: 0.6}.todo-item.completed .todo-text{text-decoration: line-through}.todo-content{display: flex;align-items: center;gap: 0.75rem;flex: 1}.todo-text{flex: 1}.delete-btn{background: #dc3545;color: white;border: none;border-radius: 50%;width: 2rem;height: 2rem;cursor: pointer;font-size: 1.2rem;display: flex;align-items: center;justify-content: center}.delete-btn:hover{background: #c82333}.empty-state{text-align: center;color: #666;font-style: italic;padding: 2rem}</style></head>")
+		_gsxgw.S("<style>\n\t\t\t\t.todo-app {\n\t\t\t\t\tmax-width: 600px;\n\t\t\t\t\tmargin: 2rem auto;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t}\n\n\t\t\t\t.form-group {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tgap: 0.5rem;\n\t\t\t\t\tmargin-bottom: 2rem;\n\t\t\t\t}\n\n\t\t\t\t.form-group input {\n\t\t\t\t\tflex: 1;\n\t\t\t\t\tpadding: 0.75rem;\n\t\t\t\t\tborder: 1px solid #ddd;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t}\n\n\t\t\t\t.form-group button {\n\t\t\t\t\tpadding: 0.75rem 1.5rem;\n\t\t\t\t\tbackground: #007bff;\n\t\t\t\t\tcolor: white;\n\t\t\t\t\tborder: none;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\n\t\t\t\t.form-group button:hover {\n\t\t\t\t\tbackground: #0056b3;\n\t\t\t\t}\n\n\t\t\t\t.todo-list {\n\t\t\t\t\tlist-style: none;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\n\t\t\t\t.todo-item {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\tborder: 1px solid #eee;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\tmargin-bottom: 0.5rem;\n\t\t\t\t\tbackground: white;\n\t\t\t\t}\n\n\t\t\t\t.todo-item.completed {\n\t\t\t\t\topacity: 0.6;\n\t\t\t\t}\n\n\t\t\t\t.todo-item.completed .todo-text {\n\t\t\t\t\ttext-decoration: line-through;\n\t\t\t\t}\n\n\t\t\t\t.todo-content {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tgap: 0.75rem;\n\t\t\t\t\tflex: 1;\n\t\t\t\t}\n\n\t\t\t\t.todo-text {\n\t\t\t\t\tflex: 1;\n\t\t\t\t}\n\n\t\t\t\t.delete-btn {\n\t\t\t\t\tbackground: #dc3545;\n\t\t\t\t\tcolor: white;\n\t\t\t\t\tborder: none;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\twidth: 2rem;\n\t\t\t\t\theight: 2rem;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tfont-size: 1.2rem;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\t.delete-btn:hover {\n\t\t\t\t\tbackground: #c82333;\n\t\t\t\t}\n\n\t\t\t\t.empty-state {\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: #666;\n\t\t\t\t\tfont-style: italic;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t}\n\t\t\t</style></head>")
 //line pages.gsx:217:3
 		_gsxgw.S("<body>")
 //line pages.gsx:218:4

From ac9e46a6d832587b0935424202a61672482d6f16 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Fri, 26 Jun 2026 21:21:46 +0100
Subject: [PATCH 12/13] .

---
 examples/htmx-render-target/pages.gsx  |  9 +++++++++
 examples/htmx-render-target/pages.x.go | 21 +++++++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/examples/htmx-render-target/pages.gsx b/examples/htmx-render-target/pages.gsx
index 332f3b8..72149c8 100644
--- a/examples/htmx-render-target/pages.gsx
+++ b/examples/htmx-render-target/pages.gsx
@@ -150,6 +150,15 @@ component Html() {
 		</head>
 		<body>
 			<main>{ children }</main>
+			<script>
+				// Optional: Add some basic HTMX event listeners for debugging
+				document.body.addEventListener('htmx:beforeRequest', (evt) => {
+					console.log('HTMX Request:', evt.detail);
+				});
+				document.body.addEventListener('htmx:afterRequest', (evt) => {
+					console.log('HTMX Response:', evt.detail);
+				});
+			</script>
 		</body>
 	</html>
 }
diff --git a/examples/htmx-render-target/pages.x.go b/examples/htmx-render-target/pages.x.go
index 194ffb8..85c5820 100644
--- a/examples/htmx-render-target/pages.x.go
+++ b/examples/htmx-render-target/pages.x.go
@@ -15,6 +15,7 @@ import (
 // Shared standalone function components (can be used across multiple pages).
 // These demonstrate the power of RenderTarget — no wrapper methods needed.
 
+//line pages.gsx:6:1
 func UserStatsWidget(stats UserStats) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -52,6 +53,7 @@ func UserStatsWidget(stats UserStats) gsx.Node {
 	})
 }
 
+//line pages.gsx:21:1
 func SalesChartWidget(data SalesData) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -99,6 +101,7 @@ type NotificationsListProps struct {
 	Attrs         gsx.Attrs
 }
 
+//line pages.gsx:44:1
 func NotificationsList(_gsxp NotificationsListProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		notifications := _gsxp.Notifications
@@ -152,6 +155,7 @@ func NotificationsList(_gsxp NotificationsListProps) gsx.Node {
 
 type dashboard struct{}
 
+//line pages.gsx:68:1
 func (p dashboard) Page(props dashboardData) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -240,6 +244,7 @@ type HtmlProps struct {
 	Children gsx.Node
 }
 
+//line pages.gsx:126:1
 func Html(_gsxp HtmlProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		children := _gsxp.Children
@@ -263,7 +268,9 @@ func Html(_gsxp HtmlProps) gsx.Node {
 		_gsxgw.S("<main>")
 //line pages.gsx:152:10
 		_gsxgw.Node(ctx, children)
-		_gsxgw.S("</main></body></html>")
+		_gsxgw.S("</main>")
+//line pages.gsx:153:4
+		_gsxgw.S("<script>\n\t\t\t\t// Optional: Add some basic HTMX event listeners for debugging\n\t\t\t\tdocument.body.addEventListener('htmx:beforeRequest', (evt) => {\n\t\t\t\t\tconsole.log('HTMX Request:', evt.detail);\n\t\t\t\t});\n\t\t\t\tdocument.body.addEventListener('htmx:afterRequest', (evt) => {\n\t\t\t\t\tconsole.log('HTMX Response:', evt.detail);\n\t\t\t\t});\n\t\t\t</script></body></html>")
 		return _gsxgw.Err()
 	})
 }
@@ -272,14 +279,15 @@ type ErrorPageProps struct {
 	Err error
 }
 
+//line pages.gsx:166:1
 func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:158:2
+//line pages.gsx:167:2
 		_gsxgw.Node(ctx, Html(HtmlProps{Children: gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 			_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:159:3
+//line pages.gsx:168:3
 			_gsxgw.Node(ctx, ErrorComp(ErrorCompProps{Err: err}))
 			return _gsxgw.Err()
 		})}))
@@ -291,15 +299,16 @@ type ErrorCompProps struct {
 	Err error
 }
 
+//line pages.gsx:172:1
 func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
 		_gsxgw := gsx.W(_gsxw)
-//line pages.gsx:164:2
+//line pages.gsx:173:2
 		_gsxgw.S("<h1>Error</h1>")
-//line pages.gsx:165:2
+//line pages.gsx:174:2
 		_gsxgw.S("<p>")
-//line pages.gsx:165:5
+//line pages.gsx:174:5
 		_gsxgw.Text(string(err.Error()))
 		_gsxgw.S("</p>")
 		return _gsxgw.Err()

From bf3cb0c8f0a8937548ea4ca99e44ca45a5e9e4c7 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.space@gmail.com>
Date: Sat, 27 Jun 2026 21:13:45 +0100
Subject: [PATCH 13/13] regen

---
 examples/blog/admin/components.x.go         |  4 ++++
 examples/blog/admin/dashboard.x.go          |  1 +
 examples/blog/admin/login.x.go              |  1 +
 examples/blog/admin/posts.x.go              |  5 +++++
 examples/blog/admin/users.x.go              |  1 +
 examples/blog/blog/category.x.go            |  1 +
 examples/blog/blog/components.x.go          |  3 +++
 examples/blog/blog/home.x.go                |  1 +
 examples/blog/blog/post.x.go                |  1 +
 examples/blog/blog/search.x.go              |  2 ++
 examples/blog/ui/components/components.x.go |  8 ++++++++
 examples/blog/ui/layout/layout.x.go         |  2 ++
 examples/htmx/pages.x.go                    | 12 ++++++++++++
 examples/lint-misuse/pages.x.go             |  1 +
 examples/simple/pages.x.go                  |  5 +++++
 examples/todo/pages.x.go                    |  6 ++++++
 16 files changed, 54 insertions(+)

diff --git a/examples/blog/admin/components.x.go b/examples/blog/admin/components.x.go
index c670bcd..c8d0c70 100644
--- a/examples/blog/admin/components.x.go
+++ b/examples/blog/admin/components.x.go
@@ -22,6 +22,7 @@ type StatCellProps struct {
 	Attrs gsx.Attrs
 }
 
+//line components.gsx:14:1
 func StatCell(_gsxp StatCellProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		label := _gsxp.Label
@@ -53,6 +54,7 @@ type StatsGridProps struct {
 	Attrs gsx.Attrs
 }
 
+//line components.gsx:23:1
 func StatsGrid(_gsxp StatsGridProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		stats := _gsxp.Stats
@@ -92,6 +94,7 @@ type RecentPostsCardProps struct {
 	Attrs gsx.Attrs
 }
 
+//line components.gsx:32:1
 func RecentPostsCard(_gsxp RecentPostsCardProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		posts := _gsxp.Posts
@@ -160,6 +163,7 @@ type PostsTableProps struct {
 	Attrs gsx.Attrs
 }
 
+//line components.gsx:67:1
 func PostsTable(_gsxp PostsTableProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		posts := _gsxp.Posts
diff --git a/examples/blog/admin/dashboard.x.go b/examples/blog/admin/dashboard.x.go
index 290ee42..6f4a914 100644
--- a/examples/blog/admin/dashboard.x.go
+++ b/examples/blog/admin/dashboard.x.go
@@ -50,6 +50,7 @@ func (p dashboardPage) Props(r *http.Request, s *store.Store, target structpages
 	}, nil
 }
 
+//line dashboard.gsx:47:1
 func (p dashboardPage) Page(props dashboardProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
diff --git a/examples/blog/admin/login.x.go b/examples/blog/admin/login.x.go
index 73e7105..ce7480c 100644
--- a/examples/blog/admin/login.x.go
+++ b/examples/blog/admin/login.x.go
@@ -19,6 +19,7 @@ type LoginShellProps struct {
 	ErrMsg   string
 }
 
+//line login.gsx:8:1
 func LoginShell(_gsxp LoginShellProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		username := _gsxp.Username
diff --git a/examples/blog/admin/posts.x.go b/examples/blog/admin/posts.x.go
index 73ce318..0eecf25 100644
--- a/examples/blog/admin/posts.x.go
+++ b/examples/blog/admin/posts.x.go
@@ -28,6 +28,7 @@ type AdminShellWithProps struct {
 	Children gsx.Node
 }
 
+//line posts.gsx:19:1
 func AdminShellWith(_gsxp AdminShellWithProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		title := _gsxp.Title
@@ -60,6 +61,7 @@ func (postListPage) Props(r *http.Request, s *store.Store) (postListProps, error
 	return postListProps{User: user, Posts: posts}, nil
 }
 
+//line posts.gsx:40:1
 func (p postListPage) Page(props postListProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -102,6 +104,7 @@ func (postNewPage) Props(r *http.Request, s *store.Store) (postFormViewProps, er
 	return postFormViewProps{User: user, Categories: s.ListCategories()}, nil
 }
 
+//line posts.gsx:70:1
 func (p postNewPage) Page(props postFormViewProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -135,6 +138,7 @@ func (postEditPage) Props(r *http.Request, s *store.Store) (postFormViewProps, e
 	return postFormViewProps{User: user, Categories: s.ListCategories(), Post: p}, nil
 }
 
+//line posts.gsx:94:1
 func (p postEditPage) Page(props postFormViewProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -160,6 +164,7 @@ type PostFormProps struct {
 	Attrs  gsx.Attrs
 }
 
+//line posts.gsx:103:1
 func PostForm(_gsxp PostFormProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		p := _gsxp.P
diff --git a/examples/blog/admin/users.x.go b/examples/blog/admin/users.x.go
index d8a2a9f..a591514 100644
--- a/examples/blog/admin/users.x.go
+++ b/examples/blog/admin/users.x.go
@@ -27,6 +27,7 @@ func (userListPage) Props(r *http.Request, s *store.Store) (userListProps, error
 	return userListProps{User: user, Users: s.ListUsers()}, nil
 }
 
+//line users.gsx:25:1
 func (p userListPage) Page(props userListProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
diff --git a/examples/blog/blog/category.x.go b/examples/blog/blog/category.x.go
index 2faa8e3..d72660f 100644
--- a/examples/blog/blog/category.x.go
+++ b/examples/blog/blog/category.x.go
@@ -56,6 +56,7 @@ func (categoryPage) Props(r *http.Request, s *store.Store) (categoryProps, error
 	}, nil
 }
 
+//line category.gsx:54:1
 func (p categoryPage) Page(props categoryProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
diff --git a/examples/blog/blog/components.x.go b/examples/blog/blog/components.x.go
index b45e9a5..039cabd 100644
--- a/examples/blog/blog/components.x.go
+++ b/examples/blog/blog/components.x.go
@@ -17,6 +17,7 @@ type PostMetaProps struct {
 	Attrs gsx.Attrs
 }
 
+//line components.gsx:11:1
 func PostMeta(_gsxp PostMetaProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		p := _gsxp.P
@@ -40,6 +41,7 @@ type PostCardProps struct {
 	Attrs gsx.Attrs
 }
 
+//line components.gsx:17:1
 func PostCard(_gsxp PostCardProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		p := _gsxp.P
@@ -83,6 +85,7 @@ type CommentsListProps struct {
 	Attrs    gsx.Attrs
 }
 
+//line components.gsx:33:1
 func CommentsList(_gsxp CommentsListProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		comments := _gsxp.Comments
diff --git a/examples/blog/blog/home.x.go b/examples/blog/blog/home.x.go
index 944dc86..a5def35 100644
--- a/examples/blog/blog/home.x.go
+++ b/examples/blog/blog/home.x.go
@@ -33,6 +33,7 @@ func (homePage) Props(_ *http.Request, s *store.Store) (homeProps, error) {
 // undispatchable by structpages alongside Page(props) (both would need the same
 // single Props-return type). See GAP notes.
 
+//line home.gsx:29:1
 func (p homePage) Page(props homeProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
diff --git a/examples/blog/blog/post.x.go b/examples/blog/blog/post.x.go
index 7cfb5b5..7dafc62 100644
--- a/examples/blog/blog/post.x.go
+++ b/examples/blog/blog/post.x.go
@@ -39,6 +39,7 @@ func (postPage) Props(r *http.Request, s *store.Store) (postProps, error) {
 	}, nil
 }
 
+//line post.gsx:37:1
 func (p postPage) Page(props postProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
diff --git a/examples/blog/blog/search.x.go b/examples/blog/blog/search.x.go
index 4c92d7e..94c6513 100644
--- a/examples/blog/blog/search.x.go
+++ b/examples/blog/blog/search.x.go
@@ -36,6 +36,7 @@ func (p searchPage) Props(r *http.Request, s *store.Store, target structpages.Re
 	return sp, nil
 }
 
+//line search.gsx:33:1
 func (p searchPage) Page(props searchProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -74,6 +75,7 @@ func (p searchPage) Page(props searchProps) gsx.Node {
 	})
 }
 
+//line search.gsx:56:1
 func (p searchPage) Results(props searchProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
diff --git a/examples/blog/ui/components/components.x.go b/examples/blog/ui/components/components.x.go
index dfad0d8..cf1f0f4 100644
--- a/examples/blog/ui/components/components.x.go
+++ b/examples/blog/ui/components/components.x.go
@@ -34,6 +34,7 @@ type AlertProps struct {
 	Msg  string
 }
 
+//line components.gsx:29:1
 func Alert(_gsxp AlertProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		kind := _gsxp.Kind
@@ -59,6 +60,7 @@ type CardProps struct {
 	Attrs    gsx.Attrs
 }
 
+//line components.gsx:37:1
 func Card(_gsxp CardProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		title := _gsxp.Title
@@ -94,6 +96,7 @@ type ButtonProps struct {
 	Attrs gsx.Attrs
 }
 
+//line components.gsx:50:1
 func Button(_gsxp ButtonProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		label := _gsxp.Label
@@ -120,6 +123,7 @@ type InputProps struct {
 	Attrs  gsx.Attrs
 }
 
+//line components.gsx:58:1
 func Input(_gsxp InputProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		name := _gsxp.Name
@@ -168,6 +172,7 @@ type TextareaProps struct {
 	Attrs  gsx.Attrs
 }
 
+//line components.gsx:74:1
 func Textarea(_gsxp TextareaProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		name := _gsxp.Name
@@ -212,6 +217,7 @@ func Textarea(_gsxp TextareaProps) gsx.Node {
 // Pagination is rendered as a standalone function component so HTMX requests
 // with HX-Target: #pagination resolve here regardless of which page hosts it.
 
+//line components.gsx:92:1
 func Pagination(p PageNav) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -275,6 +281,7 @@ type ErrorPageProps struct {
 	Msg    string
 }
 
+//line components.gsx:129:1
 func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		status := _gsxp.Status
@@ -311,6 +318,7 @@ type ErrorBlockProps struct {
 	Attrs  gsx.Attrs
 }
 
+//line components.gsx:145:1
 func ErrorBlock(_gsxp ErrorBlockProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		status := _gsxp.Status
diff --git a/examples/blog/ui/layout/layout.x.go b/examples/blog/ui/layout/layout.x.go
index fb0715b..12462e4 100644
--- a/examples/blog/ui/layout/layout.x.go
+++ b/examples/blog/ui/layout/layout.x.go
@@ -21,6 +21,7 @@ type PublicShellProps struct {
 	Children gsx.Node
 }
 
+//line layout.gsx:14:1
 func PublicShell(_gsxp PublicShellProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		title := _gsxp.Title
@@ -105,6 +106,7 @@ type AdminShellProps struct {
 	Children gsx.Node
 }
 
+//line layout.gsx:68:1
 func AdminShell(_gsxp AdminShellProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		title := _gsxp.Title
diff --git a/examples/htmx/pages.x.go b/examples/htmx/pages.x.go
index 1779d22..e16c952 100644
--- a/examples/htmx/pages.x.go
+++ b/examples/htmx/pages.x.go
@@ -22,6 +22,7 @@ type team struct{}
 type contact struct{}
 type throw struct{}
 
+//line pages.gsx:18:1
 func (p index) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -36,6 +37,7 @@ func (p index) Page() gsx.Node {
 	})
 }
 
+//line pages.gsx:24:1
 func (p index) Main() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -56,6 +58,7 @@ func (p index) Main() gsx.Node {
 	})
 }
 
+//line pages.gsx:32:1
 func (p product) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -70,6 +73,7 @@ func (p product) Page() gsx.Node {
 	})
 }
 
+//line pages.gsx:38:1
 func (p product) Main() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -81,6 +85,7 @@ func (p product) Main() gsx.Node {
 	})
 }
 
+//line pages.gsx:43:1
 func (p team) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -95,6 +100,7 @@ func (p team) Page() gsx.Node {
 	})
 }
 
+//line pages.gsx:49:1
 func (p team) Main() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -106,6 +112,7 @@ func (p team) Main() gsx.Node {
 	})
 }
 
+//line pages.gsx:54:1
 func (p contact) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -120,6 +127,7 @@ func (p contact) Page() gsx.Node {
 	})
 }
 
+//line pages.gsx:60:1
 func (p contact) Main() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -133,6 +141,7 @@ func (p contact) Main() gsx.Node {
 
 func errFunc() (string, error) { return "", fmt.Errorf("this is an error") }
 
+//line pages.gsx:66:1
 func (p throw) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -153,6 +162,7 @@ type LayoutProps struct {
 	Children gsx.Node
 }
 
+//line pages.gsx:70:1
 func Layout(_gsxp LayoutProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		children := _gsxp.Children
@@ -233,6 +243,7 @@ type ErrorPageProps struct {
 	Err error
 }
 
+//line pages.gsx:102:1
 func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
@@ -252,6 +263,7 @@ type ErrorCompProps struct {
 	Err error
 }
 
+//line pages.gsx:108:1
 func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
diff --git a/examples/lint-misuse/pages.x.go b/examples/lint-misuse/pages.x.go
index 9fb07de..6420e6c 100644
--- a/examples/lint-misuse/pages.x.go
+++ b/examples/lint-misuse/pages.x.go
@@ -29,6 +29,7 @@ type BadLinksProps struct {
 	Name string
 }
 
+//line pages.gsx:20:1
 func BadLinks(_gsxp BadLinksProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		id := _gsxp.Id
diff --git a/examples/simple/pages.x.go b/examples/simple/pages.x.go
index 4fce15f..7380abf 100644
--- a/examples/simple/pages.x.go
+++ b/examples/simple/pages.x.go
@@ -20,6 +20,7 @@ type product struct{}
 type team struct{}
 type contact struct{}
 
+//line pages.gsx:13:1
 func (p index) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -36,6 +37,7 @@ func (p index) Page() gsx.Node {
 	})
 }
 
+//line pages.gsx:22:1
 func (p product) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -52,6 +54,7 @@ func (p product) Page() gsx.Node {
 	})
 }
 
+//line pages.gsx:29:1
 func (p team) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -68,6 +71,7 @@ func (p team) Page() gsx.Node {
 	})
 }
 
+//line pages.gsx:36:1
 func (p contact) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -88,6 +92,7 @@ type LayoutProps struct {
 	Children gsx.Node
 }
 
+//line pages.gsx:43:1
 func Layout(_gsxp LayoutProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		children := _gsxp.Children
diff --git a/examples/todo/pages.x.go b/examples/todo/pages.x.go
index 923f08e..8a3cdb1 100644
--- a/examples/todo/pages.x.go
+++ b/examples/todo/pages.x.go
@@ -19,6 +19,7 @@ type index struct {
 	deleteTodo `route:"DELETE /delete/{id} DeleteTodo"`
 }
 
+//line pages.gsx:16:1
 func (p index) Page() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -71,6 +72,7 @@ func (p index) Page() gsx.Node {
 	})
 }
 
+//line pages.gsx:43:1
 func (p index) TodoList() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -118,6 +120,7 @@ func (d deleteTodo) ServeHTTP(w http.ResponseWriter, r *http.Request) error {
 	return structpages.RenderComponent(index.TodoList)
 }
 
+//line pages.gsx:85:1
 func TodoList() gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		_gsxgw := gsx.W(_gsxw)
@@ -184,6 +187,7 @@ type LayoutProps struct {
 	Children gsx.Node
 }
 
+//line pages.gsx:116:1
 func Layout(_gsxp LayoutProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		children := _gsxp.Children
@@ -216,6 +220,7 @@ type ErrorPageProps struct {
 	Err error
 }
 
+//line pages.gsx:223:1
 func ErrorPage(_gsxp ErrorPageProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err
@@ -235,6 +240,7 @@ type ErrorCompProps struct {
 	Err error
 }
 
+//line pages.gsx:229:1
 func ErrorComp(_gsxp ErrorCompProps) gsx.Node {
 	return gsx.Func(func(ctx context.Context, _gsxw io.Writer) error {
 		err := _gsxp.Err