From de3a6e4dde524c5b307d695ddbba5b6014daa2d0 Mon Sep 17 00:00:00 2001
From: giles <giles.bradshaw@rose-ash.com>
Date: Sat, 28 Feb 2026 13:24:16 +0000
Subject: [PATCH] Convert all f-string HTML to sexp() in
 blog/sexp/sexp_components.py

~39 functions converted from f-string HTML to sexp() calls.
Only remaining HTML is the intentional <script> block in
render_editor_panel (complex JS init for WYSIWYG editor).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 blog/sexp/sexp_components.py | 1784 ++++++++++++++++++----------------
 1 file changed, 940 insertions(+), 844 deletions(-)

diff --git a/blog/sexp/sexp_components.py b/blog/sexp/sexp_components.py
index 8bbaa58..de0ce56 100644
--- a/blog/sexp/sexp_components.py
+++ b/blog/sexp/sexp_components.py
@@ -25,10 +25,11 @@ from shared.sexp.helpers import (
 
 def _oob_header_html(parent_id: str, child_id: str, row_html: str) -> str:
     """Wrap a header row in OOB div with child placeholder."""
-    return (
-        f'<div id="{parent_id}" hx-swap-oob="outerHTML" class="w-full">'
-        f'<div class="w-full">{row_html}'
-        f'<div id="{child_id}"></div></div></div>'
+    return sexp(
+        '(div :id pid :hx-swap-oob "outerHTML" :class "w-full"'
+        '  (div :class "w-full" (raw! rh)'
+        '    (div :id cid)))',
+        pid=parent_id, rh=row_html, cid=child_id,
     )
 
 
@@ -42,7 +43,7 @@ def _blog_header_html(ctx: dict, *, oob: bool = False) -> str:
         '(~menu-row :id "blog-row" :level 1'
         ' :link-label-html llh'
         ' :child-id "blog-header-child" :oob oob)',
-        llh="<div></div>",
+        llh=sexp('(div)'),
         oob=oob,
     )
 
@@ -58,32 +59,32 @@ def _post_header_html(ctx: dict, *, oob: bool = False) -> str:
     title = (post.get("title") or "")[:160]
     feature_image = post.get("feature_image")
 
-    label_parts = []
-    if feature_image:
-        label_parts.append(
-            f'<img src="{feature_image}" class="h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0">'
-        )
-    label_parts.append(f"<span>{escape(title)}</span>")
-    label_html = "".join(label_parts)
+    label_html = sexp(
+        '(<> (when fi (img :src fi :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0"))'
+        '  (span t))',
+        fi=feature_image, t=title,
+    )
 
     nav_parts = []
     page_cart_count = ctx.get("page_cart_count", 0)
     if page_cart_count and page_cart_count > 0:
         cart_href = call_url(ctx, "cart_url", f"/{slug}/")
-        nav_parts.append(
-            f'<a href="{cart_href}" class="relative inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full'
-            f' border border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 transition">'
-            f'<i class="fa fa-shopping-cart" aria-hidden="true"></i>'
-            f'<span>{page_cart_count}</span></a>'
-        )
+        nav_parts.append(sexp(
+            '(a :href h :class "relative inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full'
+            ' border border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 transition"'
+            '  (i :class "fa fa-shopping-cart" :aria-hidden "true")'
+            '  (span c))',
+            h=cart_href, c=str(page_cart_count),
+        ))
 
     # Container nav fragments (calendars, markets)
     container_nav = ctx.get("container_nav_html", "")
     if container_nav:
-        nav_parts.append(
-            f'<div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"'
-            f' id="entries-calendars-nav-wrapper">{container_nav}</div>'
-        )
+        nav_parts.append(sexp(
+            '(div :class "flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"'
+            '  :id "entries-calendars-nav-wrapper" (raw! cn))',
+            cn=container_nav,
+        ))
 
     # Admin link
     from quart import url_for as qurl, g, request
@@ -95,15 +96,14 @@ def _post_header_html(ctx: dict, *, oob: bool = False) -> str:
         nav_btn = styles.get("nav_button", "") if isinstance(styles, dict) else getattr(styles, "nav_button", "")
         admin_href = qurl("blog.post.admin.admin", slug=slug)
         is_admin_page = "/admin" in request.path
-        sel_attr = ' aria-selected="true"' if is_admin_page else ''
-        nav_parts.append(
-            f'<div class="relative nav-group"><a href="{admin_href}"'
-            f' hx-get="{admin_href}" hx-target="#main-panel" hx-select="#main-panel"'
-            f' hx-swap="outerHTML" hx-push-url="true"'
-            f'{sel_attr}'
-            f' class="{nav_btn} {select_colours}">'
-            f'<i class="fa fa-cog" aria-hidden="true"></i></a></div>'
-        )
+        nav_parts.append(sexp(
+            '(~nav-link :href h :hx-select "#main-panel" :icon "fa fa-cog"'
+            '  :aclass ac :select-colours sc :is-selected sel)',
+            h=admin_href,
+            ac=f"{nav_btn} {select_colours}",
+            sc=select_colours,
+            sel=is_admin_page,
+        ))
 
     nav_html = "".join(nav_parts)
     link_href = call_url(ctx, "blog_url", f"/{slug}/")
@@ -135,7 +135,9 @@ def _post_admin_header_html(ctx: dict, *, oob: bool = False) -> str:
     nav_btn = styles.get("nav_button", "") if isinstance(styles, dict) else getattr(styles, "nav_button", "")
 
     admin_href = qurl("blog.post.admin.admin", slug=slug)
-    label_html = '<i class="fa fa-shield-halved" aria-hidden="true"></i> admin'
+    label_html = sexp(
+        '(<> (i :class "fa fa-shield-halved" :aria-hidden "true") " admin")',
+    )
 
     nav_html = _post_admin_nav_html(ctx)
 
@@ -172,10 +174,10 @@ def _post_admin_nav_html(ctx: dict) -> str:
             (f"/{slug}/payments/", "payments"),
         ]:
             href = events_url_fn(path)
