Hono + Datastar Showcase

Datastar v1 patterns with OpenAPI content negotiation and D1 persistence

Hono Datastar v1 RC.7 Cloudflare D1 Workers OpenAPI 3.1 Better Auth MCP Drizzle ORM
ADMIN
Counter

Counter

The core counter backed by D1 (SQLite). Every action is an atomic SQL update.
data-signals data-text data-on:click data-init data-class data-show data-attr data-bind data-on:keydown.window

Set Value
Keyboard Shortcuts
+ Increment - Decrement 0 Reset
Last key:

Counter Insights

Derived values, conditional messages, and reactive styles — all driven by the counter signal.
data-computed data-show data-style

Absolute
Parity
Sign
Messages
Counter is positive
Counter is negative
Counter is zero
Even number
Progress Bar
Each count = 10% width (capped at 100%)
Notes

Notes

Full CRUD with server-rendered list items. Form submit creates; delete button removes. Server re-renders the full list on each mutation — no client-side templating.
@post @delete datastar-patch-elements

notes
More Patterns

Server Fragment

Server renders HTML via SSE datastar-patch-elements. Datastar patches it into the DOM using Idiomorph.
datastar-patch-elements data-effect

Click to load server-rendered fragment
Side effect: the browser tab title updates with the count.

Interval Timer

Client-side clock that ticks every second. No server requests — pure reactive interval.
data-on-interval .duration

Page open for seconds

Debounce

Output updates 500ms after you stop typing. The .debounce modifier handles timing automatically.
.debounce

Debounced:
Tasks
Sign in to access Tasks and Admin features.

Tasks

Authenticated task CRUD. Same Zod schemas power both this REST API and the MCP tools for AI agents.
Drizzle ORM @post / @patch / @delete MCP Tools

  • Sign in to see tasks
0 tasks

Admin Panel

Manage users via Better Auth admin plugin. Only visible to admin role.
Better Auth Admin data-show fetch()

  • Click "Refresh Users" to load

My Sessions

Active sessions across all your devices. Revoke any session to log it out remotely.
Multi-Session SSE Polling Remote Revocation

  • Loading sessions...
0 active sessions
Developer Tools

Signal Inspector

Live JSON dump of every signal in the store. Updates in real-time as you interact with the page.
data-json-signals


        
API Docs OpenAPI Spec API JSON