Interactive Demo
Experience the power of Spry with real-time Server-Sent Events
🌌 Live Aurora Borealis
This aurora uses SSE for real-time updates! Click a button to update all connected clients.
617.9 km/s
Solar Wind
3
Waves
98%
Intensity
Mixed
Color Mode
Updates are pushed via SSE when anyone clicks the buttons. Try it from multiple browsers!
🔢 Shared Counter
A counter that syncs across all connected clients using SSE.
Current Count
⚙ How It Works
This demo showcases Server-Sent Events (SSE) for real-time updates:
Server-Sent Events
SSE pushes updates to all connected clients instantly when actions occur.
Shared State
AuroraState is a singleton - all visitors see the same aurora and counter!
Event-Driven
No polling! Updates only happen when someone clicks a button.
<!-- SSE connection on parent -->
<div hx-ext="sse" sse-connect="/sse/aurora">
<!-- Auto-updates when "aurora-canvas" event received -->
<div sse-swap="aurora-canvas">
Aurora waves render here
</div>
</div>
<!-- Button triggers action endpoint -->
<button hx-post="/aurora/action/boost" hx-swap="none">
Boost Solar Wind
</button>