-            parts.append(
-                f'<div class="relative nav-group">'
-                f'<a href="{href}" class="{nav_btn}">{label}</a></div>'
-            )
+            parts.append(sexp(
+                '(div :class "relative nav-group" (a :href h :class c l))',
+                h=href, c=nav_btn, l=label,
+            ))
 
     # HTMX links
     for endpoint, label in [
@@ -203,7 +205,9 @@ def _settings_header_html(ctx: dict, *, oob: bool = False) -> str:
 
     hx_select = ctx.get("hx_select_search", "#main-panel")
     settings_href = qurl("settings.home")
-    label_html = '<i class="fa fa-shield-halved" aria-hidden="true"></i> admin'
+    label_html = sexp(
+        '(<> (i :class "fa fa-shield-halved" :aria-hidden "true") " admin")',
+    )
 
     nav_html = _settings_nav_html(ctx)
 
@@ -249,7 +253,10 @@ def _sub_settings_header_html(row_id: str, child_id: str, href: str,
                                *, oob: bool = False, nav_html: str = "") -> str:
     """Generic sub-settings header row (menu_items, snippets, tag_groups, cache)."""
     select_colours = ctx.get("select_colours", "")
-    label_html = f'<i class="fa fa-{icon}" aria-hidden="true"></i> {escape(label)}'
+    label_html = sexp(
+        '(<> (i :class ic :aria-hidden "true") " " l)',
+        ic=f"fa fa-{icon}", l=label,
+    )
 
     return sexp(
         '(~menu-row :id rid :level 2'
@@ -268,7 +275,10 @@ def _post_sub_admin_header_html(row_id: str, child_id: str, href: str,
                                  icon: str, label: str, ctx: dict,
                                  *, oob: bool = False, nav_html: str = "") -> str:
     """Generic post sub-admin header row (data, edit, entries, settings)."""
-    label_html = f'<i class="fa fa-{icon}" aria-hidden="true"></i><div>{escape(label)}</div>'
+    label_html = sexp(
+        '(<> (i :class ic :aria-hidden "true") (div l))',
+        ic=f"fa fa-{icon}", l=label,
+    )
 
     return sexp(
         '(~menu-row :id rid :level 3'
@@ -310,70 +320,66 @@ def _blog_card_html(post: dict, ctx: dict) -> str:
     hx_select = ctx.get("hx_select_search", "#main-panel")
     user = getattr(g, "user", None)
 
-    parts = ['<article class="border-b pb-6 last:border-b-0 relative">']
-
-    # Like button
+    like_html = ""
     if user:
         liked = post.get("is_liked", False)
         like_url = call_url(ctx, "blog_url", f"/{slug}/like/toggle/")
-        parts.append(
-            f'<div class="absolute top-20 right-2 z-10 text-6xl md:text-4xl">'
-            f'<button hx-post="{like_url}" hx-swap="outerHTML"'
-            f' hx-headers=\'{{\"X-CSRFToken\": \"{ctx.get("csrf_token", "")}\"}}\''
-            f' class="cursor-pointer">'
-            f'{"❤️" if liked else "🤍"}</button></div>'
+        like_html = sexp(
+            '(div :class "absolute top-20 right-2 z-10 text-6xl md:text-4xl"'
+            '  (button :hx-post lu :hx-swap "outerHTML"'
+            '    :hx-headers hh :class "cursor-pointer" heart))',
+            lu=like_url,
+            hh=f'{{"X-CSRFToken": "{ctx.get("csrf_token", "")}"}}',
+            heart="\u2764\ufe0f" if liked else "\U0001f90d",
         )
 
-    parts.append(
-        f'<a href="{href}" hx-get="{href}" hx-target="#main-panel"'
-        f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-        f' class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden">'
-    )
-
-    # Header
-    parts.append(f'<header class="mb-2 text-center"><h2 class="text-4xl font-bold text-stone-900">{escape(post.get("title", ""))}</h2>')
-
     status = post.get("status", "published")
+    status_html = ""
     if status == "draft":
-        parts.append('<div class="flex justify-center gap-2 mt-1">')
-        parts.append('<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-800">Draft</span>')
-        if post.get("publish_requested"):
-            parts.append('<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">Publish requested</span>')
-        parts.append('</div>')
+        pub_req = post.get("publish_requested")
         updated = post.get("updated_at")
+        ts = ""
         if updated:
             ts = updated.strftime("%-d %b %Y at %H:%M") if hasattr(updated, "strftime") else str(updated)
-            parts.append(f'<p class="text-sm text-stone-500">Updated: {ts}</p>')
+        status_html = sexp(
+            '(<> (div :class "flex justify-center gap-2 mt-1"'
+            '  (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-800" "Draft")'
+            '  (when pr (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800" "Publish requested")))'
+            '  (when ts (p :class "text-sm text-stone-500" (str "Updated: " ts))))',
+            pr=pub_req, ts=ts,
+        )
     else:
         pub = post.get("published_at")
         if pub:
             ts = pub.strftime("%-d %b %Y at %H:%M") if hasattr(pub, "strftime") else str(pub)
-            parts.append(f'<p class="text-sm text-stone-500">Published: {ts}</p>')
+            status_html = sexp(
+                '(p :class "text-sm text-stone-500" (str "Published: " ts))',
+                ts=ts,
+            )
 
-    parts.append('</header>')
-
-    # Feature image
     fi = post.get("feature_image")
-    if fi:
-        parts.append(f'<div class="mb-4"><img src="{fi}" alt="" class="rounded-lg w-full object-cover"></div>')
-
-    # Excerpt
     excerpt = post.get("custom_excerpt") or post.get("excerpt", "")
-    if excerpt:
-        parts.append(f'<p class="text-stone-700 text-lg leading-relaxed text-center">{escape(excerpt)}</p>')
-
-    parts.append('</a>')
-
-    # Card widgets (fragments)
     card_widgets = ctx.get("card_widgets_html") or {}
     widget = card_widgets.get(str(post.get("id", "")), "")
-    if widget:
-        parts.append(widget)
+    at_bar = _at_bar_html(post, ctx)
 
-    # Tags + authors bar
-    parts.append(_at_bar_html(post, ctx))
-    parts.append('</article>')
-    return "".join(parts)
+    return sexp(
+        '(article :class "border-b pb-6 last:border-b-0 relative"'
+        '  (raw! like_html)'
+        '  (a :href h :hx-get h :hx-target "#main-panel"'
+        '    :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+        '    :class "block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"'
+        '    (header :class "mb-2 text-center"'
+        '      (h2 :class "text-4xl font-bold text-stone-900" t)'
+        '      (raw! sh))'
+        '    (when fi (div :class "mb-4" (img :src fi :alt "" :class "rounded-lg w-full object-cover")))'
+        '    (when ex (p :class "text-stone-700 text-lg leading-relaxed text-center" ex)))'
+        '  (when wid (raw! wid))'
+        '  (raw! ab))',
+        like_html=like_html, h=href, hs=hx_select,
+        t=post.get("title", ""), sh=status_html,
+        fi=fi, ex=excerpt, wid=widget, ab=at_bar,
+    )
 
 
 def _blog_card_tile_html(post: dict, ctx: dict) -> str:
@@ -382,45 +388,46 @@ def _blog_card_tile_html(post: dict, ctx: dict) -> str:
     href = call_url(ctx, "blog_url", f"/{slug}/")
     hx_select = ctx.get("hx_select_search", "#main-panel")
 
-    parts = ['<article class="relative">']
-    parts.append(
-        f'<a href="{href}" hx-get="{href}" hx-target="#main-panel"'
-        f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-        f' class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden">'
-    )
-
     fi = post.get("feature_image")
-    if fi:
-        parts.append(f'<div><img src="{fi}" alt="" class="w-full aspect-video object-cover"></div>')
-
-    parts.append('<div class="p-3 text-center">')
-    parts.append(f'<h2 class="text-lg font-bold text-stone-900">{escape(post.get("title", ""))}</h2>')
-
     status = post.get("status", "published")
+
+    status_html = ""
     if status == "draft":
-        parts.append('<div class="flex justify-center gap-1 mt-1">')
-        parts.append('<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-800">Draft</span>')
-        if post.get("publish_requested"):
-            parts.append('<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">Publish requested</span>')
-        parts.append('</div>')
         updated = post.get("updated_at")
+        ts = ""
         if updated:
             ts = updated.strftime("%-d %b %Y at %H:%M") if hasattr(updated, "strftime") else str(updated)
-            parts.append(f'<p class="text-sm text-stone-500">Updated: {ts}</p>')
+        status_html = sexp(
+            '(<> (div :class "flex justify-center gap-1 mt-1"'
+            '  (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-800" "Draft")'
+            '  (when pr (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800" "Publish requested")))'
+            '  (when ts (p :class "text-sm text-stone-500" (str "Updated: " ts))))',
+            pr=post.get("publish_requested"), ts=ts,
+        )
     else:
         pub = post.get("published_at")
         if pub:
             ts = pub.strftime("%-d %b %Y at %H:%M") if hasattr(pub, "strftime") else str(pub)
-            parts.append(f'<p class="text-sm text-stone-500">Published: {ts}</p>')
+            status_html = sexp('(p :class "text-sm text-stone-500" (str "Published: " ts))', ts=ts)
 
     excerpt = post.get("custom_excerpt") or post.get("excerpt", "")
-    if excerpt:
-        parts.append(f'<p class="text-stone-700 text-sm leading-relaxed line-clamp-3 mt-1">{escape(excerpt)}</p>')
+    at_bar = _at_bar_html(post, ctx)
 
-    parts.append('</div></a>')
-    parts.append(_at_bar_html(post, ctx))
-    parts.append('</article>')
-    return "".join(parts)
+    return sexp(
+        '(article :class "relative"'
+        '  (a :href h :hx-get h :hx-target "#main-panel"'
+        '    :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+        '    :class "block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"'
+        '    (when fi (div (img :src fi :alt "" :class "w-full aspect-video object-cover")))'
+        '    (div :class "p-3 text-center"'
+        '      (h2 :class "text-lg font-bold text-stone-900" t)'
+        '      (raw! sh)'
+        '      (when ex (p :class "text-stone-700 text-sm leading-relaxed line-clamp-3 mt-1" ex))))'
+        '  (raw! ab))',
+        h=href, hs=hx_select, fi=fi,
+        t=post.get("title", ""), sh=status_html,
+        ex=excerpt, ab=at_bar,
+    )
 
 
 def _at_bar_html(post: dict, ctx: dict) -> str:
@@ -430,51 +437,64 @@ def _at_bar_html(post: dict, ctx: dict) -> str:
     if not tags and not authors:
         return ""
 
-    all_tags = ctx.get("tags") or []
-    tag_slugs = {t.get("slug") or getattr(t, "slug", "") for t in all_tags} if all_tags else set()
-
-    parts = ['<div class="flex flex-row justify-center gap-3">']
-
+    tag_items = ""
     if tags:
-        parts.append('<div class="mt-4 flex items-center gap-2"><div>in</div><ul class="flex flex-wrap gap-2 text-sm">')
+        tag_li = []
         for t in tags:
-            t_slug = t.get("slug") or getattr(t, "slug", "")
             t_name = t.get("name") or getattr(t, "name", "")
             t_fi = t.get("feature_image") or getattr(t, "feature_image", None)
             if t_fi:
-                icon = f'<img src="{t_fi}" alt="{escape(t_name)}" class="h-4 w-4 rounded-full object-cover border border-stone-300 flex-shrink-0">'
-            else:
-                init = escape(t_name[:1]) if t_name else ""
-                icon = (
-                    f'<div class="h-4 w-4 rounded-full text-[8px] font-semibold flex items-center justify-center'
-                    f' border border-stone-300 flex-shrink-0 bg-stone-200 text-stone-600">{init}</div>'
+                icon = sexp(
+                    '(img :src fi :alt n :class "h-4 w-4 rounded-full object-cover border border-stone-300 flex-shrink-0")',
+                    fi=t_fi, n=t_name,
                 )
-            parts.append(
-                f'<li><a class="flex items-center gap-1">{icon}'
-                f'<span class="inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium'
-                f' border border-stone-200">{escape(t_name)}</span></a></li>'
-            )
-        parts.append('</ul></div>')
-
-    parts.append('<div></div>')
+            else:
+                init = (t_name[:1]) if t_name else ""
+                icon = sexp(
+                    '(div :class "h-4 w-4 rounded-full text-[8px] font-semibold flex items-center justify-center'
+                    ' border border-stone-300 flex-shrink-0 bg-stone-200 text-stone-600" i)',
+                    i=init,
+                )
+            tag_li.append(sexp(
+                '(li (a :class "flex items-center gap-1" (raw! ic)'
+                '  (span :class "inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium'
+                ' border border-stone-200" n)))',
+                ic=icon, n=t_name,
+            ))
+        tag_items = sexp(
+            '(div :class "mt-4 flex items-center gap-2" (div "in")'
+            '  (ul :class "flex flex-wrap gap-2 text-sm" (raw! items)))',
+            items="".join(tag_li),
+        )
 
+    author_items = ""
     if authors:
-        parts.append('<div class="mt-4 flex items-center gap-2"><div>by</div><ul class="flex flex-wrap gap-2 text-sm">')
+        author_li = []
         for a in authors:
             a_name = a.get("name") or getattr(a, "name", "")
             a_img = a.get("profile_image") or getattr(a, "profile_image", None)
             if a_img:
-                parts.append(
-                    f'<li class="flex items-center gap-1">'
-                    f'<img src="{a_img}" alt="{escape(a_name)}" class="h-5 w-5 rounded-full object-cover">'
-                    f'<span class="text-stone-700">{escape(a_name)}</span></li>'
-                )
+                author_li.append(sexp(
+                    '(li :class "flex items-center gap-1"'
+                    '  (img :src ai :alt n :class "h-5 w-5 rounded-full object-cover")'
+                    '  (span :class "text-stone-700" n))',
+                    ai=a_img, n=a_name,
+                ))
             else:
-                parts.append(f'<li class="text-stone-700">{escape(a_name)}</li>')
-        parts.append('</ul></div>')
+                author_li.append(sexp(
+                    '(li :class "text-stone-700" n)', n=a_name,
+                ))
+        author_items = sexp(
+            '(div :class "mt-4 flex items-center gap-2" (div "by")'
+            '  (ul :class "flex flex-wrap gap-2 text-sm" (raw! items)))',
+            items="".join(author_li),
+        )
 
-    parts.append('</div>')
-    return "".join(parts)
+    return sexp(
+        '(div :class "flex flex-row justify-center gap-3"'
+        '  (raw! ti) (div) (raw! ai))',
+        ti=tag_items, ai=author_items,
+    )
 
 
 def _blog_sentinel_html(ctx: dict) -> str:
@@ -485,54 +505,61 @@ def _blog_sentinel_html(ctx: dict) -> str:
         total_pages = int(total_pages)
 
     if page >= total_pages:
-        return '<div class="col-span-full mt-4 text-center text-xs text-stone-400">End of results</div>'
+        return sexp('(div :class "col-span-full mt-4 text-center text-xs text-stone-400" "End of results")')
 
     current_local_href = ctx.get("current_local_href", "/index")
-    qs_fn = ctx.get("qs")
-    # Build next page URL
     next_url = f"{current_local_href}?page={page + 1}"
 
-    parts = []
-    # Mobile sentinel
-    parts.append(
-        f'<div id="sentinel-{page}-m" class="block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"'
-        f' hx-get="{next_url}" hx-trigger="intersect once delay:250ms, sentinelmobile:retry"'
-        f' hx-swap="outerHTML"'
-        f' _="init if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end'
-        f'  if window.matchMedia(\'(min-width: 768px)\').matches then set @hx-disabled to \'\' end'
-        f'  on resize from window if window.matchMedia(\'(min-width: 768px)\').matches then set @hx-disabled to \'\' else remove @hx-disabled end'
-        f'  on htmx:beforeRequest if window.matchMedia(\'(min-width: 768px)\').matches then halt end'
-        f'  add .hidden to .js-neterr in me remove .hidden from .js-loading in me remove .opacity-100 from me add .opacity-0 to me'
-        f'  def backoff() set ms to me.dataset.retryMs if ms > 30000 then set ms to 30000 end'
-        f'  add .hidden to .js-loading in me remove .hidden from .js-neterr in me remove .opacity-0 from me add .opacity-100 to me'
-        f'  wait ms ms trigger sentinelmobile:retry set ms to ms * 2 if ms > 30000 then set ms to 30000 end set me.dataset.retryMs to ms end'
-        f'  on htmx:sendError call backoff() on htmx:responseError call backoff() on htmx:timeout call backoff()"'
-        f' role="status" aria-live="polite" aria-hidden="true">'
-        f'<div class="js-loading hidden flex justify-center py-8"><div class="animate-spin h-8 w-8 border-4 border-stone-300 border-t-stone-600 rounded-full"></div></div>'
-        f'<div class="js-neterr hidden text-center py-8 text-stone-400"><i class="fa fa-exclamation-triangle text-2xl"></i><p class="mt-2">Loading failed — retrying…</p></div>'
-        f'</div>'
+    mobile_hs = (
+        "init if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end"
+        " if window.matchMedia('(min-width: 768px)').matches then set @hx-disabled to '' end"
+        " on resize from window if window.matchMedia('(min-width: 768px)').matches then set @hx-disabled to '' else remove @hx-disabled end"
+        " on htmx:beforeRequest if window.matchMedia('(min-width: 768px)').matches then halt end"
+        " add .hidden to .js-neterr in me remove .hidden from .js-loading in me remove .opacity-100 from me add .opacity-0 to me"
+        " def backoff() set ms to me.dataset.retryMs if ms > 30000 then set ms to 30000 end"
+        " add .hidden to .js-loading in me remove .hidden from .js-neterr in me remove .opacity-0 from me add .opacity-100 to me"
+        " wait ms ms trigger sentinelmobile:retry set ms to ms * 2 if ms > 30000 then set ms to 30000 end set me.dataset.retryMs to ms end"
+        " on htmx:sendError call backoff() on htmx:responseError call backoff() on htmx:timeout call backoff()"
     )
-    # Desktop sentinel
-    parts.append(
-        f'<div id="sentinel-{page}-d" class="hidden md:block h-4 opacity-0 pointer-events-none"'
-        f' hx-get="{next_url}" hx-trigger="intersect once delay:250ms, sentinel:retry"'
-        f' hx-swap="outerHTML"'
-        f' _="init if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end'
-        f'  on htmx:beforeRequest(event) add .hidden to .js-neterr in me remove .hidden from .js-loading in me'
-        f'  remove .opacity-100 from me add .opacity-0 to me'
-        f'  set trig to null if event.detail and event.detail.triggeringEvent then set trig to event.detail.triggeringEvent end'
-        f'  if trig and trig.type is \'intersect\' set scroller to the closest .js-grid-viewport'
-        f'  if scroller is null then halt end if scroller.scrollTop < 20 then halt end end'
-        f'  def backoff() set ms to me.dataset.retryMs if ms > 30000 then set ms to 30000 end'
-        f'  add .hidden to .js-loading in me remove .hidden from .js-neterr in me remove .opacity-0 from me add .opacity-100 to me'
-        f'  wait ms ms trigger sentinel:retry set ms to ms * 2 if ms > 30000 then set ms to 30000 end set me.dataset.retryMs to ms end'
-        f'  on htmx:sendError call backoff() on htmx:responseError call backoff() on htmx:timeout call backoff()"'
-        f' role="status" aria-live="polite" aria-hidden="true">'
-        f'<div class="js-loading hidden flex justify-center py-2"><div class="animate-spin h-6 w-6 border-2 border-stone-300 border-t-stone-600 rounded-full"></div></div>'
-        f'<div class="js-neterr hidden text-center py-2 text-stone-400 text-sm">Retry…</div>'
-        f'</div>'
+
+    desktop_hs = (
+        "init if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end"
+        " on htmx:beforeRequest(event) add .hidden to .js-neterr in me remove .hidden from .js-loading in me"
+        " remove .opacity-100 from me add .opacity-0 to me"
+        " set trig to null if event.detail and event.detail.triggeringEvent then set trig to event.detail.triggeringEvent end"
+        " if trig and trig.type is 'intersect' set scroller to the closest .js-grid-viewport"
+        " if scroller is null then halt end if scroller.scrollTop < 20 then halt end end"
+        " def backoff() set ms to me.dataset.retryMs if ms > 30000 then set ms to 30000 end"
+        " add .hidden to .js-loading in me remove .hidden from .js-neterr in me remove .opacity-0 from me add .opacity-100 to me"
+        " wait ms ms trigger sentinel:retry set ms to ms * 2 if ms > 30000 then set ms to 30000 end set me.dataset.retryMs to ms end"
+        " on htmx:sendError call backoff() on htmx:responseError call backoff() on htmx:timeout call backoff()"
     )
-    return "".join(parts)
+
+    mobile = sexp(
+        '(div :id mid :class "block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"'
+        '  :hx-get nu :hx-trigger "intersect once delay:250ms, sentinelmobile:retry"'
+        '  :hx-swap "outerHTML" :_ mhs'
+        '  :role "status" :aria-live "polite" :aria-hidden "true"'
+        '  (div :class "js-loading hidden flex justify-center py-8"'
+        '    (div :class "animate-spin h-8 w-8 border-4 border-stone-300 border-t-stone-600 rounded-full"))'
+        '  (div :class "js-neterr hidden text-center py-8 text-stone-400"'
+        '    (i :class "fa fa-exclamation-triangle text-2xl")'
+        '    (p :class "mt-2" "Loading failed \u2014 retrying\u2026")))',
+        mid=f"sentinel-{page}-m", nu=next_url, mhs=mobile_hs,
+    )
+
+    desktop = sexp(
+        '(div :id did :class "hidden md:block h-4 opacity-0 pointer-events-none"'
+        '  :hx-get nu :hx-trigger "intersect once delay:250ms, sentinel:retry"'
+        '  :hx-swap "outerHTML" :_ dhs'
+        '  :role "status" :aria-live "polite" :aria-hidden "true"'
+        '  (div :class "js-loading hidden flex justify-center py-2"'
+        '    (div :class "animate-spin h-6 w-6 border-2 border-stone-300 border-t-stone-600 rounded-full"))'
+        '  (div :class "js-neterr hidden text-center py-2 text-stone-400 text-sm" "Retry\u2026"))',
+        did=f"sentinel-{page}-d", nu=next_url, dhs=desktop_hs,
+    )
+
+    return mobile + desktop
 
 
 def _page_cards_html(ctx: dict) -> str:
@@ -551,14 +578,15 @@ def _page_cards_html(ctx: dict) -> str:
     if page_num < total_pages:
         current_local_href = ctx.get("current_local_href", "/index?type=pages")
         next_url = f"{current_local_href}&page={page_num + 1}" if "?" in current_local_href else f"{current_local_href}?page={page_num + 1}"
-        parts.append(
-            f'<div id="sentinel-{page_num}-d" class="h-4 opacity-0 pointer-events-none"'
-            f' hx-get="{next_url}" hx-trigger="intersect once delay:250ms" hx-swap="outerHTML"></div>'
-        )
+        parts.append(sexp(
+            '(div :id sid :class "h-4 opacity-0 pointer-events-none"'
+            '  :hx-get nu :hx-trigger "intersect once delay:250ms" :hx-swap "outerHTML")',
+            sid=f"sentinel-{page_num}-d", nu=next_url,
+        ))
     elif pages:
-        parts.append('<div class="col-span-full mt-4 text-center text-xs text-stone-400">End of results</div>')
+        parts.append(sexp('(div :class "col-span-full mt-4 text-center text-xs text-stone-400" "End of results")'))
     else:
-        parts.append('<div class="col-span-full mt-8 text-center text-stone-500">No pages found.</div>')
+        parts.append(sexp('(div :class "col-span-full mt-8 text-center text-stone-500" "No pages found.")'))
 
     return "".join(parts)
 
@@ -569,41 +597,40 @@ def _page_card_html(page: dict, ctx: dict) -> str:
     href = call_url(ctx, "blog_url", f"/{slug}/")
     hx_select = ctx.get("hx_select_search", "#main-panel")
 
-    parts = ['<article class="border-b pb-6 last:border-b-0 relative">']
-    parts.append(
-        f'<a href="{href}" hx-get="{href}" hx-target="#main-panel"'
-        f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-        f' class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden">'
-    )
-    parts.append(f'<header class="mb-2 text-center"><h2 class="text-4xl font-bold text-stone-900">{escape(page.get("title", ""))}</h2>')
-
-    # Feature badges
     features = page.get("features") or {}
+    badges_html = ""
     if features:
-        parts.append('<div class="flex justify-center gap-2 mt-2">')
-        if features.get("calendar"):
-            parts.append('<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800"><i class="fa fa-calendar mr-1"></i>Calendar</span>')
-        if features.get("market"):
-            parts.append('<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800"><i class="fa fa-shopping-bag mr-1"></i>Market</span>')
-        parts.append('</div>')
+        badges_html = sexp(
+            '(div :class "flex justify-center gap-2 mt-2"'
+            '  (when cal (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800"'
+            '    (i :class "fa fa-calendar mr-1") "Calendar"))'
+            '  (when mkt (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800"'
+            '    (i :class "fa fa-shopping-bag mr-1") "Market")))',
+            cal=features.get("calendar"), mkt=features.get("market"),
+        )
 
     pub = page.get("published_at")
+    pub_html = ""
     if pub:
         ts = pub.strftime("%-d %b %Y at %H:%M") if hasattr(pub, "strftime") else str(pub)
-        parts.append(f'<p class="text-sm text-stone-500">Published: {ts}</p>')
-
-    parts.append('</header>')
+        pub_html = sexp('(p :class "text-sm text-stone-500" (str "Published: " ts))', ts=ts)
 
     fi = page.get("feature_image")
-    if fi:
-        parts.append(f'<div class="mb-4"><img src="{fi}" alt="" class="rounded-lg w-full object-cover"></div>')
-
     excerpt = page.get("custom_excerpt") or page.get("excerpt", "")
-    if excerpt:
-        parts.append(f'<p class="text-stone-700 text-lg leading-relaxed text-center">{escape(excerpt)}</p>')
 
-    parts.append('</a></article>')
-    return "".join(parts)
+    return sexp(
+        '(article :class "border-b pb-6 last:border-b-0 relative"'
+        '  (a :href h :hx-get h :hx-target "#main-panel"'
+        '    :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+        '    :class "block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"'
+        '    (header :class "mb-2 text-center"'
+        '      (h2 :class "text-4xl font-bold text-stone-900" t)'
+        '      (raw! bh) (raw! ph))'
+        '    (when fi (div :class "mb-4" (img :src fi :alt "" :class "rounded-lg w-full object-cover")))'
+        '    (when ex (p :class "text-stone-700 text-lg leading-relaxed text-center" ex))))',
+        h=href, hs=hx_select, t=page.get("title", ""),
+        bh=badges_html, ph=pub_html, fi=fi, ex=excerpt,
+    )
 
 
 def _view_toggle_html(ctx: dict) -> str:
@@ -618,18 +645,28 @@ def _view_toggle_html(ctx: dict) -> str:
     list_href = f"{current_local_href}"
     tile_href = f"{current_local_href}{'&' if '?' in current_local_href else '?'}view=tile"
 
-    list_svg = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /></svg>'
-    tile_svg = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg>'
+    list_svg = sexp(
+        '(svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none" :viewBox "0 0 24 24"'
+        '  :stroke "currentColor" :stroke-width "2"'
+        '  (path :stroke-linecap "round" :stroke-linejoin "round" :d "M4 6h16M4 12h16M4 18h16"))',
+    )
+    tile_svg = sexp(
+        '(svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none" :viewBox "0 0 24 24"'
+        '  :stroke "currentColor" :stroke-width "2"'
+        '  (path :stroke-linecap "round" :stroke-linejoin "round"'
+        '    :d "M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"))',
+    )
 
-    return (
-        f'<div class="hidden md:flex justify-end px-3 pt-3 gap-1">'
-        f'<a href="{list_href}" hx-get="{list_href}" hx-target="#main-panel" hx-select="{hx_select}"'
-        f' hx-swap="outerHTML" hx-push-url="true" class="p-1.5 rounded {list_cls}" title="List view"'
-        f' _="on click js localStorage.removeItem(\'blog_view\') end">{list_svg}</a>'
-        f'<a href="{tile_href}" hx-get="{tile_href}" hx-target="#main-panel" hx-select="{hx_select}"'
-        f' hx-swap="outerHTML" hx-push-url="true" class="p-1.5 rounded {tile_cls}" title="Tile view"'
-        f' _="on click js localStorage.setItem(\'blog_view\',\'tile\') end">{tile_svg}</a>'
-        f'</div>'
+    return sexp(
+        '(div :class "hidden md:flex justify-end px-3 pt-3 gap-1"'
+        '  (a :href lh :hx-get lh :hx-target "#main-panel" :hx-select hs'
+        '    :hx-swap "outerHTML" :hx-push-url "true" :class (str "p-1.5 rounded " lc) :title "List view"'
+        '    :_ "on click js localStorage.removeItem(\'blog_view\') end" (raw! ls))'
+        '  (a :href th :hx-get th :hx-target "#main-panel" :hx-select hs'
+        '    :hx-swap "outerHTML" :hx-push-url "true" :class (str "p-1.5 rounded " tc) :title "Tile view"'
+        '    :_ "on click js localStorage.setItem(\'blog_view\',\'tile\') end" (raw! ts)))',
+        lh=list_href, th=tile_href, hs=hx_select,
+        lc=list_cls, tc=tile_cls, ls=list_svg, ts=tile_svg,
     )
 
 
@@ -646,15 +683,16 @@ def _content_type_tabs_html(ctx: dict) -> str:
     posts_cls = "bg-stone-700 text-white" if content_type != "pages" else "bg-stone-100 text-stone-600 hover:bg-stone-200"
     pages_cls = "bg-stone-700 text-white" if content_type == "pages" else "bg-stone-100 text-stone-600 hover:bg-stone-200"
 
-    return (
-        f'<div class="flex justify-center gap-1 px-3 pt-3">'
-        f'<a href="{posts_href}" hx-get="{posts_href}" hx-target="#main-panel"'
-        f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-        f' class="px-4 py-1.5 rounded-t text-sm font-medium transition-colors {posts_cls}">Posts</a>'
-        f'<a href="{pages_href}" hx-get="{pages_href}" hx-target="#main-panel"'
-        f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-        f' class="px-4 py-1.5 rounded-t text-sm font-medium transition-colors {pages_cls}">Pages</a>'
-        f'</div>'
+    return sexp(
+        '(div :class "flex justify-center gap-1 px-3 pt-3"'
+        '  (a :href ph :hx-get ph :hx-target "#main-panel"'
+        '    :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+        '    :class (str "px-4 py-1.5 rounded-t text-sm font-medium transition-colors " pc) "Posts")'
+        '  (a :href pgh :hx-get pgh :hx-target "#main-panel"'
+        '    :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+        '    :class (str "px-4 py-1.5 rounded-t text-sm font-medium transition-colors " pgc) "Pages"))',
+        ph=posts_href, pgh=pages_href, hs=hx_select,
+        pc=posts_cls, pgc=pages_cls,
     )
 
 
@@ -663,22 +701,22 @@ def _blog_main_panel_html(ctx: dict) -> str:
     content_type = ctx.get("content_type", "posts")
     view = ctx.get("view")
 
-    parts = [_content_type_tabs_html(ctx)]
+    tabs = _content_type_tabs_html(ctx)
 
     if content_type == "pages":
-        parts.append('<div class="max-w-full px-3 py-3 space-y-3">')
-        parts.append(_page_cards_html(ctx))
-        parts.append('</div><div class="pb-8"></div>')
+        cards = _page_cards_html(ctx)
+        return sexp(
+            '(<> (raw! tabs) (div :class "max-w-full px-3 py-3 space-y-3" (raw! cards)) (div :class "pb-8"))',
+            tabs=tabs, cards=cards,
+        )
     else:
-        parts.append(_view_toggle_html(ctx))
-        if view == "tile":
-            parts.append('<div class="max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">')
-        else:
-            parts.append('<div class="max-w-full px-3 py-3 space-y-3">')
-        parts.append(_blog_cards_html(ctx))
-        parts.append('</div><div class="pb-8"></div>')
-
-    return "".join(parts)
+        toggle = _view_toggle_html(ctx)
+        grid_cls = "max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4" if view == "tile" else "max-w-full px-3 py-3 space-y-3"
+        cards = _blog_cards_html(ctx)
+        return sexp(
+            '(<> (raw! tabs) (raw! toggle) (div :class gc (raw! cards)) (div :class "pb-8"))',
+            tabs=tabs, toggle=toggle, gc=grid_cls, cards=cards,
+        )
 
 
 # ---------------------------------------------------------------------------
@@ -687,15 +725,17 @@ def _blog_main_panel_html(ctx: dict) -> str:
 
 def _blog_aside_html(ctx: dict) -> str:
     """Desktop aside with search, action buttons, and filters."""
-    parts = []
-    parts.append(search_desktop_html(ctx))
-    parts.append(_action_buttons_html(ctx))
-    parts.append(f'<div id="category-summary-desktop" hxx-swap-oob="outerHTML">')
-    parts.append(_tag_groups_filter_html(ctx))
-    parts.append(_authors_filter_html(ctx))
-    parts.append('</div>')
-    parts.append('<div id="filter-summary-desktop" hxx-swap-oob="outerHTML"></div>')
-    return "".join(parts)
+    sd = search_desktop_html(ctx)
+    ab = _action_buttons_html(ctx)
+    tgf = _tag_groups_filter_html(ctx)
+    af = _authors_filter_html(ctx)
+    return sexp(
+        '(<> (raw! sd) (raw! ab)'
+        '  (div :id "category-summary-desktop" :hxx-swap-oob "outerHTML"'
+        '    (raw! tgf) (raw! af))'
+        '  (div :id "filter-summary-desktop" :hxx-swap-oob "outerHTML"))',
+        sd=sd, ab=ab, tgf=tgf, af=af,
+    )
 
 
 def _blog_filter_html(ctx: dict) -> str:
@@ -736,46 +776,50 @@ def _action_buttons_html(ctx: dict) -> str:
     draft_count = ctx.get("draft_count", 0)
     current_local_href = ctx.get("current_local_href", "/index")
 
-    parts = ['<div class="flex flex-wrap gap-2 px-4 py-3">']
+    parts = []
 
     if has_admin:
         new_href = call_url(ctx, "blog_url", "/new/")
-        parts.append(
-            f'<a href="{new_href}" hx-get="{new_href}" hx-target="#main-panel"'
-            f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-            f' class="px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"'
-            f' title="New Post"><i class="fa fa-plus mr-1"></i> New Post</a>'
-        )
+        parts.append(sexp(
+            '(a :href h :hx-get h :hx-target "#main-panel"'
+            '  :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+            '  :class "px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"'
+            '  :title "New Post" (i :class "fa fa-plus mr-1") " New Post")',
+            h=new_href, hs=hx_select,
+        ))
         new_page_href = call_url(ctx, "blog_url", "/new-page/")
-        parts.append(
-            f'<a href="{new_page_href}" hx-get="{new_page_href}" hx-target="#main-panel"'
-            f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-            f' class="px-3 py-1 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 transition-colors"'
-            f' title="New Page"><i class="fa fa-plus mr-1"></i> New Page</a>'
-        )
+        parts.append(sexp(
+            '(a :href h :hx-get h :hx-target "#main-panel"'
+            '  :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+            '  :class "px-3 py-1 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 transition-colors"'
+            '  :title "New Page" (i :class "fa fa-plus mr-1") " New Page")',
+            h=new_page_href, hs=hx_select,
+        ))
 
     if user and (draft_count or drafts):
         if drafts:
             off_href = f"{current_local_href}"
-            parts.append(
-                f'<a href="{off_href}" hx-get="{off_href}" hx-target="#main-panel"'
-                f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-                f' class="px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"'
-                f' title="Hide Drafts"><i class="fa fa-file-text-o mr-1"></i> Drafts'
-                f' <span class="inline-block bg-stone-500 text-white px-1.5 py-0.5 text-xs font-medium rounded ml-1">{draft_count}</span></a>'
-            )
+            parts.append(sexp(
+                '(a :href h :hx-get h :hx-target "#main-panel"'
+                '  :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+                '  :class "px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"'
+                '  :title "Hide Drafts" (i :class "fa fa-file-text-o mr-1") " Drafts "'
+                '  (span :class "inline-block bg-stone-500 text-white px-1.5 py-0.5 text-xs font-medium rounded ml-1" dc))',
+                h=off_href, hs=hx_select, dc=str(draft_count),
+            ))
         else:
             on_href = f"{current_local_href}{'&' if '?' in current_local_href else '?'}drafts=1"
-            parts.append(
-                f'<a href="{on_href}" hx-get="{on_href}" hx-target="#main-panel"'
-                f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-                f' class="px-3 py-1 rounded bg-amber-600 text-white text-sm hover:bg-amber-700 transition-colors"'
-                f' title="Show Drafts"><i class="fa fa-file-text-o mr-1"></i> Drafts'
-                f' <span class="inline-block bg-amber-500 text-white px-1.5 py-0.5 text-xs font-medium rounded ml-1">{draft_count}</span></a>'
-            )
+            parts.append(sexp(
+                '(a :href h :hx-get h :hx-target "#main-panel"'
+                '  :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+                '  :class "px-3 py-1 rounded bg-amber-600 text-white text-sm hover:bg-amber-700 transition-colors"'
+                '  :title "Show Drafts" (i :class "fa fa-file-text-o mr-1") " Drafts "'
+                '  (span :class "inline-block bg-amber-500 text-white px-1.5 py-0.5 text-xs font-medium rounded ml-1" dc))',
+                h=on_href, hs=hx_select, dc=str(draft_count),
+            ))
 
-    parts.append('</div>')
-    return "".join(parts)
+    inner = "".join(parts)
+    return sexp('(div :class "flex flex-wrap gap-2 px-4 py-3" (raw! inner))', inner=inner)
 
 
 def _tag_groups_filter_html(ctx: dict) -> str:
@@ -785,17 +829,15 @@ def _tag_groups_filter_html(ctx: dict) -> str:
     selected_tags = ctx.get("selected_tags") or ()
     hx_select = ctx.get("hx_select_search", "#main-panel")
 
-    parts = ['<nav class="max-w-3xl mx-auto px-4 pb-4 flex flex-wrap gap-2 text-sm">'
-             '<ul class="divide-y flex flex-col gap-3">']
-
-    # "Any Topic" link
     is_any = len(selected_groups) == 0 and len(selected_tags) == 0
     any_cls = "bg-stone-900 text-white border-stone-900" if is_any else "bg-white text-stone-600 border-stone-300 hover:bg-stone-50"
-    parts.append(
-        f'<li><a class="px-3 py-1 rounded border {any_cls}"'
-        f' hx-get="?page=1" hx-target="#main-panel" hx-select="{hx_select}"'
-        f' hx-swap="outerHTML" hx-push-url="true">Any Topic</a></li>'
-    )
+
+    li_parts = [sexp(
+        '(li (a :class (str "px-3 py-1 rounded border " ac)'
+        '  :hx-get "?page=1" :hx-target "#main-panel" :hx-select hs'
+        '  :hx-swap "outerHTML" :hx-push-url "true" "Any Topic"))',
+        ac=any_cls, hs=hx_select,
+    )]
 
     for group in tag_groups:
         g_slug = getattr(group, "slug", "") if hasattr(group, "slug") else group.get("slug", "")
@@ -811,26 +853,36 @@ def _tag_groups_filter_html(ctx: dict) -> str:
         cls = "bg-stone-900 text-white border-stone-900" if is_on else "bg-white text-stone-600 border-stone-300 hover:bg-stone-50"
 
         if g_fi:
-            icon = f'<img src="{g_fi}" alt="{escape(g_name)}" class="h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0">'
+            icon = sexp(
+                '(img :src fi :alt n :class "h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0")',
+                fi=g_fi, n=g_name,
+            )
         else:
             style = f"background-color: {g_colour}; color: white;" if g_colour else "background-color: #e7e5e4; color: #57534e;"
-            icon = (
-                f'<div class="h-6 w-6 rounded-full text-[10px] font-semibold flex items-center justify-center'
-                f' border border-stone-300 flex-shrink-0" style="{style}">{escape(g_name[:1])}</div>'
+            icon = sexp(
+                '(div :class "h-6 w-6 rounded-full text-[10px] font-semibold flex items-center justify-center'
+                ' border border-stone-300 flex-shrink-0" :style st i)',
+                st=style, i=g_name[:1],
             )
 
-        parts.append(
-            f'<li><a class="flex items-center gap-2 px-3 py-1 rounded border {cls}"'
-            f' hx-get="?group={g_slug}&page=1" hx-target="#main-panel" hx-select="{hx_select}"'
-            f' hx-swap="outerHTML" hx-push-url="true">{icon}'
-            f'<span class="inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium border border-stone-200">{escape(g_name)}</span>'
-            f'<span class="flex-1"></span>'
-            f'<span class="inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200">{g_count}</span>'
-            f'</a></li>'
-        )
+        li_parts.append(sexp(
+            '(li (a :class (str "flex items-center gap-2 px-3 py-1 rounded border " c)'
+            '  :hx-get hg :hx-target "#main-panel" :hx-select hs'
+            '  :hx-swap "outerHTML" :hx-push-url "true"'
+            '  (raw! ic)'
+            '  (span :class "inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium border border-stone-200" n)'
+            '  (span :class "flex-1")'
+            '  (span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200" gc)))',
+            c=cls, hg=f"?group={g_slug}&page=1", hs=hx_select,
+            ic=icon, n=g_name, gc=str(g_count),
+        ))
 
-    parts.append('</ul></nav>')
-    return "".join(parts)
+    items = "".join(li_parts)
+    return sexp(
+        '(nav :class "max-w-3xl mx-auto px-4 pb-4 flex flex-wrap gap-2 text-sm"'
+        '  (ul :class "divide-y flex flex-col gap-3" (raw! items)))',
+        items=items,
+    )
 
 
 def _authors_filter_html(ctx: dict) -> str:
@@ -839,16 +891,15 @@ def _authors_filter_html(ctx: dict) -> str:
     selected_authors = ctx.get("selected_authors") or ()
     hx_select = ctx.get("hx_select_search", "#main-panel")
 
-    parts = ['<nav class="max-w-3xl mx-auto px-4 pb-4 flex flex-wrap gap-2 text-sm">'
-             '<ul class="divide-y flex flex-col gap-3">']
-
     is_any = len(selected_authors) == 0
     any_cls = "bg-stone-900 text-white border-stone-900" if is_any else "bg-white text-stone-600 border-stone-300 hover:bg-stone-50"
-    parts.append(
-        f'<li><a class="px-3 py-1 rounded {any_cls}"'
-        f' hx-get="?page=1" hx-target="#main-panel" hx-select="{hx_select}"'
-        f' hx-swap="outerHTML" hx-push-url="true">Any author</a></li>'
-    )
+
+    li_parts = [sexp(
+        '(li (a :class (str "px-3 py-1 rounded " ac)'
+        '  :hx-get "?page=1" :hx-target "#main-panel" :hx-select hs'
+        '  :hx-swap "outerHTML" :hx-push-url "true" "Any author"))',
+        ac=any_cls, hs=hx_select,
+    )]
 
     for author in authors:
         a_slug = getattr(author, "slug", "") if hasattr(author, "slug") else author.get("slug", "")
@@ -861,20 +912,29 @@ def _authors_filter_html(ctx: dict) -> str:
 
         icon = ""
         if a_img:
-            icon = f'<img src="{a_img}" alt="{escape(a_name)}" class="h-5 w-5 rounded-full object-cover">'
+            icon = sexp(
+                '(img :src ai :alt n :class "h-5 w-5 rounded-full object-cover")',
+                ai=a_img, n=a_name,
+            )
 
-        parts.append(
-            f'<li><a class="flex items-center gap-2 px-3 py-1 rounded {cls}"'
-            f' hx-get="?author={a_slug}&page=1" hx-target="#main-panel" hx-select="{hx_select}"'
-            f' hx-swap="outerHTML" hx-push-url="true">{icon}'
-            f'<span class="text-stone-700">{escape(a_name)}</span>'
-            f'<span class="flex-1"></span>'
-            f'<span class="inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200">{a_count}</span>'
-            f'</a></li>'
-        )
+        li_parts.append(sexp(
+            '(li (a :class (str "flex items-center gap-2 px-3 py-1 rounded " c)'
+            '  :hx-get hg :hx-target "#main-panel" :hx-select hs'
+            '  :hx-swap "outerHTML" :hx-push-url "true"'
+            '  (raw! ic)'
+            '  (span :class "text-stone-700" n)'
+            '  (span :class "flex-1")'
+            '  (span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200" ac)))',
+            c=cls, hg=f"?author={a_slug}&page=1", hs=hx_select,
+            ic=icon, n=a_name, ac=str(a_count),
+        ))
 
-    parts.append('</ul></nav>')
-    return "".join(parts)
+    items = "".join(li_parts)
+    return sexp(
+        '(nav :class "max-w-3xl mx-auto px-4 pb-4 flex flex-wrap gap-2 text-sm"'
+        '  (ul :class "divide-y flex flex-col gap-3" (raw! items)))',
+        items=items,
+    )
 
 
 def _tag_groups_filter_summary_html(ctx: dict) -> str:
@@ -891,7 +951,7 @@ def _tag_groups_filter_summary_html(ctx: dict) -> str:
             names.append(g_name)
     if not names:
         return ""
-    return f'<span class="text-sm text-stone-600">{escape(", ".join(names))}</span>'
+    return sexp('(span :class "text-sm text-stone-600" t)', t=", ".join(names))
 
 
 def _authors_filter_summary_html(ctx: dict) -> str:
@@ -908,7 +968,7 @@ def _authors_filter_summary_html(ctx: dict) -> str:
             names.append(a_name)
     if not names:
         return ""
-    return f'<span class="text-sm text-stone-600">{escape(", ".join(names))}</span>'
+    return sexp('(span :class "text-sm text-stone-600" t)', t=", ".join(names))
 
 
 # ---------------------------------------------------------------------------
@@ -926,54 +986,69 @@ def _post_main_panel_html(ctx: dict) -> str:
     is_admin = rights.get("admin") if isinstance(rights, dict) else getattr(rights, "admin", False)
     hx_select = ctx.get("hx_select_search", "#main-panel")
 
-    parts = ['<article class="relative">']
-
     # Draft indicator
+    draft_html = ""
     if post.get("status") == "draft":
-        parts.append('<div class="flex items-center justify-center gap-2 mb-3">')
-        parts.append('<span class="inline-block px-3 py-1 rounded-full text-sm font-semibold bg-amber-100 text-amber-800">Draft</span>')
-        if post.get("publish_requested"):
-            parts.append('<span class="inline-block px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-800">Publish requested</span>')
+        edit_html = ""
         if is_admin or (user and post.get("user_id") == getattr(user, "id", None)):
             edit_href = qurl("blog.post.admin.edit", slug=slug)
-            parts.append(
-                f'<a href="{edit_href}" hx-get="{edit_href}" hx-target="#main-panel"'
-                f' hx-select="{hx_select}" hx-swap="outerHTML" hx-push-url="true"'
-                f' class="inline-block px-3 py-1 rounded-full text-sm font-semibold bg-stone-700 text-white hover:bg-stone-800 transition-colors">'
-                f'<i class="fa fa-pencil mr-1"></i> Edit</a>'
+            edit_html = sexp(
+                '(a :href eh :hx-get eh :hx-target "#main-panel"'
+                '  :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
+                '  :class "inline-block px-3 py-1 rounded-full text-sm font-semibold bg-stone-700 text-white hover:bg-stone-800 transition-colors"'
+                '  (i :class "fa fa-pencil mr-1") " Edit")',
+                eh=edit_href, hs=hx_select,
             )
-        parts.append('</div>')
+        draft_html = sexp(
+            '(div :class "flex items-center justify-center gap-2 mb-3"'
+            '  (span :class "inline-block px-3 py-1 rounded-full text-sm font-semibold bg-amber-100 text-amber-800" "Draft")'
+            '  (when pr (span :class "inline-block px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-800" "Publish requested"))'
+            '  (raw! eh))',
+            pr=post.get("publish_requested"), eh=edit_html,
+        )
 
     # Blog post chrome (not for pages)
+    chrome_html = ""
     if not post.get("is_page"):
+        like_html = ""
         if user:
             liked = post.get("is_liked", False)
             like_url = call_url(ctx, "blog_url", f"/{slug}/like/toggle/")
-            parts.append(
-                f'<div class="absolute top-2 right-2 z-10 text-8xl md:text-6xl">'
-                f'<button hx-post="{like_url}" hx-swap="outerHTML"'
-                f' hx-headers=\'{{\"X-CSRFToken\": \"{ctx.get("csrf_token", "")}\"}}\''
-                f' class="cursor-pointer">{"❤️" if liked else "🤍"}</button></div>'
+            like_html = sexp(
+                '(div :class "absolute top-2 right-2 z-10 text-8xl md:text-6xl"'
+                '  (button :hx-post lu :hx-swap "outerHTML"'
+                '    :hx-headers hh :class "cursor-pointer" heart))',
+                lu=like_url,
+                hh=f'{{"X-CSRFToken": "{ctx.get("csrf_token", "")}"}}',
+                heart="\u2764\ufe0f" if liked else "\U0001f90d",
             )
 
+        excerpt_html = ""
         if post.get("custom_excerpt"):
-            parts.append(f'<div class="w-full text-center italic text-3xl p-2">{post["custom_excerpt"]}</div>')
+            excerpt_html = sexp(
+                '(div :class "w-full text-center italic text-3xl p-2" ex)',
+                ex=post["custom_excerpt"],
+            )
 
-        # Desktop at_bar
-        parts.append(f'<div class="hidden md:block">{_at_bar_html(post, ctx)}</div>')
+        at_bar = _at_bar_html(post, ctx)
+        chrome_html = sexp(
+            '(<> (raw! lh) (raw! exh) (div :class "hidden md:block" (raw! ab)))',
+            lh=like_html, exh=excerpt_html, ab=at_bar,
+        )
 
-    # Feature image
     fi = post.get("feature_image")
-    if fi:
-        parts.append(f'<div class="mb-3 flex justify-center"><img src="{fi}" alt="" class="rounded-lg w-full md:w-3/4 object-cover"></div>')
-
-    # Post HTML content
     html_content = post.get("html", "")
-    if html_content:
-        parts.append(f'<div class="blog-content p-2">{html_content}</div>')
 
-    parts.append('</article><div class="pb-8"></div>')
-    return "".join(parts)
+    return sexp(
+        '(<> (article :class "relative"'
+        '  (raw! dh) (raw! ch)'
+        '  (when fi (div :class "mb-3 flex justify-center"'
+        '    (img :src fi :alt "" :class "rounded-lg w-full md:w-3/4 object-cover")))'
+        '  (when hc (div :class "blog-content p-2" (raw! hc))))'
+        '  (div :class "pb-8"))',
+        dh=draft_html, ch=chrome_html,
+        fi=fi, hc=html_content,
+    )
 
 
 def _post_meta_html(ctx: dict) -> str:
@@ -1006,27 +1081,27 @@ def _post_meta_html(ctx: dict) -> str:
     tw_title = post.get("twitter_title") or base_title
     is_article = not post.get("is_page")
 
-    parts = [f'<meta name="robots" content="{robots}">']
-    parts.append(f'<title>{escape(base_title)}</title>')
-    parts.append(f'<meta name="description" content="{escape(desc)}">')
-    if canonical:
-        parts.append(f'<link rel="canonical" href="{escape(canonical)}">')
-
-    parts.append(f'<meta property="og:type" content="{"article" if is_article else "website"}">')
-    parts.append(f'<meta property="og:title" content="{escape(og_title)}">')
-    parts.append(f'<meta property="og:description" content="{escape(desc)}">')
-    if canonical:
-        parts.append(f'<meta property="og:url" content="{escape(canonical)}">')
-    if image:
-        parts.append(f'<meta property="og:image" content="{escape(image)}">')
-
-    parts.append(f'<meta name="twitter:card" content="{"summary_large_image" if image else "summary"}">')
-    parts.append(f'<meta name="twitter:title" content="{escape(tw_title)}">')
-    parts.append(f'<meta name="twitter:description" content="{escape(desc)}">')
-    if image:
-        parts.append(f'<meta name="twitter:image" content="{escape(image)}">')
-
-    return "".join(parts)
+    return sexp(
+        '(<>'
+        '  (meta :name "robots" :content robots)'
+        '  (title bt)'
+        '  (meta :name "description" :content desc)'
+        '  (when canon (link :rel "canonical" :href canon))'
+        '  (meta :property "og:type" :content ogt)'
+        '  (meta :property "og:title" :content og_title)'
+        '  (meta :property "og:description" :content desc)'
+        '  (when canon (meta :property "og:url" :content canon))'
+        '  (when image (meta :property "og:image" :content image))'
+        '  (meta :name "twitter:card" :content twc)'
+        '  (meta :name "twitter:title" :content tw_title)'
+        '  (meta :name "twitter:description" :content desc)'
+        '  (when image (meta :name "twitter:image" :content image)))',
+        robots=robots, bt=base_title, desc=desc, canon=canonical,
+        ogt="article" if is_article else "website",
+        og_title=og_title, image=image,
+        twc="summary_large_image" if image else "summary",
+        tw_title=tw_title,
+    )
 
 
 # ---------------------------------------------------------------------------
@@ -1037,7 +1112,7 @@ def _home_main_panel_html(ctx: dict) -> str:
     """Home page content — renders the Ghost page HTML."""
     post = ctx.get("post") or {}
     html = post.get("html", "")
-    return f'<article class="relative"><div class="blog-content p-2">{html}</div></article>'
+    return sexp('(article :class "relative" (div :class "blog-content p-2" (raw! h)))', h=html)
 
 
 # ---------------------------------------------------------------------------
@@ -1045,7 +1120,7 @@ def _home_main_panel_html(ctx: dict) -> str:
 # ---------------------------------------------------------------------------
 
 def _post_admin_main_panel_html(ctx: dict) -> str:
-    return '<div class="pb-8"></div>'
+    return sexp('(div :class "pb-8")')
 
 
 # ---------------------------------------------------------------------------
@@ -1053,7 +1128,7 @@ def _post_admin_main_panel_html(ctx: dict) -> str:
 # ---------------------------------------------------------------------------
 
 def _settings_main_panel_html(ctx: dict) -> str:
-    return '<div class="max-w-2xl mx-auto px-4 py-6"></div>'
+    return sexp('(div :class "max-w-2xl mx-auto px-4 py-6")')
 
 
 def _cache_main_panel_html(ctx: dict) -> str:
@@ -1061,15 +1136,14 @@ def _cache_main_panel_html(ctx: dict) -> str:
 
     csrf = ctx.get("csrf_token", "")
     clear_url = qurl("settings.cache_clear")
-    return (
-        f'<div class="max-w-2xl mx-auto px-4 py-6 space-y-6">'
-        f'<div class="flex flex-col md:flex-row gap-3 items-start">'
-        f'<form hx-post="{clear_url}" hx-trigger="submit" hx-target="#cache-status" hx-swap="innerHTML">'
-        f'<input type="hidden" name="csrf_token" value="{csrf}">'
-        f'<button class="border rounded px-4 py-2 bg-stone-800 text-white text-sm" type="submit">Clear cache</button>'
-        f'</form>'
-        f'<div id="cache-status" class="py-2"></div>'
-        f'</div></div>'
+    return sexp(
+        '(div :class "max-w-2xl mx-auto px-4 py-6 space-y-6"'
+        '  (div :class "flex flex-col md:flex-row gap-3 items-start"'
+        '    (form :hx-post cu :hx-trigger "submit" :hx-target "#cache-status" :hx-swap "innerHTML"'
+        '      (input :type "hidden" :name "csrf_token" :value csrf)'
+        '      (button :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" :type "submit" "Clear cache"))'
+        '    (div :id "cache-status" :class "py-2")))',
+        cu=clear_url, csrf=csrf,
     )
 
 
@@ -1078,11 +1152,13 @@ def _cache_main_panel_html(ctx: dict) -> str:
 # ---------------------------------------------------------------------------
 
 def _snippets_main_panel_html(ctx: dict) -> str:
-    return (
-        f'<div class="max-w-4xl mx-auto p-6">'
-        f'<div class="mb-6 flex justify-between items-center">'
-        f'<h1 class="text-3xl font-bold">Snippets</h1></div>'
-        f'<div id="snippets-list">{_snippets_list_html(ctx)}</div></div>'
+    sl = _snippets_list_html(ctx)
+    return sexp(
+        '(div :class "max-w-4xl mx-auto p-6"'
+        '  (div :class "mb-6 flex justify-between items-center"'
+        '    (h1 :class "text-3xl font-bold" "Snippets"))'
+        '  (div :id "snippets-list" (raw! sl)))',
+        sl=sl,
     )
 
 
@@ -1097,11 +1173,11 @@ def _snippets_list_html(ctx: dict) -> str:
     user_id = getattr(user, "id", None)
 
     if not snippets:
-        return (
-            '<div class="bg-white rounded-lg shadow">'
-            '<div class="p-8 text-center text-stone-400">'
-            '<i class="fa fa-puzzle-piece text-4xl mb-2"></i>'
-            '<p>No snippets yet. Create one from the blog editor.</p></div></div>'
+        return sexp(
+            '(div :class "bg-white rounded-lg shadow"'
+            '  (div :class "p-8 text-center text-stone-400"'
+            '    (i :class "fa fa-puzzle-piece text-4xl mb-2")'
+            '    (p "No snippets yet. Create one from the blog editor.")))',
         )
 
     badge_colours = {
@@ -1110,7 +1186,7 @@ def _snippets_list_html(ctx: dict) -> str:
         "admin": "bg-amber-100 text-amber-700",
     }
 
-    parts = ['<div class="bg-white rounded-lg shadow"><div class="divide-y">']
+    row_parts = []
     for s in snippets:
         s_id = getattr(s, "id", None) or s.get("id")
         s_name = getattr(s, "name", "") if hasattr(s, "name") else s.get("name", "")
@@ -1120,41 +1196,52 @@ def _snippets_list_html(ctx: dict) -> str:
         owner = "You" if s_uid == user_id else f"User #{s_uid}"
         badge_cls = badge_colours.get(s_vis, "bg-stone-200 text-stone-700")
 
-        parts.append(
-            f'<div class="flex items-center gap-4 p-4 hover:bg-stone-50 transition">'
-            f'<div class="flex-1 min-w-0"><div class="font-medium truncate">{escape(s_name)}</div>'
-            f'<div class="text-xs text-stone-500">{owner}</div></div>'
-            f'<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {badge_cls}">{s_vis}</span>'
-        )
-
+        extra = ""
         if is_admin:
             patch_url = qurl("snippets.patch_visibility", snippet_id=s_id)
-            parts.append(
-                f'<select name="visibility" hx-patch="{patch_url}" hx-target="#snippets-list" hx-swap="innerHTML"'
-                f' hx-headers=\'{{\"X-CSRFToken\": \"{csrf}\"}}\' class="text-sm border border-stone-300 rounded px-2 py-1">'
-            )
+            opts = ""
             for v in ["private", "shared", "admin"]:
-                sel = " selected" if s_vis == v else ""
-                parts.append(f'<option value="{v}"{sel}>{v}</option>')
-            parts.append('</select>')
+                opts += sexp(
+                    '(option :value v :selected sel v)',
+                    v=v, sel=(s_vis == v),
+                )
+            extra += sexp(
+                '(select :name "visibility" :hx-patch pu :hx-target "#snippets-list" :hx-swap "innerHTML"'
+                '  :hx-headers hh :class "text-sm border border-stone-300 rounded px-2 py-1"'
+                '  (raw! opts))',
+                pu=patch_url, hh=f'{{"X-CSRFToken": "{csrf}"}}', opts=opts,
+            )
 
         if s_uid == user_id or is_admin:
             del_url = qurl("snippets.delete_snippet", snippet_id=s_id)
-            parts.append(
-                f'<button type="button" data-confirm data-confirm-title="Delete snippet?"'
-                f' data-confirm-text="Delete &ldquo;{escape(s_name)}&rdquo;?"'
-                f' data-confirm-icon="warning" data-confirm-confirm-text="Yes, delete"'
-                f' data-confirm-cancel-text="Cancel" data-confirm-event="confirmed"'
-                f' hx-delete="{del_url}" hx-trigger="confirmed" hx-target="#snippets-list" hx-swap="innerHTML"'
-                f' hx-headers=\'{{\"X-CSRFToken\": \"{csrf}\"}}\''
-                f' class="px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800 flex-shrink-0">'
-                f'<i class="fa fa-trash"></i> Delete</button>'
+            extra += sexp(
+                '(button :type "button" :data-confirm "" :data-confirm-title "Delete snippet?"'
+                '  :data-confirm-text ct :data-confirm-icon "warning"'
+                '  :data-confirm-confirm-text "Yes, delete" :data-confirm-cancel-text "Cancel"'
+                '  :data-confirm-event "confirmed"'
+                '  :hx-delete du :hx-trigger "confirmed" :hx-target "#snippets-list" :hx-swap "innerHTML"'
+                '  :hx-headers hh'
+                '  :class "px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800 flex-shrink-0"'
+                '  (i :class "fa fa-trash") " Delete")',
+                ct=f'Delete \u201c{s_name}\u201d?',
+                du=del_url, hh=f'{{"X-CSRFToken": "{csrf}"}}',
             )
 
-        parts.append('</div>')
+        row_parts.append(sexp(
+            '(div :class "flex items-center gap-4 p-4 hover:bg-stone-50 transition"'
+            '  (div :class "flex-1 min-w-0"'
+            '    (div :class "font-medium truncate" sn)'
+            '    (div :class "text-xs text-stone-500" ow))'
+            '  (span :class (str "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium " bc) sv)'
+            '  (raw! ex))',
+            sn=s_name, ow=owner, bc=badge_cls, sv=s_vis, ex=extra,
+        ))
 
-    parts.append('</div></div>')
-    return "".join(parts)
+    rows = "".join(row_parts)
+    return sexp(
+        '(div :class "bg-white rounded-lg shadow" (div :class "divide-y" (raw! rows)))',
+        rows=rows,
+    )
 
 
 # ---------------------------------------------------------------------------
@@ -1165,14 +1252,16 @@ def _menu_items_main_panel_html(ctx: dict) -> str:
     from quart import url_for as qurl
 
     new_url = qurl("menu_items.new_menu_item")
-    return (
-        f'<div class="max-w-4xl mx-auto p-6">'
-        f'<div class="mb-6 flex justify-end items-center">'
-        f'<button type="button" hx-get="{new_url}" hx-target="#menu-item-form" hx-swap="innerHTML"'
-        f' class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">'
-        f'<i class="fa fa-plus"></i> Add Menu Item</button></div>'
-        f'<div id="menu-item-form" class="mb-6"></div>'
-        f'<div id="menu-items-list">{_menu_items_list_html(ctx)}</div></div>'
+    ml = _menu_items_list_html(ctx)
+    return sexp(
+        '(div :class "max-w-4xl mx-auto p-6"'
+        '  (div :class "mb-6 flex justify-end items-center"'
+        '    (button :type "button" :hx-get nu :hx-target "#menu-item-form" :hx-swap "innerHTML"'
+        '      :class "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"'
+        '      (i :class "fa fa-plus") " Add Menu Item"))'
+        '  (div :id "menu-item-form" :class "mb-6")'
+        '  (div :id "menu-items-list" (raw! ml)))',
+        nu=new_url, ml=ml,
     )
 
 
@@ -1183,14 +1272,14 @@ def _menu_items_list_html(ctx: dict) -> str:
     csrf = ctx.get("csrf_token", "")
 
     if not menu_items:
-        return (
-            '<div class="bg-white rounded-lg shadow">'
-            '<div class="p-8 text-center text-stone-400">'
-            '<i class="fa fa-inbox text-4xl mb-2"></i>'
-            '<p>No menu items yet. Add one to get started!</p></div></div>'
+        return sexp(
+            '(div :class "bg-white rounded-lg shadow"'
+            '  (div :class "p-8 text-center text-stone-400"'
+            '    (i :class "fa fa-inbox text-4xl mb-2")'
+            '    (p "No menu items yet. Add one to get started!")))',
         )
 
-    parts = ['<div class="bg-white rounded-lg shadow"><div class="divide-y">']
+    row_parts = []
     for item in menu_items:
         i_id = getattr(item, "id", None) or item.get("id")
         label = getattr(item, "label", "") if hasattr(item, "label") else item.get("label", "")
@@ -1201,31 +1290,43 @@ def _menu_items_list_html(ctx: dict) -> str:
         edit_url = qurl("menu_items.edit_menu_item", item_id=i_id)
         del_url = qurl("menu_items.delete_menu_item_route", item_id=i_id)
 
-        img = (f'<img src="{fi}" alt="{escape(label)}" class="w-12 h-12 rounded-full object-cover flex-shrink-0" />'
-               if fi else '<div class="w-12 h-12 rounded-full bg-stone-200 flex-shrink-0"></div>')
-
-        parts.append(
-            f'<div class="flex items-center gap-4 p-4 hover:bg-stone-50 transition">'
-            f'<div class="text-stone-400 cursor-move"><i class="fa fa-grip-vertical"></i></div>'
-            f'{img}'
-            f'<div class="flex-1 min-w-0"><div class="font-medium truncate">{escape(label)}</div>'
-            f'<div class="text-xs text-stone-500 truncate">{escape(slug)}</div></div>'
-            f'<div class="text-sm text-stone-500">Order: {sort}</div>'
-            f'<div class="flex gap-2 flex-shrink-0">'
-            f'<button type="button" hx-get="{edit_url}" hx-target="#menu-item-form" hx-swap="innerHTML"'
-            f' class="px-3 py-1 text-sm bg-stone-200 hover:bg-stone-300 rounded"><i class="fa fa-edit"></i> Edit</button>'
-            f'<button type="button" data-confirm data-confirm-title="Delete menu item?"'
-            f' data-confirm-text="Remove {escape(label)} from the menu?"'
-            f' data-confirm-icon="warning" data-confirm-confirm-text="Yes, delete"'
-            f' data-confirm-cancel-text="Cancel" data-confirm-event="confirmed"'
-            f' hx-delete="{del_url}" hx-trigger="confirmed" hx-target="#menu-items-list" hx-swap="innerHTML"'
-            f' hx-headers=\'{{\"X-CSRFToken\": \"{csrf}\"}}\''
-            f' class="px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800">'
-            f'<i class="fa fa-trash"></i> Delete</button></div></div>'
+        img_html = sexp(
+            '(if fi (img :src fi :alt lb :class "w-12 h-12 rounded-full object-cover flex-shrink-0")'
+            '  (div :class "w-12 h-12 rounded-full bg-stone-200 flex-shrink-0"))',
+            fi=fi, lb=label,
         )
 
-    parts.append('</div></div>')
-    return "".join(parts)
+        row_parts.append(sexp(
+            '(div :class "flex items-center gap-4 p-4 hover:bg-stone-50 transition"'
+            '  (div :class "text-stone-400 cursor-move" (i :class "fa fa-grip-vertical"))'
+            '  (raw! img)'
+            '  (div :class "flex-1 min-w-0"'
+            '    (div :class "font-medium truncate" lb)'
+            '    (div :class "text-xs text-stone-500 truncate" sl))'
+            '  (div :class "text-sm text-stone-500" (str "Order: " so))'
+            '  (div :class "flex gap-2 flex-shrink-0"'
+            '    (button :type "button" :hx-get eu :hx-target "#menu-item-form" :hx-swap "innerHTML"'
+            '      :class "px-3 py-1 text-sm bg-stone-200 hover:bg-stone-300 rounded"'
+            '      (i :class "fa fa-edit") " Edit")'
+            '    (button :type "button" :data-confirm "" :data-confirm-title "Delete menu item?"'
+            '      :data-confirm-text ct :data-confirm-icon "warning"'
+            '      :data-confirm-confirm-text "Yes, delete" :data-confirm-cancel-text "Cancel"'
+            '      :data-confirm-event "confirmed"'
+            '      :hx-delete du :hx-trigger "confirmed" :hx-target "#menu-items-list" :hx-swap "innerHTML"'
+            '      :hx-headers hh'
+            '      :class "px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800"'
+            '      (i :class "fa fa-trash") " Delete")))',
+            img=img_html, lb=label, sl=slug, so=str(sort),
+            eu=edit_url, du=del_url,
+            ct=f"Remove {label} from the menu?",
+            hh=f'{{"X-CSRFToken": "{csrf}"}}',
+        ))
+
+    rows = "".join(row_parts)
+    return sexp(
+        '(div :class "bg-white rounded-lg shadow" (div :class "divide-y" (raw! rows)))',
+        rows=rows,
+    )
 
 
 # ---------------------------------------------------------------------------
@@ -1239,27 +1340,24 @@ def _tag_groups_main_panel_html(ctx: dict) -> str:
     unassigned_tags = ctx.get("unassigned_tags") or []
     csrf = ctx.get("csrf_token", "")
 
-    parts = ['<div class="max-w-2xl mx-auto px-4 py-6 space-y-8">']
-
-    # Create form
     create_url = qurl("blog.tag_groups_admin.create")
-    parts.append(
-        f'<form method="post" action="{create_url}" class="border rounded p-4 bg-white space-y-3">'
-        f'<input type="hidden" name="csrf_token" value="{csrf}">'
-        f'<h3 class="text-sm font-semibold text-stone-700">New Group</h3>'
-        f'<div class="flex flex-col sm:flex-row gap-3">'
-        f'<input type="text" name="name" placeholder="Group name" required class="flex-1 border rounded px-3 py-2 text-sm">'
-        f'<input type="text" name="colour" placeholder="#colour" class="w-28 border rounded px-3 py-2 text-sm">'
-        f'<input type="number" name="sort_order" placeholder="Order" value="0" class="w-20 border rounded px-3 py-2 text-sm">'
-        f'</div>'
-        f'<input type="text" name="feature_image" placeholder="Image URL (optional)" class="w-full border rounded px-3 py-2 text-sm">'
-        f'<button type="submit" class="border rounded px-4 py-2 bg-stone-800 text-white text-sm">Create</button>'
-        f'</form>'
+    form_html = sexp(
+        '(form :method "post" :action cu :class "border rounded p-4 bg-white space-y-3"'
+        '  (input :type "hidden" :name "csrf_token" :value csrf)'
+        '  (h3 :class "text-sm font-semibold text-stone-700" "New Group")'
+        '  (div :class "flex flex-col sm:flex-row gap-3"'
+        '    (input :type "text" :name "name" :placeholder "Group name" :required "" :class "flex-1 border rounded px-3 py-2 text-sm")'
+        '    (input :type "text" :name "colour" :placeholder "#colour" :class "w-28 border rounded px-3 py-2 text-sm")'
+        '    (input :type "number" :name "sort_order" :placeholder "Order" :value "0" :class "w-20 border rounded px-3 py-2 text-sm"))'
+        '  (input :type "text" :name "feature_image" :placeholder "Image URL (optional)" :class "w-full border rounded px-3 py-2 text-sm")'
+        '  (button :type "submit" :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" "Create"))',
+        cu=create_url, csrf=csrf,
     )
 
     # Groups list
+    groups_html = ""
     if groups:
-        parts.append('<ul class="space-y-2">')
+        li_parts = []
         for group in groups:
             g_id = getattr(group, "id", None) or group.get("id")
             g_name = getattr(group, "name", "") if hasattr(group, "name") else group.get("name", "")
@@ -1271,38 +1369,57 @@ def _tag_groups_main_panel_html(ctx: dict) -> str:
             edit_href = qurl("blog.tag_groups_admin.edit", id=g_id)
 
             if g_fi:
-                icon = f'<img src="{g_fi}" alt="{escape(g_name)}" class="h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0">'
+                icon = sexp(
+                    '(img :src fi :alt n :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0")',
+                    fi=g_fi, n=g_name,
+                )
             else:
                 style = f"background-color: {g_colour}; color: white;" if g_colour else "background-color: #e7e5e4; color: #57534e;"
-                icon = (
-                    f'<div class="h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0"'
-                    f' style="{style}">{escape(g_name[:1])}</div>'
+                icon = sexp(
+                    '(div :class "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0"'
+                    '  :style st i)',
+                    st=style, i=g_name[:1],
                 )
 
-            parts.append(
-                f'<li class="border rounded p-3 bg-white flex items-center gap-3">{icon}'
-                f'<div class="flex-1"><a href="{edit_href}" class="font-medium text-stone-800 hover:underline">{escape(g_name)}</a>'
-                f'<span class="text-xs text-stone-500 ml-2">{escape(g_slug)}</span></div>'
-                f'<span class="text-xs text-stone-500">order: {g_sort}</span></li>'
-            )
-        parts.append('</ul>')
+            li_parts.append(sexp(
+                '(li :class "border rounded p-3 bg-white flex items-center gap-3"'
+                '  (raw! ic)'
+                '  (div :class "flex-1"'
+                '    (a :href eh :class "font-medium text-stone-800 hover:underline" gn)'
+                '    (span :class "text-xs text-stone-500 ml-2" gs))'
+                '  (span :class "text-xs text-stone-500" (str "order: " so)))',
+                ic=icon, eh=edit_href, gn=g_name, gs=g_slug, so=str(g_sort),
+            ))
+        groups_html = sexp(
+            '(ul :class "space-y-2" (raw! items))',
+            items="".join(li_parts),
+        )
     else:
-        parts.append('<p class="text-stone-500 text-sm">No tag groups yet.</p>')
+        groups_html = sexp('(p :class "text-stone-500 text-sm" "No tag groups yet.")')
 
     # Unassigned tags
+    unassigned_html = ""
     if unassigned_tags:
-        parts.append(f'<div class="border-t pt-4"><h3 class="text-sm font-semibold text-stone-700 mb-2">Unassigned Tags ({len(unassigned_tags)})</h3>')
-        parts.append('<div class="flex flex-wrap gap-2">')
+        tag_spans = []
         for tag in unassigned_tags:
             t_name = getattr(tag, "name", "") if hasattr(tag, "name") else tag.get("name", "")
-            parts.append(
-                f'<span class="inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200 rounded">'
-                f'{escape(t_name)}</span>'
-            )
-        parts.append('</div></div>')
+            tag_spans.append(sexp(
+                '(span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200 rounded" tn)',
+                tn=t_name,
+            ))
+        unassigned_html = sexp(
+            '(div :class "border-t pt-4"'
+            '  (h3 :class "text-sm font-semibold text-stone-700 mb-2" hd)'
+            '  (div :class "flex flex-wrap gap-2" (raw! spans)))',
+            hd=f"Unassigned Tags ({len(unassigned_tags)})",
+            spans="".join(tag_spans),
+        )
 
-    parts.append('</div>')
-    return "".join(parts)
+    return sexp(
+        '(div :class "max-w-2xl mx-auto px-4 py-6 space-y-8"'
+        '  (raw! fh) (raw! gh) (raw! uh))',
+        fh=form_html, gh=groups_html, uh=unassigned_html,
+    )
 
 
 def _tag_groups_edit_main_panel_html(ctx: dict) -> str:
@@ -1322,57 +1439,60 @@ def _tag_groups_edit_main_panel_html(ctx: dict) -> str:
     save_url = qurl("blog.tag_groups_admin.save", id=g_id)
     del_url = qurl("blog.tag_groups_admin.delete_group", id=g_id)
 
-    parts = [f'<div class="max-w-2xl mx-auto px-4 py-6 space-y-6">']
-
-    # Edit form
-    parts.append(
-        f'<form method="post" action="{save_url}" class="border rounded p-4 bg-white space-y-4">'
-        f'<input type="hidden" name="csrf_token" value="{csrf}">'
-        f'<div class="space-y-3">'
-        f'<div><label class="block text-xs font-medium text-stone-600 mb-1">Name</label>'
-        f'<input type="text" name="name" value="{escape(g_name)}" required class="w-full border rounded px-3 py-2 text-sm"></div>'
-        f'<div class="flex gap-3"><div class="flex-1"><label class="block text-xs font-medium text-stone-600 mb-1">Colour</label>'
-        f'<input type="text" name="colour" value="{escape(g_colour or "")}" placeholder="#hex" class="w-full border rounded px-3 py-2 text-sm"></div>'
-        f'<div class="w-24"><label class="block text-xs font-medium text-stone-600 mb-1">Order</label>'
-        f'<input type="number" name="sort_order" value="{g_sort}" class="w-full border rounded px-3 py-2 text-sm"></div></div>'
-        f'<div><label class="block text-xs font-medium text-stone-600 mb-1">Feature Image URL</label>'
-        f'<input type="text" name="feature_image" value="{escape(g_fi or "")}" placeholder="https://..." class="w-full border rounded px-3 py-2 text-sm"></div>'
-        f'</div>'
-    )
-
     # Tag checkboxes
-    parts.append(
-        '<div><label class="block text-xs font-medium text-stone-600 mb-2">Assign Tags</label>'
-        '<div class="grid grid-cols-1 sm:grid-cols-2 gap-1 max-h-64 overflow-y-auto border rounded p-2">'
-    )
+    tag_items = []
     for tag in all_tags:
         t_id = getattr(tag, "id", None) or tag.get("id")
         t_name = getattr(tag, "name", "") if hasattr(tag, "name") else tag.get("name", "")
         t_fi = getattr(tag, "feature_image", None) if hasattr(tag, "feature_image") else tag.get("feature_image")
-        checked = " checked" if t_id in assigned_tag_ids else ""
-        img = f'<img src="{t_fi}" alt="" class="h-4 w-4 rounded-full object-cover">' if t_fi else ""
-        parts.append(
-            f'<label class="flex items-center gap-2 px-2 py-1 hover:bg-stone-50 rounded text-sm cursor-pointer">'
-            f'<input type="checkbox" name="tag_ids" value="{t_id}"{checked} class="rounded border-stone-300">'
-            f'{img}<span>{escape(t_name)}</span></label>'
-        )
-    parts.append('</div></div>')
+        checked = t_id in assigned_tag_ids
+        img = sexp(
+            '(img :src fi :alt "" :class "h-4 w-4 rounded-full object-cover")',
+            fi=t_fi,
+        ) if t_fi else ""
+        tag_items.append(sexp(
+            '(label :class "flex items-center gap-2 px-2 py-1 hover:bg-stone-50 rounded text-sm cursor-pointer"'
+            '  (input :type "checkbox" :name "tag_ids" :value tid :checked ch :class "rounded border-stone-300")'
+            '  (raw! im) (span tn))',
+            tid=str(t_id), ch=checked, im=img, tn=t_name,
+        ))
 
-    parts.append(
-        '<div class="flex gap-3"><button type="submit" class="border rounded px-4 py-2 bg-stone-800 text-white text-sm">Save</button></div>'
-        '</form>'
+    edit_form = sexp(
+        '(form :method "post" :action su :class "border rounded p-4 bg-white space-y-4"'
+        '  (input :type "hidden" :name "csrf_token" :value csrf)'
+        '  (div :class "space-y-3"'
+        '    (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Name")'
+        '      (input :type "text" :name "name" :value gn :required "" :class "w-full border rounded px-3 py-2 text-sm"))'
+        '    (div :class "flex gap-3"'
+        '      (div :class "flex-1" (label :class "block text-xs font-medium text-stone-600 mb-1" "Colour")'
+        '        (input :type "text" :name "colour" :value gc :placeholder "#hex" :class "w-full border rounded px-3 py-2 text-sm"))'
+        '      (div :class "w-24" (label :class "block text-xs font-medium text-stone-600 mb-1" "Order")'
+        '        (input :type "number" :name "sort_order" :value gs :class "w-full border rounded px-3 py-2 text-sm")))'
+        '    (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Feature Image URL")'
+        '      (input :type "text" :name "feature_image" :value gfi :placeholder "https://..." :class "w-full border rounded px-3 py-2 text-sm")))'
+        '  (div (label :class "block text-xs font-medium text-stone-600 mb-2" "Assign Tags")'
+        '    (div :class "grid grid-cols-1 sm:grid-cols-2 gap-1 max-h-64 overflow-y-auto border rounded p-2"'
+        '      (raw! tags)))'
+        '  (div :class "flex gap-3"'
+        '    (button :type "submit" :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" "Save")))',
+        su=save_url, csrf=csrf,
+        gn=g_name, gc=g_colour or "", gs=str(g_sort), gfi=g_fi or "",
+        tags="".join(tag_items),
     )
 
-    # Delete form
-    parts.append(
-        f'<form method="post" action="{del_url}" class="border-t pt-4"'
-        f' onsubmit="return confirm(\'Delete this tag group? Tags will not be deleted.\')">'
-        f'<input type="hidden" name="csrf_token" value="{csrf}">'
-        f'<button type="submit" class="border rounded px-4 py-2 bg-red-600 text-white text-sm">Delete Group</button></form>'
+    del_form = sexp(
+        '(form :method "post" :action du :class "border-t pt-4"'
+        '  :onsubmit "return confirm(\'Delete this tag group? Tags will not be deleted.\')"'
+        '  (input :type "hidden" :name "csrf_token" :value csrf)'
+        '  (button :type "submit" :class "border rounded px-4 py-2 bg-red-600 text-white text-sm" "Delete Group"))',
+        du=del_url, csrf=csrf,
     )
 
-    parts.append('</div>')
-    return "".join(parts)
+    return sexp(
+        '(div :class "max-w-2xl mx-auto px-4 py-6 space-y-6"'
+        '  (raw! ef) (raw! df))',
+        ef=edit_form, df=del_form,
+    )
 
 
 # ---------------------------------------------------------------------------
@@ -1477,98 +1597,75 @@ def render_editor_panel(save_error: str | None = None, is_page: bool = False) ->
 
     # Error banner
     if save_error:
-        parts.append(
-            '<div class="max-w-[768px] mx-auto mt-[16px] rounded-[8px] border border-red-300'
-            ' bg-red-50 px-[16px] py-[12px] text-[14px] text-red-700">'
-            f'<strong>Save failed:</strong> {esc(save_error)}</div>'
-        )
+        parts.append(sexp(
+            '(div :class "max-w-[768px] mx-auto mt-[16px] rounded-[8px] border border-red-300'
+            ' bg-red-50 px-[16px] py-[12px] text-[14px] text-red-700"'
+            '  (strong "Save failed:") " " err)',
+            err=str(save_error),
+        ))
 
-    # Form
-    parts.append(
-        '<form id="post-new-form" method="post" class="max-w-[768px] mx-auto pb-[48px]">'
-        f'<input type="hidden" name="csrf_token" value="{csrf}">'
-        '<input type="hidden" id="lexical-json-input" name="lexical" value="">'
-        '<input type="hidden" id="feature-image-input" name="feature_image" value="">'
-        '<input type="hidden" id="feature-image-caption-input" name="feature_image_caption" value="">'
-    )
-
-    # Feature image section
-    parts.append(
-        '<div id="feature-image-container" class="relative mt-[16px] mb-[24px] group">'
-        # Empty state
-        '<div id="feature-image-empty">'
-        '<button type="button" id="feature-image-add-btn"'
-        ' class="text-[14px] text-stone-400 hover:text-stone-600 transition-colors cursor-pointer"'
-        '>+ Add feature image</button></div>'
-        # Filled state
-        '<div id="feature-image-filled" class="relative hidden">'
-        '<img id="feature-image-preview" src="" alt=""'
-        ' class="w-full max-h-[448px] object-cover rounded-[8px] cursor-pointer">'
-        '<button type="button" id="feature-image-delete-btn"'
-        ' class="absolute top-[8px] right-[8px] w-[32px] h-[32px] rounded-full bg-black/50 text-white'
+    # Form structure
+    form_html = sexp(
+        '(form :id "post-new-form" :method "post" :class "max-w-[768px] mx-auto pb-[48px]"'
+        '  (input :type "hidden" :name "csrf_token" :value csrf)'
+        '  (input :type "hidden" :id "lexical-json-input" :name "lexical" :value "")'
+        '  (input :type "hidden" :id "feature-image-input" :name "feature_image" :value "")'
+        '  (input :type "hidden" :id "feature-image-caption-input" :name "feature_image_caption" :value "")'
+        '  (div :id "feature-image-container" :class "relative mt-[16px] mb-[24px] group"'
+        '    (div :id "feature-image-empty"'
+        '      (button :type "button" :id "feature-image-add-btn"'
+        '        :class "text-[14px] text-stone-400 hover:text-stone-600 transition-colors cursor-pointer"'
+        '        "+ Add feature image"))'
+        '    (div :id "feature-image-filled" :class "relative hidden"'
+        '      (img :id "feature-image-preview" :src "" :alt ""'
+        '        :class "w-full max-h-[448px] object-cover rounded-[8px] cursor-pointer")'
+        '      (button :type "button" :id "feature-image-delete-btn"'
+        '        :class "absolute top-[8px] right-[8px] w-[32px] h-[32px] rounded-full bg-black/50 text-white'
         ' flex items-center justify-center opacity-0 group-hover:opacity-100'
         ' transition-opacity hover:bg-black/70 cursor-pointer text-[14px]"'
-        ' title="Remove feature image">'
-        '<i class="fa-solid fa-trash-can"></i></button>'
-        '<input type="text" id="feature-image-caption" value=""'
-        ' placeholder="Add a caption..."'
-        ' class="mt-[8px] w-full text-[14px] text-stone-500 bg-transparent border-none'
-        ' outline-none placeholder:text-stone-300 focus:text-stone-700">'
-        '</div>'
-        # Upload spinner
-        '<div id="feature-image-uploading"'
-        ' class="hidden flex items-center gap-[8px] mt-[8px] text-[14px] text-stone-400">'
-        '<i class="fa-solid fa-spinner fa-spin"></i> Uploading...</div>'
-        # Hidden file input
-        '<input type="file" id="feature-image-file"'
-        ' accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml" class="hidden">'
-        '</div>'
-    )
-
-    # Title
-    parts.append(
-        f'<input type="text" name="title" value="" placeholder="{title_placeholder}"'
-        ' class="w-full text-[36px] font-bold bg-transparent border-none outline-none'
-        ' placeholder:text-stone-300 mb-[8px] leading-tight">'
-    )
-
-    # Excerpt
-    parts.append(
-        '<textarea name="custom_excerpt" rows="1" placeholder="Add an excerpt..."'
-        ' class="w-full text-[18px] text-stone-500 bg-transparent border-none outline-none'
-        ' placeholder:text-stone-300 resize-none mb-[24px] leading-relaxed"></textarea>'
-    )
-
-    # Editor mount point
-    parts.append('<div id="lexical-editor" class="relative w-full bg-transparent"></div>')
-
-    # Status + Save footer
-    parts.append(
-        '<div class="flex items-center gap-[16px] mt-[32px] pt-[16px] border-t border-stone-200">'
-        '<select name="status"'
-        ' class="text-[14px] rounded-[4px] border border-stone-200 px-[8px] py-[6px] bg-white text-stone-600">'
-        '<option value="draft" selected>Draft</option>'
-        '<option value="published">Published</option></select>'
-        '<button type="submit"'
-        ' class="px-[20px] py-[6px] bg-stone-700 text-white text-[14px] rounded-[8px]'
-        f' hover:bg-stone-800 transition-colors cursor-pointer">{create_label}</button>'
-        '</div></form>'
+        '        :title "Remove feature image"'
+        '        (i :class "fa-solid fa-trash-can"))'
+        '      (input :type "text" :id "feature-image-caption" :value ""'
+        '        :placeholder "Add a caption..."'
+        '        :class "mt-[8px] w-full text-[14px] text-stone-500 bg-transparent border-none'
+        ' outline-none placeholder:text-stone-300 focus:text-stone-700"))'
+        '    (div :id "feature-image-uploading"'
+        '      :class "hidden flex items-center gap-[8px] mt-[8px] text-[14px] text-stone-400"'
+        '      (i :class "fa-solid fa-spinner fa-spin") " Uploading...")'
+        '    (input :type "file" :id "feature-image-file"'
+        '      :accept "image/jpeg,image/png,image/gif,image/webp,image/svg+xml" :class "hidden"))'
+        '  (input :type "text" :name "title" :value "" :placeholder tp'
+        '    :class "w-full text-[36px] font-bold bg-transparent border-none outline-none'
+        ' placeholder:text-stone-300 mb-[8px] leading-tight")'
+        '  (textarea :name "custom_excerpt" :rows "1" :placeholder "Add an excerpt..."'
+        '    :class "w-full text-[18px] text-stone-500 bg-transparent border-none outline-none'
+        ' placeholder:text-stone-300 resize-none mb-[24px] leading-relaxed")'
+        '  (div :id "lexical-editor" :class "relative w-full bg-transparent")'
+        '  (div :class "flex items-center gap-[16px] mt-[32px] pt-[16px] border-t border-stone-200"'
+        '    (select :name "status"'
+        '      :class "text-[14px] rounded-[4px] border border-stone-200 px-[8px] py-[6px] bg-white text-stone-600"'
+        '      (option :value "draft" :selected t "Draft")'
+        '      (option :value "published" "Published"))'
+        '    (button :type "submit"'
+        '      :class "px-[20px] py-[6px] bg-stone-700 text-white text-[14px] rounded-[8px]'
+        ' hover:bg-stone-800 transition-colors cursor-pointer" cl)))',
+        csrf=csrf, tp=title_placeholder, cl=create_label, t=True,
     )
+    parts.append(form_html)
 
     # Editor CSS + inline styles
-    parts.append(
-        f'<link rel="stylesheet" href="{editor_css}">'
-        '<style>'
-        '#lexical-editor { display: flow-root; }'
-        '#lexical-editor [data-kg-card="html"] * { float: none !important; }'
-        '#lexical-editor [data-kg-card="html"] table { width: 100% !important; }'
-        '</style>'
-    )
+    parts.append(sexp(
+        '(<> (link :rel "stylesheet" :href ecss)'
+        '  (style'
+        '    "#lexical-editor { display: flow-root; }"'
+        '    "#lexical-editor [data-kg-card=\\"html\\"] * { float: none !important; }"'
+        '    "#lexical-editor [data-kg-card=\\"html\\"] table { width: 100% !important; }"))',
+        ecss=editor_css,
+    ))
 
-    # Editor JS + init script
-    # NOTE: JavaScript string literals use single quotes; Python f-string injects URLs.
+    # Editor JS + init script — kept as raw HTML due to complex JS with quotes
+    parts.append(sexp('(script :src ejs)', ejs=editor_js))
     parts.append(
-        f'<script src="{editor_js}"></script>'
         "<script>\n"
         "(function() {\n"
         "  function applyEditorFontSize() {\n"
@@ -2116,7 +2213,7 @@ def render_menu_items_nav_oob(menu_items, ctx: dict | None = None) -> str:
     from quart import request as qrequest
 
     if not menu_items:
-        return '<div id="menu-items-nav-wrapper" hx-swap-oob="outerHTML"></div>'
+        return sexp('(div :id "menu-items-nav-wrapper" :hx-swap-oob "outerHTML")')
 
     # Resolve URL helpers from context or fall back to template globals
     if ctx is None:
@@ -2138,35 +2235,23 @@ def render_menu_items_nav_oob(menu_items, ctx: dict | None = None) -> str:
     container_id = "menu-items-container"
     arrow_cls = f"scrolling-menu-arrow-{container_id}"
 
-    parts = [
-        '<div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"'
-        ' id="menu-items-nav-wrapper" hx-swap-oob="outerHTML">',
-        # Left arrow
-        f'<button class="{arrow_cls} hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"'
-        f' aria-label="Scroll left"'
-        f' _="on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft - 200">'
-        f'<i class="fa fa-chevron-left"></i></button>',
-        # Scrollable container
-        f'<div id="{container_id}"'
-        f' class="overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"'
-        f' style="scroll-behavior: smooth;"'
-        f' _="on load or scroll'
-        f' if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth'
-        f' remove .hidden from .{arrow_cls} add .flex to .{arrow_cls}'
-        f' else add .hidden to .{arrow_cls} remove .flex from .{arrow_cls} end">',
-        '<div class="flex flex-col sm:flex-row gap-1">',
-    ]
+    scroll_hs = (
+        f"on load or scroll"
+        f" if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth"
+        f" remove .hidden from .{arrow_cls} add .flex to .{arrow_cls}"
+        f" else add .hidden to .{arrow_cls} remove .flex from .{arrow_cls} end"
+    )
 
     blog_url_fn = ctx.get("blog_url")
     cart_url_fn = ctx.get("cart_url")
     app_name = ctx.get("app_name", "")
 
+    item_parts = []
     for item in menu_items:
         item_slug = getattr(item, "slug", "") if hasattr(item, "slug") else item.get("slug", "")
         label = getattr(item, "label", "") if hasattr(item, "label") else item.get("label", "")
         fi = getattr(item, "feature_image", None) if hasattr(item, "feature_image") else item.get("feature_image")
 
-        # Determine href — cart slug maps to cart_url, others to blog_url
         if item_slug == "cart" and cart_url_fn:
             href = cart_url_fn("/")
         elif blog_url_fn:
@@ -2176,44 +2261,53 @@ def render_menu_items_nav_oob(menu_items, ctx: dict | None = None) -> str:
 
         selected = "true" if (item_slug == first_seg or item_slug == app_name) else "false"
 
-        if fi:
-            img = f'<img src="{fi}" alt="{escape(label)}" class="w-8 h-8 rounded-full object-cover flex-shrink-0" />'
-        else:
-            img = '<div class="w-8 h-8 rounded-full bg-stone-200 flex-shrink-0"></div>'
-
-        # Items that are not special app slugs get htmx attributes
-        htmx_attrs = ""
-        if item_slug != "cart":
-            htmx_attrs = (
-                f' hx-get="/{item_slug}/" hx-target="#main-panel"'
-                f' hx-swap="outerHTML" hx-push-url="true"'
-            )
-
-        parts.append(
-            f'<div><a href="{href}"{htmx_attrs}'
-            f' aria-selected="{selected}" class="{nav_button_cls}">'
-            f'{img}<span>{escape(label)}</span></a></div>'
+        img_html = sexp(
+            '(if fi (img :src fi :alt lb :class "w-8 h-8 rounded-full object-cover flex-shrink-0")'
+            '  (div :class "w-8 h-8 rounded-full bg-stone-200 flex-shrink-0"))',
+            fi=fi, lb=label,
         )
 
-    parts.append('</div></div>')  # close flex-col + scroll container
+        if item_slug != "cart":
+            item_parts.append(sexp(
+                '(div (a :href h :hx-get hg :hx-target "#main-panel"'
+                '  :hx-swap "outerHTML" :hx-push-url "true"'
+                '  :aria-selected sel :class nc'
+                '  (raw! im) (span lb)))',
+                h=href, hg=f"/{item_slug}/", sel=selected, nc=nav_button_cls,
+                im=img_html, lb=label,
+            ))
+        else:
+            item_parts.append(sexp(
+                '(div (a :href h :aria-selected sel :class nc'
+                '  (raw! im) (span lb)))',
+                h=href, sel=selected, nc=nav_button_cls,
+                im=img_html, lb=label,
+            ))
 
-    # scrollbar-hide style
-    parts.append(
-        '<style>.scrollbar-hide::-webkit-scrollbar { display: none; }'
-        ' .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }</style>'
+    items_html = "".join(item_parts)
+
+    return sexp(
+        '(div :class "flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"'
+        '  :id "menu-items-nav-wrapper" :hx-swap-oob "outerHTML"'
+        '  (button :class (str ac " hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded")'
+        '    :aria-label "Scroll left"'
+        '    :_ lhs (i :class "fa fa-chevron-left"))'
+        '  (div :id cid'
+        '    :class "overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"'
+        '    :style "scroll-behavior: smooth;" :_ shs'
+        '    (div :class "flex flex-col sm:flex-row gap-1" (raw! items)))'
+        '  (style ".scrollbar-hide::-webkit-scrollbar { display: none; }'
+        ' .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }")'
+        '  (button :class (str ac " hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded")'
+        '    :aria-label "Scroll right"'
+        '    :_ rhs (i :class "fa fa-chevron-right")))',
+        ac=arrow_cls, cid=container_id,
+        lhs=f"on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft - 200",
+        shs=scroll_hs,
+        rhs=f"on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft + 200",
+        items=items_html,
     )
 
-    # Right arrow
-    parts.append(
-        f'<button class="{arrow_cls} hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"'
-        f' aria-label="Scroll right"'
-        f' _="on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft + 200">'
-        f'<i class="fa fa-chevron-right"></i></button>'
-    )
-
-    parts.append('</div>')  # close wrapper
-    return "".join(parts)
-
 
 # ---- Features panel ----
 
@@ -2229,71 +2323,70 @@ def render_features_panel(features: dict, post: dict,
     features_url = host_url(qurl("blog.post.admin.update_features", slug=slug))
     sumup_url = host_url(qurl("blog.post.admin.update_sumup", slug=slug))
 
-    cal_checked = " checked" if features.get("calendar") else ""
-    mkt_checked = " checked" if features.get("market") else ""
+    hs_trigger = "on change trigger submit on closest <form/>"
 
-    parts = [
-        '<div id="features-panel" class="space-y-4 p-4 bg-white rounded-lg border border-stone-200">',
-        '<h3 class="text-lg font-semibold text-stone-800">Page Features</h3>',
-        f'<form hx-put="{features_url}" hx-target="#features-panel" hx-swap="outerHTML"'
-        f' hx-headers=\'{{\"Content-Type\": \"application/json\"}}\' hx-ext="json-enc" class="space-y-3">',
-        # Calendar checkbox
-        '<label class="flex items-center gap-3 cursor-pointer">'
-        f'<input type="checkbox" name="calendar" value="true"{cal_checked}'
-        ' class="h-5 w-5 rounded border-stone-300 text-blue-600 focus:ring-blue-500"'
-        ' _="on change trigger submit on closest &lt;form/&gt;">'
-        '<span class="text-sm text-stone-700">'
-        '<i class="fa fa-calendar text-blue-600 mr-1"></i>'
-        ' Calendar \u2014 enable event booking on this page</span></label>',
-        # Market checkbox
-        '<label class="flex items-center gap-3 cursor-pointer">'
-        f'<input type="checkbox" name="market" value="true"{mkt_checked}'
-        ' class="h-5 w-5 rounded border-stone-300 text-green-600 focus:ring-green-500"'
-        ' _="on change trigger submit on closest &lt;form/&gt;">'
-        '<span class="text-sm text-stone-700">'
-        '<i class="fa fa-shopping-bag text-green-600 mr-1"></i>'
-        ' Market \u2014 enable product catalog on this page</span></label>',
-        '</form>',
-    ]
+    form_html = sexp(
+        '(form :hx-put fu :hx-target "#features-panel" :hx-swap "outerHTML"'
+        '  :hx-headers "{\\\"Content-Type\\\": \\\"application/json\\\"}" :hx-ext "json-enc" :class "space-y-3"'
+        '  (label :class "flex items-center gap-3 cursor-pointer"'
+        '    (input :type "checkbox" :name "calendar" :value "true" :checked cc'
+        '      :class "h-5 w-5 rounded border-stone-300 text-blue-600 focus:ring-blue-500"'
+        '      :_ ht)'
+        '    (span :class "text-sm text-stone-700"'
+        '      (i :class "fa fa-calendar text-blue-600 mr-1")'
+        '      " Calendar \u2014 enable event booking on this page"))'
+        '  (label :class "flex items-center gap-3 cursor-pointer"'
+        '    (input :type "checkbox" :name "market" :value "true" :checked mc'
+        '      :class "h-5 w-5 rounded border-stone-300 text-green-600 focus:ring-green-500"'
+        '      :_ ht)'
+        '    (span :class "text-sm text-stone-700"'
+        '      (i :class "fa fa-shopping-bag text-green-600 mr-1")'
+        '      " Market \u2014 enable product catalog on this page")))',
+        fu=features_url, cc=bool(features.get("calendar")), mc=bool(features.get("market")),
+        ht=hs_trigger,
+    )
 
-    # SumUp section — shown when calendar or market is enabled
+    sumup_html = ""
     if features.get("calendar") or features.get("market"):
-        placeholder = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" if sumup_configured else "sup_sk_..."
-        connected = (
-            '<span class="ml-2 text-xs text-green-600">'
-            '<i class="fa fa-check-circle"></i> Connected</span>'
+        placeholder = "\u2022" * 8 if sumup_configured else "sup_sk_..."
+        connected = sexp(
+            '(span :class "ml-2 text-xs text-green-600" (i :class "fa fa-check-circle") " Connected")',
         ) if sumup_configured else ""
-        key_hint = (
-            '<p class="text-xs text-stone-400 mt-0.5">Key is set. Leave blank to keep current key.</p>'
+        key_hint = sexp(
+            '(p :class "text-xs text-stone-400 mt-0.5" "Key is set. Leave blank to keep current key.")',
         ) if sumup_configured else ""
 
-        parts.append(
-            '<div class="mt-4 pt-4 border-t border-stone-100">'
-            '<h4 class="text-sm font-medium text-stone-700">'
-            '<i class="fa fa-credit-card text-purple-600 mr-1"></i> SumUp Payment</h4>'
-            '<p class="text-xs text-stone-400 mt-1 mb-3">'
-            'Configure per-page SumUp credentials. Leave blank to use the global merchant account.</p>'
-            f'<form hx-put="{sumup_url}" hx-target="#features-panel" hx-swap="outerHTML" class="space-y-3">'
-            '<div><label class="block text-xs font-medium text-stone-600 mb-1">Merchant Code</label>'
-            f'<input type="text" name="merchant_code" value="{escape(sumup_merchant_code)}"'
-            ' placeholder="e.g. ME4J6100"'
-            ' class="w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500"></div>'
-            '<div><label class="block text-xs font-medium text-stone-600 mb-1">API Key</label>'
-            f'<input type="password" name="api_key" value="" placeholder="{placeholder}"'
-            ' class="w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500">'
-            f'{key_hint}</div>'
-            '<div><label class="block text-xs font-medium text-stone-600 mb-1">Checkout Reference Prefix</label>'
-            f'<input type="text" name="checkout_prefix" value="{escape(sumup_checkout_prefix)}"'
-            ' placeholder="e.g. ROSE-"'
-            ' class="w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500"></div>'
-            '<button type="submit"'
-            ' class="px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded hover:bg-purple-700 focus:ring-2 focus:ring-purple-500">'
-            'Save SumUp Settings</button>'
-            f'{connected}</form></div>'
+        sumup_html = sexp(
+            '(div :class "mt-4 pt-4 border-t border-stone-100"'
+            '  (h4 :class "text-sm font-medium text-stone-700"'
+            '    (i :class "fa fa-credit-card text-purple-600 mr-1") " SumUp Payment")'
+            '  (p :class "text-xs text-stone-400 mt-1 mb-3"'
+            '    "Configure per-page SumUp credentials. Leave blank to use the global merchant account.")'
+            '  (form :hx-put su :hx-target "#features-panel" :hx-swap "outerHTML" :class "space-y-3"'
+            '    (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Merchant Code")'
+            '      (input :type "text" :name "merchant_code" :value smc :placeholder "e.g. ME4J6100"'
+            '        :class "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500"))'
+            '    (div (label :class "block text-xs font-medium text-stone-600 mb-1" "API Key")'
+            '      (input :type "password" :name "api_key" :value "" :placeholder ph'
+            '        :class "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500")'
+            '      (raw! kh))'
+            '    (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Checkout Reference Prefix")'
+            '      (input :type "text" :name "checkout_prefix" :value scp :placeholder "e.g. ROSE-"'
+            '        :class "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500"))'
+            '    (button :type "submit"'
+            '      :class "px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded hover:bg-purple-700 focus:ring-2 focus:ring-purple-500"'
+            '      "Save SumUp Settings")'
+            '    (raw! cn)))',
+            su=sumup_url, smc=sumup_merchant_code, ph=placeholder,
+            kh=key_hint, scp=sumup_checkout_prefix, cn=connected,
         )
 
-    parts.append('</div>')
-    return "".join(parts)
+    return sexp(
+        '(div :id "features-panel" :class "space-y-4 p-4 bg-white rounded-lg border border-stone-200"'
+        '  (h3 :class "text-lg font-semibold text-stone-800" "Page Features")'
+        '  (raw! fh) (raw! sh))',
+        fh=form_html, sh=sumup_html,
+    )
 
 
 # ---- Markets panel ----
@@ -2306,36 +2399,40 @@ def render_markets_panel(markets, post: dict) -> str:
     slug = post.get("slug", "")
     create_url = host_url(qurl("blog.post.admin.create_market", slug=slug))
 
-    parts = ['<div id="markets-panel">',
-             '<h3 class="text-lg font-semibold mb-3">Markets</h3>']
-
+    list_html = ""
     if markets:
-        parts.append('<ul class="space-y-2 mb-4">')
+        li_parts = []
         for m in markets:
             m_name = getattr(m, "name", "") if hasattr(m, "name") else m.get("name", "")
             m_slug = getattr(m, "slug", "") if hasattr(m, "slug") else m.get("slug", "")
             del_url = host_url(qurl("blog.post.admin.delete_market", slug=slug, market_slug=m_slug))
-            parts.append(
-                f'<li class="flex items-center justify-between p-3 bg-stone-50 rounded">'
-                f'<div><span class="font-medium">{escape(m_name)}</span>'
-                f'<span class="text-stone-400 text-sm ml-2">/{escape(m_slug)}/</span></div>'
-                f'<button hx-delete="{del_url}" hx-target="#markets-panel" hx-swap="outerHTML"'
-                f' hx-confirm="Delete market \'{escape(m_name)}\'?"'
-                f' class="text-red-600 hover:text-red-800 text-sm">Delete</button></li>'
-            )
-        parts.append('</ul>')
+            li_parts.append(sexp(
+                '(li :class "flex items-center justify-between p-3 bg-stone-50 rounded"'
+                '  (div (span :class "font-medium" mn)'
+                '    (span :class "text-stone-400 text-sm ml-2" (str "/" ms "/")))'
+                '  (button :hx-delete du :hx-target "#markets-panel" :hx-swap "outerHTML"'
+                '    :hx-confirm cf :class "text-red-600 hover:text-red-800 text-sm" "Delete"))',
+                mn=m_name, ms=m_slug, du=del_url,
+                cf=f"Delete market '{m_name}'?",
+            ))
+        list_html = sexp(
+            '(ul :class "space-y-2 mb-4" (raw! items))',
+            items="".join(li_parts),
+        )
     else:
-        parts.append('<p class="text-stone-500 mb-4 text-sm">No markets yet.</p>')
+        list_html = sexp('(p :class "text-stone-500 mb-4 text-sm" "No markets yet.")')
 
-    parts.append(
-        f'<form hx-post="{create_url}" hx-target="#markets-panel" hx-swap="outerHTML" class="flex gap-2">'
-        '<input type="text" name="name" placeholder="Market name" required'
-        ' class="flex-1 border border-stone-300 rounded px-3 py-1.5 text-sm" />'
-        '<button type="submit"'
-        ' class="bg-stone-800 text-white px-4 py-1.5 rounded text-sm hover:bg-stone-700">Create</button>'
-        '</form></div>'
+    return sexp(
+        '(div :id "markets-panel"'
+        '  (h3 :class "text-lg font-semibold mb-3" "Markets")'
+        '  (raw! lh)'
+        '  (form :hx-post cu :hx-target "#markets-panel" :hx-swap "outerHTML" :class "flex gap-2"'
+        '    (input :type "text" :name "name" :placeholder "Market name" :required ""'
+        '      :class "flex-1 border border-stone-300 rounded px-3 py-1.5 text-sm")'
+        '    (button :type "submit"'
+        '      :class "bg-stone-800 text-white px-4 py-1.5 rounded text-sm hover:bg-stone-700" "Create")))',
+        lh=list_html, cu=create_url,
     )
-    return "".join(parts)
 
 
 # ---- Associated entries ----
@@ -2348,11 +2445,8 @@ def render_associated_entries(all_calendars, associated_entry_ids, post_slug: st
 
     csrf = generate_csrf_token()
 
-    parts = ['<div id="associated-entries-list" class="border rounded-lg p-4 bg-white">',
-             '<h3 class="text-lg font-semibold mb-4">Associated Entries</h3>']
-
     has_entries = False
-    entry_parts: list[str] = []
+    entry_items: list[str] = []
     for calendar in all_calendars:
         entries = getattr(calendar, "entries", []) or []
         cal_name = getattr(calendar, "name", "")
@@ -2373,48 +2467,56 @@ def render_associated_entries(all_calendars, associated_entry_ids, post_slug: st
 
             toggle_url = host_url(qurl("blog.post.admin.toggle_entry", slug=post_slug, entry_id=e_id))
 
-            if cal_fi:
-                img = f'<img src="{cal_fi}" alt="{escape(cal_title)}" class="w-8 h-8 rounded-full object-cover flex-shrink-0" />'
-            else:
-                img = '<div class="w-8 h-8 rounded-full bg-stone-200 flex-shrink-0"></div>'
+            img_html = sexp(
+                '(if fi (img :src fi :alt ct :class "w-8 h-8 rounded-full object-cover flex-shrink-0")'
+                '  (div :class "w-8 h-8 rounded-full bg-stone-200 flex-shrink-0"))',
+                fi=cal_fi, ct=cal_title,
+            )
 
             date_str = e_start.strftime("%A, %B %d, %Y at %H:%M") if e_start else ""
             if e_end:
                 date_str += f" \u2013 {e_end.strftime('%H:%M')}"
 
-            entry_parts.append(
-                f'<button type="button"'
-                f' class="w-full text-left p-3 rounded border bg-green-50 border-green-300 transition hover:bg-green-100"'
-                f' data-confirm data-confirm-title="Remove entry?"'
-                f' data-confirm-text="This will remove {escape(e_name)} from this post"'
-                f' data-confirm-icon="warning" data-confirm-confirm-text="Yes, remove it"'
-                f' data-confirm-cancel-text="Cancel" data-confirm-event="confirmed"'
-                f' hx-post="{toggle_url}" hx-trigger="confirmed"'
-                f' hx-target="#associated-entries-list" hx-swap="outerHTML"'
-                f' hx-headers=\'{{\"X-CSRFToken\": \"{csrf}\"}}\''
-                f' _="on htmx:afterRequest trigger entryToggled on body">'
-                f'<div class="flex items-center justify-between gap-3">'
-                f'{img}'
-                f'<div class="flex-1">'
-                f'<div class="font-medium text-sm">{escape(e_name)}</div>'
-                f'<div class="text-xs text-stone-600 mt-1">{escape(cal_name)} \u2022 {date_str}</div>'
-                f'</div>'
-                f'<i class="fa fa-times-circle text-green-600 text-lg flex-shrink-0"></i>'
-                f'</div></button>'
-            )
+            entry_items.append(sexp(
+                '(button :type "button"'
+                '  :class "w-full text-left p-3 rounded border bg-green-50 border-green-300 transition hover:bg-green-100"'
+                '  :data-confirm "" :data-confirm-title "Remove entry?"'
+                '  :data-confirm-text ct :data-confirm-icon "warning"'
+                '  :data-confirm-confirm-text "Yes, remove it"'
+                '  :data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"'
+                '  :hx-post tu :hx-trigger "confirmed"'
+                '  :hx-target "#associated-entries-list" :hx-swap "outerHTML"'
+                '  :hx-headers hh'
+                '  :_ "on htmx:afterRequest trigger entryToggled on body"'
+                '  (div :class "flex items-center justify-between gap-3"'
+                '    (raw! im)'
+                '    (div :class "flex-1"'
+                '      (div :class "font-medium text-sm" en)'
+                '      (div :class "text-xs text-stone-600 mt-1" ds))'
+                '    (i :class "fa fa-times-circle text-green-600 text-lg flex-shrink-0")))',
+                ct=f"This will remove {e_name} from this post",
+                tu=toggle_url, hh=f'{{"X-CSRFToken": "{csrf}"}}',
+                im=img_html, en=e_name,
+                ds=f"{cal_name} \u2022 {date_str}",
+            ))
 
     if has_entries:
-        parts.append('<div class="space-y-1">')
-        parts.extend(entry_parts)
-        parts.append('</div>')
+        content_html = sexp(
+            '(div :class "space-y-1" (raw! items))',
+            items="".join(entry_items),
+        )
     else:
-        parts.append(
-            '<div class="text-sm text-stone-400">No entries associated yet.'
-            ' Browse calendars below to add entries.</div>'
+        content_html = sexp(
+            '(div :class "text-sm text-stone-400"'
+            '  "No entries associated yet. Browse calendars below to add entries.")',
         )
 
-    parts.append('</div>')
-    return "".join(parts)
+    return sexp(
+        '(div :id "associated-entries-list" :class "border rounded-lg p-4 bg-white"'
+        '  (h3 :class "text-lg font-semibold mb-4" "Associated Entries")'
+        '  (raw! ch))',
+        ch=content_html,
+    )
 
 
 # ---- Nav entries OOB ----
@@ -2435,7 +2537,7 @@ def render_nav_entries_oob(associated_entries, calendars, post: dict, ctx: dict
     has_items = bool(entries_list or calendars)
 
     if not has_items:
-        return '<div id="entries-calendars-nav-wrapper" hx-swap-oob="true"></div>'
+        return sexp('(div :id "entries-calendars-nav-wrapper" :hx-swap-oob "true")')
 
     events_url_fn = ctx.get("events_url")
 
@@ -2452,24 +2554,14 @@ def render_nav_entries_oob(associated_entries, calendars, post: dict, ctx: dict
 
     post_slug = post.get("slug", "")
 
-    parts = [
-        '<div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"'
-        ' id="entries-calendars-nav-wrapper" hx-swap-oob="true">',
-        # Left arrow
-        '<button class="entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"'
-        ' aria-label="Scroll left"'
-        ' _="on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200">'
-        '<i class="fa fa-chevron-left"></i></button>',
-        # Container
-        '<div id="associated-items-container"'
-        ' class="overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"'
-        ' style="scroll-behavior: smooth;"'
-        ' _="on load or scroll'
-        ' if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth'
-        ' remove .hidden from .entries-nav-arrow add .flex to .entries-nav-arrow'
-        ' else add .hidden to .entries-nav-arrow remove .flex from .entries-nav-arrow end">',
-        '<div class="flex flex-col sm:flex-row gap-1">',
-    ]
+    scroll_hs = (
+        "on load or scroll"
+        " if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth"
+        " remove .hidden from .entries-nav-arrow add .flex to .entries-nav-arrow"
+        " else add .hidden to .entries-nav-arrow remove .flex from .entries-nav-arrow end"
+    )
+
+    item_parts = []
 
     # Entry links
     for entry in entries_list:
@@ -2493,14 +2585,14 @@ def render_nav_entries_oob(associated_entries, calendars, post: dict, ctx: dict
 
         href = events_url_fn(entry_path) if events_url_fn else entry_path
 
-        parts.append(
-            f'<a href="{href}" class="{nav_cls}">'
-            f'<div class="w-8 h-8 rounded bg-stone-200 flex-shrink-0"></div>'
-            f'<div class="flex-1 min-w-0">'
-            f'<div class="font-medium truncate">{escape(e_name)}</div>'
-            f'<div class="text-xs text-stone-600 truncate">{date_str}</div>'
-            f'</div></a>'
-        )
+        item_parts.append(sexp(
+            '(a :href h :class nc'
+            '  (div :class "w-8 h-8 rounded bg-stone-200 flex-shrink-0")'
+            '  (div :class "flex-1 min-w-0"'
+            '    (div :class "font-medium truncate" en)'
+            '    (div :class "text-xs text-stone-600 truncate" ds)))',
+            h=href, nc=nav_cls, en=e_name, ds=date_str,
+        ))
 
     # Calendar links
     for calendar in (calendars or []):
@@ -2509,27 +2601,31 @@ def render_nav_entries_oob(associated_entries, calendars, post: dict, ctx: dict
         cal_path = f"/{post_slug}/calendars/{cal_slug}/"
         href = events_url_fn(cal_path) if events_url_fn else cal_path
 
-        parts.append(
-            f'<a href="{href}" class="{nav_cls}">'
-            f'<i class="fa fa-calendar" aria-hidden="true"></i>'
-            f'<div>{escape(cal_name)}</div></a>'
-        )
+        item_parts.append(sexp(
+            '(a :href h :class nc'
+            '  (i :class "fa fa-calendar" :aria-hidden "true")'
+            '  (div cn))',
+            h=href, nc=nav_cls, cn=cal_name,
+        ))
 
-    parts.append('</div></div>')  # close flex + container
+    items_html = "".join(item_parts)
 
-    # Scrollbar style
-    parts.append(
-        '<style>.scrollbar-hide::-webkit-scrollbar { display: none; }'
-        ' .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }</style>'
+    return sexp(
+        '(div :class "flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"'
+        '  :id "entries-calendars-nav-wrapper" :hx-swap-oob "true"'
+        '  (button :class "entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"'
+        '    :aria-label "Scroll left"'
+        '    :_ "on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200"'
+        '    (i :class "fa fa-chevron-left"))'
+        '  (div :id "associated-items-container"'
+        '    :class "overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"'
+        '    :style "scroll-behavior: smooth;" :_ shs'
+        '    (div :class "flex flex-col sm:flex-row gap-1" (raw! items)))'
+        '  (style ".scrollbar-hide::-webkit-scrollbar { display: none; }'
+        ' .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }")'
+        '  (button :class "entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"'
+        '    :aria-label "Scroll right"'
+        '    :_ "on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft + 200"'
+        '    (i :class "fa fa-chevron-right")))',
+        shs=scroll_hs, items=items_html,
     )
-
-    # Right arrow
-    parts.append(
-        '<button class="entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"'
-        ' aria-label="Scroll right"'
-        ' _="on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft + 200">'
-        '<i class="fa fa-chevron-right"></i></button>'
-    )
-
-    parts.append('</div>')
-    return "".join(parts)