Templ Counter
HTML #
1<div
2 style="display: flex; gap: var(--size-6)"
3 data-on-load="@get('/examples/templ_counter/updates')"
4>
5 <!-- Global Counter -->
6 <button
7 id="global"
8 class="info"
9 data-on-click="@patch('/examples/templ_counter/global')"
10 >
11 Global Clicks: 0
12 </button>
13
14 <!-- User Counter -->
15 <button
16 id="user"
17 class="success"
18 data-on-click="@patch('/examples/templ_counter/user')"
19 >
20 User Clicks: 0
21 </button>
22</div>
Explanation #
This example demonstrates two counters - a global counter shared across all users and a user-specific counter. The counters are updated via server-sent events (SSE) and increment when clicked.