diff --git a/examples/kanban/src/main.rs b/examples/kanban/src/main.rs
index 1e3dfa0..743734e 100644
--- a/examples/kanban/src/main.rs
+++ b/examples/kanban/src/main.rs
@@ -4,7 +4,7 @@ use axum::routing::get;
 use axum::Router;
 use futures_util::{stream, StreamExt};
 use hemplate::Hemplate;
-use slhx::{IntoEffect, SafeHtml};
+use slhx::{Handle, IntoEffect, SafeHtml};
 use slhx_axum::{runtime_js, sse, DispatchRejection, EffectResponse, HandlerRegistry, InteractionForm, PageRequest};
 use slhx_kanban_example::ui;
 use std::collections::BTreeMap;
@@ -51,9 +51,9 @@ struct BoardColumn {
 struct BoardCard {
     id: u64,
     title: String,
-    left_handle: u32,
-    right_handle: u32,
-    delete_handle: u32,
+    left_handle: Handle<()>,
+    right_handle: Handle<()>,
+    delete_handle: Handle<()>,
     left_disabled: bool,
     right_disabled: bool,
 }
@@ -292,9 +292,9 @@ fn render_card(card: &Card) -> BoardCard {
     BoardCard {
         id: card.id,
         title: card.title.clone(),
-        left_handle: ui::board::handles::move_left.id().id,
-        right_handle: ui::board::handles::move_right.id().id,
-        delete_handle: ui::board::handles::delete_card.id().id,
+        left_handle: ui::board::handles::move_left,
+        right_handle: ui::board::handles::move_right,
+        delete_handle: ui::board::handles::delete_card,
         left_disabled: card.column == 0,
         right_disabled: card.column + 1 == COLUMNS.len(),
     }
diff --git a/examples/techdemo/src/main.rs b/examples/techdemo/src/main.rs
index cb67bdd..91883d1 100644
--- a/examples/techdemo/src/main.rs
+++ b/examples/techdemo/src/main.rs
@@ -4,7 +4,7 @@ use axum::routing::get;
 use axum::Router;
 use futures_util::{stream, StreamExt};
 use hemplate::Hemplate;
-use slhx::{CssClass, CssClasses, IntoEffect, SafeHtml};
+use slhx::{CssClass, CssClasses, Handle, IntoEffect, SafeHtml};
 use slhx_axum::{
     runtime_js, sse, DispatchRejection, EffectResponse, HandlerRegistry, InteractionForm,
     PageRequest,
@@ -102,7 +102,7 @@ struct Shared {
 struct IssueLane {
     class: CssClass,
     lane_id: &'static str,
-    move_handle: u32,
+    move_handle: Handle<()>,
     title: &'static str,
     description: &'static str,
     cards: Vec<IssueCard>,
@@ -116,9 +116,9 @@ struct IssueCard {
     title: String,
     stage: &'static str,
     impact_style: String,
-    spotlight_handle: u32,
-    advance_handle: u32,
-    delete_handle: u32,
+    spotlight_handle: Handle<()>,
+    advance_handle: Handle<()>,
+    delete_handle: Handle<()>,
 }
 
 #[derive(Hemplate)]
@@ -454,7 +454,7 @@ fn render_board(demo: &DemoState) -> SafeHtml {
         .map(|(idx, (lane_id, title, description))| IssueLane {
             class: ui::control_center::classes::lane,
             lane_id,
-            move_handle: ui::control_center::handles::move_to_lane.id().id,
+            move_handle: ui::control_center::handles::move_to_lane,
             title,
             description,
             cards: demo
@@ -483,9 +483,9 @@ fn issue_card(item: &WorkItem, selected: bool) -> IssueCard {
         title: item.title.clone(),
         stage: item.stage.label(),
         impact_style: format!("width:{}%", item.impact as usize * 11),
-        spotlight_handle: ui::control_center::handles::spotlight_work.id().id,
-        advance_handle: ui::control_center::handles::advance_work.id().id,
-        delete_handle: ui::control_center::handles::delete_work.id().id,
+        spotlight_handle: ui::control_center::handles::spotlight_work,
+        advance_handle: ui::control_center::handles::advance_work,
+        delete_handle: ui::control_center::handles::delete_work,
     }
 }
 
diff --git a/slhx-core/src/lib.rs b/slhx-core/src/lib.rs
index 48fddc5..7a6b8d9 100644
--- a/slhx-core/src/lib.rs
+++ b/slhx-core/src/lib.rs
@@ -896,6 +896,12 @@ impl<I> Handle<I> {
     }
 }
 
+impl<I> core::fmt::Display for Handle<I> {
+    fn fmt(&self, f: &mut core::fmt::Formatter<'_>) -> core::fmt::Result {
+        self.id.id.fmt(f)
+    }
+}
+
 pub trait FormValue {}
 
 impl<T> FormValue for T where T: std::str::FromStr {}
diff --git a/slhx-core/tests/effect_batch.rs b/slhx-core/tests/effect_batch.rs
index b437b37..2f8a97f 100644
--- a/slhx-core/tests/effect_batch.rs
+++ b/slhx-core/tests/effect_batch.rs
@@ -1,7 +1,7 @@
 use slhx_core::{
     event, navigate, redirect, replace, Atom, AtomSnapshot, AtomState, BuildFingerprint,
-    CssClass, CssClasses, Effect, EffectBatch, Form, IntoEffect, KeyedSlot, NavigateMode, Payload,
-    ResourceKind, SafeHtml, ScopeKey, Slot,
+    CssClass, CssClasses, Effect, EffectBatch, Form, Handle, IntoEffect, KeyedSlot, NavigateMode,
+    Payload, ResourceKind, SafeHtml, ScopeKey, Slot,
 };
 
 #[test]
@@ -93,6 +93,12 @@ fn slot_html_requires_explicit_safe_html() {
     assert_eq!(payload, Payload::Html(String::from("<strong>ok</strong>")));
 }
 
+#[test]
+fn generated_handles_format_for_hemplate_dynamic_handle_attrs() {
+    // req: public_api/001 req: public_api/002
+    assert_eq!(Handle::<()>::new(42).to_string(), "42");
+}
+
 #[test]
 fn generated_css_classes_join_for_hemplate_dynamic_class_attrs() {
     // req: style/003