From 7c06429791730c7cfcae373d51cb447815134ed9 Mon Sep 17 00:00:00 2001
From: Pablito Carvajal <vivacarvajalito@gmail.com>
Date: Mon, 20 Oct 2025 19:30:09 -0300
Subject: [PATCH] feat: example of JSX with datastar

---
 examples/jsx-file-system-router/.gitignore    |  34 ++
 examples/jsx-file-system-router/Readme.md     | 421 ++++++++++++++++++
 examples/jsx-file-system-router/app/client.ts |   2 +
 .../app/components/TypewriterExample.tsx      |  35 ++
 .../app/components/WebComponentExample.tsx    |  36 ++
 .../jsx-file-system-router/app/global.d.ts    |   8 +
 .../app/routes/_404.tsx                       |   9 +
 .../app/routes/_error.tsx                     |  12 +
 .../app/routes/_middleware.ts                 |   8 +
 .../app/routes/_renderer.tsx                  |  23 +
 .../app/routes/api/typewriter.ts              |  25 ++
 .../app/routes/index.tsx                      |  32 ++
 examples/jsx-file-system-router/app/server.ts |   8 +
 examples/jsx-file-system-router/app/style.css |   1 +
 .../app/web-components/ReverseComponent.ts    |  27 ++
 examples/jsx-file-system-router/package.json  |  23 +
 .../public/.assetsignore                      |   2 +
 .../jsx-file-system-router/public/favicon.ico | Bin 0 -> 15406 bytes
 examples/jsx-file-system-router/tsconfig.json |  28 ++
 .../jsx-file-system-router/vite.config.ts     |  22 +
 20 files changed, 756 insertions(+)
 create mode 100644 examples/jsx-file-system-router/.gitignore
 create mode 100644 examples/jsx-file-system-router/Readme.md
 create mode 100644 examples/jsx-file-system-router/app/client.ts
 create mode 100644 examples/jsx-file-system-router/app/components/TypewriterExample.tsx
 create mode 100644 examples/jsx-file-system-router/app/components/WebComponentExample.tsx
 create mode 100644 examples/jsx-file-system-router/app/global.d.ts
 create mode 100644 examples/jsx-file-system-router/app/routes/_404.tsx
 create mode 100644 examples/jsx-file-system-router/app/routes/_error.tsx
 create mode 100644 examples/jsx-file-system-router/app/routes/_middleware.ts
 create mode 100644 examples/jsx-file-system-router/app/routes/_renderer.tsx
 create mode 100644 examples/jsx-file-system-router/app/routes/api/typewriter.ts
 create mode 100644 examples/jsx-file-system-router/app/routes/index.tsx
 create mode 100644 examples/jsx-file-system-router/app/server.ts
 create mode 100644 examples/jsx-file-system-router/app/style.css
 create mode 100644 examples/jsx-file-system-router/app/web-components/ReverseComponent.ts
 create mode 100644 examples/jsx-file-system-router/package.json
 create mode 100644 examples/jsx-file-system-router/public/.assetsignore
 create mode 100644 examples/jsx-file-system-router/public/favicon.ico
 create mode 100644 examples/jsx-file-system-router/tsconfig.json
 create mode 100644 examples/jsx-file-system-router/vite.config.ts

diff --git a/examples/jsx-file-system-router/.gitignore b/examples/jsx-file-system-router/.gitignore
new file mode 100644
index 0000000..f86f576
--- /dev/null
+++ b/examples/jsx-file-system-router/.gitignore
@@ -0,0 +1,34 @@
+# prod
+dist/
+
+# dev
+.hono/
+.wrangler/
+.yarn/
+!.yarn/releases
+.vscode/*
+!.vscode/launch.json
+!.vscode/*.code-snippets
+.idea/workspace.xml
+.idea/usage.statistics.xml
+.idea/shelf
+
+# deps
+node_modules/
+
+# env
+.env
+.env.production
+.dev.vars
+
+# logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# misc
+.DS_Store
diff --git a/examples/jsx-file-system-router/Readme.md b/examples/jsx-file-system-router/Readme.md
new file mode 100644
index 0000000..1abc817
--- /dev/null
+++ b/examples/jsx-file-system-router/Readme.md
@@ -0,0 +1,421 @@
+# Datastar + HonoX Example
+
+A working example of [Datastar](https://data-star.dev/) (reactive hypermedia) integrated with [HonoX](https://github.com/honojs/honox) (Hono meta-framework with file-based routing, a la NextJS)
+
+## Quick Start
+
+```bash
+npm install
+
+# Development
+npm run dev
+# Visit http://localhost:5173
+
+# Production (build + start in one command)
+npm run prod
+# Visit http://localhost:3000
+
+# Or run separately:
+npm run build  # Build first
+npm start      # Then start server
+
+# Note: 'npm start' uses 'node -C dist index.js'
+# The -C flag changes working directory to dist/ before running
+```
+
+## Step-by-Step Setup
+
+### 1. Create HonoX Project
+
+```bash
+npm create hono@latest
+# Choose: x-basic (use arrow keys to select)
+```
+
+The **x-basic** template includes:
+- ✅ **Tailwind CSS** pre-configured (no extra setup needed!)
+- ✅ **Cloudflare Workers** adapter (can be changed to Node.js/Bun)
+- ✅ **HonoX** with file-based routing
+
+> **Note**: If you need to configure Tailwind CSS manually or want to learn more, see the [HonoX Tailwind CSS documentation](https://github.com/honojs/honox?tab=readme-ov-file#tailwind-css).
+
+If you want to use **Node.js** or **Bun** instead of Cloudflare, follow the next steps.
+
+### 2. Remove Cloudflare Dependencies (Optional)
+
+If you're **not deploying to Cloudflare**, remove these packages:
+
+```bash
+# Using npm
+npm remove @cloudflare/workers-types wrangler
+
+```
+
+Then remove these scripts from `package.json`:
+```json
+{
+  "scripts": {
+    "preview": "wrangler dev",    // ❌ Remove this
+    "deploy": "bun run build && wrangler deploy"  // ❌ Remove this
+  }
+}
+```
+
+Delete the Cloudflare configuration file:
+```bash
+rm wrangler.jsonc
+```
+
+And remove the Cloudflare types from `tsconfig.json`:
+```json
+{
+  "types": [
+    "vite/client",
+    "@cloudflare/workers-types/2023-07-01"  // ❌ Remove this line
+  ]
+}
+```
+### 3. Configure Vite Adapter
+
+Edit `vite.config.ts` to use **Node.js** or **Bun** adapter:
+
+**For Node.js (default recommendation):**
+```ts
+// vite.config.ts
+import build from '@hono/vite-build/node-server'  // Node.js build
+import adapter from '@hono/vite-dev-server/node'   // Node.js adapter
+//import build from '@hono/vite-build/bun'           // Change to Bun
+//import adapter from '@hono/vite-dev-server/bun'    // Change to Bun
+import tailwindcss from '@tailwindcss/vite'
+import honox from 'honox/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    honox({
+      devServer: { adapter },
+      client: { input: ['/app/client.ts', '/app/style.css'] }
+    }),
+    tailwindcss(),
+    build()
+  ]
+})
+```
+
+### 4. Add Datastar CDN
+
+Edit `app/routes/_renderer.tsx`:
+
+```tsx
+import { jsxRenderer } from 'hono/jsx-renderer'
+import { Link, Script } from 'honox/server'
+
+export default jsxRenderer(({ children }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" href="/favicon.ico" />
+        <Link href="/app/style.css" rel="stylesheet" />
+        
+        {/* Add Datastar CDN */}
+        <script 
+          type="module" 
+          src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
+        ></script>
+        
+        <Script src="/app/client.ts" async />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+})
+```
+
+### 5. Three Ways to Create Routes in HonoX
+
+HonoX supports three patterns for creating routes:
+
+**1. Using `createRoute()` (Recommended)**
+```tsx
+import { createRoute } from 'honox/factory'
+
+export default createRoute((c) => {
+  return c.render(<h1>Hello!</h1>)
+})
+```
+
+**2. Direct Function Export (Simplified)**
+```tsx
+import { Context } from 'hono'
+
+export default function Home(_c: Context) {
+  return <h1>Welcome!</h1>
+}
+```
+
+**3. Hono Instance (For API routes with sub-routes)**
+```tsx
+import { Hono } from 'hono'
+
+const app = new Hono()
+
+app.get('/:id', (c) => {
+  const id = c.req.param('id')
+  return c.json({ id })
+})
+
+export default app
+```
+
+**Which method to use?**
+
+- **For pages** (e.g., `app/routes/datastar-demo.tsx`): Use **method 2** (direct function export) - cleaner for pages
+- **For API endpoints** (e.g., `app/routes/api/*.ts`): Use **method 1** (`createRoute`) with named exports (`GET`, `POST`) to specify HTTP verbs
+
+Example:
+```tsx
+// Page: app/routes/about.tsx
+export default function About() {
+  return <h1>About page</h1>
+}
+
+// API: app/routes/api/users.ts
+export const GET = createRoute((c) => c.json({ users: [] }))
+export const POST = createRoute((c) => c.json({ created: true }))
+```
+
+### 6. Web Components with Datastar
+
+This example includes a [Web Component that reverses strings](https://data-star.dev/examples/web_component), demonstrating Datastar's integration with custom elements.
+
+**First, simplify `app/client.ts` by removing HonoX's client framework:**
+
+By default, HonoX scaffolds include `createClient()` for islands support. Since we're using **web components only** (not islands), remove it:
+
+```ts
+// app/client.ts 
+import { createClient } from 'honox/client'❌ Remove this 
+import '@/web-components/ReverseComponent'
+
+createClient()  // ❌ Remove this - only needed for islands
+
+```
+
+**Usage in pages:**
+
+```tsx
+{/* Web Component with two-way binding */}
+<section data-signals-name="Your Name" data-signals-reversed="">
+  <input type="text" data-bind="name" />
+  <p>Reversed: <span data-text="$reversed"></span></p>
+  
+  <reverse-component
+    data-on-reverse="$reversed = evt.detail.value"
+    data-attr-name="$name"
+  ></reverse-component>
+</section>
+```
+
+See `app/web-components/ReverseComponent.ts` for the full implementation.
+
+### 7. Install Datastar SDK 
+
+The [Datastar TypeScript SDK](https://github.com/starfederation/datastar-typescript) is a **backend helper library** that simplifies sending Server-Sent Events (SSE) to the Datastar frontend. It provides a clean API to:
+
+- **Update signals** on the client (`patchSignals`)
+- **Patch HTML elements** into the DOM (`patchElements`)
+- **Remove elements** or signals
+- **Execute JavaScript** on the client
+
+
+```bash
+npm install @starfederation/datastar-sdk
+```
+
+**Import paths by runtime:**
+- **Bun/Web**: `@starfederation/datastar-sdk/web`
+- **Node.js**: `@starfederation/datastar-sdk/node`
+
+### 8. Create API Endpoint
+
+Create `app/routes/api/hello.ts`:
+
+```ts
+import { createRoute } from 'honox/factory'
+// For Node, use:
+import { ServerSentEventGenerator as SSE } from '@starfederation/datastar-sdk/node'
+// For Bun/Deno/Web use:
+//import { ServerSentEventGenerator as SSE } from '@starfederation/datastar-sdk/web'
+
+export const GET = createRoute(async (c) => {
+  return SSE.stream(async (stream) => {
+    // Update signals on the client
+    const message = `Hello from server at ${new Date().toLocaleTimeString()}!`
+    stream.patchSignals(JSON.stringify({ message }))
+  })
+})
+```
+
+**Using JSX components in API responses:**
+
+You can also render JSX components to HTML strings:
+
+```tsx
+// tsx file
+import { createRoute } from 'honox/factory'
+import { ServerSentEventGenerator as SSE } from '@starfederation/datastar-sdk/node'
+//import { ServerSentEventGenerator as SSE } from '@starfederation/datastar-sdk/web'
+import { renderToString } from 'hono/jsx/dom/server'
+
+export const GET = createRoute(async (c) => {
+  return SSE.stream(async (stream) => {
+    // Render JSX component to HTML string, you can import a JSX component
+    const html = renderToString(
+      <div id="message" class="p-4 bg-blue-50 rounded">
+        <p>Hello from server at {new Date().toLocaleTimeString()}!</p>
+      </div>
+    )
+    stream.patchElements(html)
+  })
+})
+```
+
+### 9. Add Middleware (Optional)
+
+You can add global middleware using `app/routes/_middleware.ts`. This file applies middleware to all routes.
+
+**Example: Add Compression Middleware**
+
+Create `app/routes/_middleware.ts`:
+
+```ts
+import { createRoute } from 'honox/factory'
+import { compress } from 'hono/compress'
+
+export default createRoute(
+  compress() // Compresses responses (gzip, deflate)
+)
+```
+
+**Add Multiple Middleware:**
+
+```ts
+import { createRoute } from 'honox/factory'
+import { compress } from 'hono/compress'
+import { logger } from 'hono/logger'
+import { secureHeaders } from 'hono/secure-headers'
+
+export default createRoute(
+  logger(),         // Logs requests
+  secureHeaders(),  // Adds security headers
+  compress()        // Compresses responses
+)
+```
+
+### 10. Path Alias Configuration
+
+The project uses `@` as an alias for the `app/` directory. This makes imports cleaner and easier to manage.
+
+**Already configured in `tsconfig.json`:**
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./app/*"]
+    }
+  }
+}
+```
+
+**Already configured in `vite.config.ts`:**
+```ts
+import path from 'path'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './app')
+    }
+  }
+})
+```
+
+**Usage example:**
+```ts
+// Instead of:
+import { MyComponent } from '../../../components/MyComponent'
+
+// Use:
+import { MyComponent } from '@/components/MyComponent'
+```
+
+## Project Structure
+
+```
+jsx-file-system-router/
+├── app/
+│   ├── routes/
+│   │   ├── _renderer.tsx          # Layout with Datastar CDN + Script
+│   │   ├── _middleware.ts         # Global middleware (compression)
+│   │   ├── _404.tsx               # Custom 404 handler
+│   │   ├── index.tsx              # Home page (imports components)
+│   │   └── api/
+│   │       └── typewriter.ts      # SSE endpoint for typewriter effect
+│   ├── components/                # Reusable UI components
+│   │   ├── TypewriterExample.tsx  # Typewriter demo component
+│   │   └── WebComponentExample.tsx # Web component demo
+│   ├── web-components/
+│   │   └── ReverseComponent.ts    # Custom element: string reverser
+│   ├── client.ts                  # Client entry (loads web components)
+│   ├── server.ts                  # Server entry (Hono app)
+│   └── style.css                  # Global styles (Tailwind)
+├── dist/                          # Built output (after npm run build)
+│   ├── static/
+│   │   ├── client-*.js            # Bundled client code
+│   │   └── style-*.css            # Bundled styles
+│   ├── index.js                   # Server bundle
+│   └── favicon.ico                # Static assets
+├── vite.config.ts                 # Vite + HonoX configuration
+├── tsconfig.json                  # TypeScript config (with @ alias)
+└── package.json                   # Dependencies and scripts
+```
+
+## Datastar Key Patterns
+
+```tsx
+{/* Debounce input - use spread syntax because of dot (.) in "300ms" */}
+<input {...{ 'data-on-input__debounce.300ms': "@get('/api/search')" }} />
+
+{/* Prevent default - normal syntax works (no special characters) */}
+<form data-on-submit__prevent="@post('/api/submit')">
+```
+
+**Note**: Use spread syntax `{...{ 'attribute': 'value' }}` only when the attribute contains a dot (`.`) or other special characters. Otherwise, use normal JSX syntax.
+
+## Development Scripts
+
+```bash
+# Development (Vite)
+npm run dev      # or: bun run dev
+
+# Build
+npm run build    # or: bun run build
+
+# Start production server (requires build first)
+npm start        # or: node -C dist index.js
+
+# Build + Start (one command)
+npm run prod     # Builds and starts production server
+```
+
+## Documentation
+
+- **HonoX**: https://github.com/honojs/honox
+- **Datastar**: https://data-star.dev/
+- **Hono**: https://hono.dev/
+
+**Made with ❤️ using HonoX + Datastar**
+
diff --git a/examples/jsx-file-system-router/app/client.ts b/examples/jsx-file-system-router/app/client.ts
new file mode 100644
index 0000000..a9b4285
--- /dev/null
+++ b/examples/jsx-file-system-router/app/client.ts
@@ -0,0 +1,2 @@
+// Just import web components directly
+import '@/web-components/ReverseComponent'
diff --git a/examples/jsx-file-system-router/app/components/TypewriterExample.tsx b/examples/jsx-file-system-router/app/components/TypewriterExample.tsx
new file mode 100644
index 0000000..5570497
--- /dev/null
+++ b/examples/jsx-file-system-router/app/components/TypewriterExample.tsx
@@ -0,0 +1,35 @@
+export default function TypewriterExample() {
+    return (
+        <section class="mb-12 p-6 border rounded-lg bg-gray-900">
+            <h2 class="text-2xl font-semibold mb-4 text-white">Typewriter Effect</h2>
+            <p class="mb-4 text-gray-300">
+                See the difference by trying <span class="text-yellow-400 font-bold">zero</span> and <span class="text-green-400 font-bold">non-zero</span> intervals below.
+            </p>
+
+            <div class="space-y-4" data-signals='{"interval": 400, "message": ""}'>
+                <div>
+                    <label class="block text-sm font-medium mb-2 text-white">Interval in ms:</label>
+                    <input
+                        type="number"
+                        data-bind="interval"
+                        class="border border-gray-600 bg-gray-800 text-white p-2 rounded w-32"
+                    />
+                </div>
+
+                <button
+                    class="px-6 py-3 bg-blue-500 text-white rounded hover:bg-blue-600 font-bold uppercase tracking-wider"
+                    data-on-click="@get('/api/typewriter')"
+                >
+                    START
+                </button>
+
+                <h3
+                    data-text="$message"
+                    class="min-h-[60px] flex items-center"
+                    style="background: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 165, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 127, 255), rgb(75, 0, 130), rgb(238, 130, 238)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3rem; font-weight: bold; letter-spacing: 0.1em;"
+                ></h3>
+            </div>
+        </section>
+    )
+}
+
diff --git a/examples/jsx-file-system-router/app/components/WebComponentExample.tsx b/examples/jsx-file-system-router/app/components/WebComponentExample.tsx
new file mode 100644
index 0000000..bbabc32
--- /dev/null
+++ b/examples/jsx-file-system-router/app/components/WebComponentExample.tsx
@@ -0,0 +1,36 @@
+export default function WebComponentExample() {
+    return (
+        <section class="mb-12 p-6 border rounded-lg">
+            <h2 class="text-2xl font-semibold mb-4">Web Component Integration</h2>
+            <p class="mb-4 text-gray-600">
+                Two-way binding with a web component that reverses a string.
+                <a href="https://data-star.dev/examples/web_component" target="_blank" class="text-blue-600 hover:underline ml-2">
+                    View Datastar Example ↗
+                </a>
+            </p>
+
+            <div class="space-y-4" data-signals='{"name": "Your Name", "reversed": ""}'>
+                <div>
+                    <label class="block text-sm font-medium mb-2">Input:</label>
+                    <input
+                        type="text"
+                        data-bind="name"
+                        class="border border-gray-300 p-2 rounded w-full"
+                    />
+                </div>
+
+                <div class="bg-blue-50 p-4 rounded">
+                    <p class="text-sm font-medium mb-1">Reversed:</p>
+                    <p class="text-xl font-bold text-blue-600" data-text="$reversed"></p>
+                </div>
+
+                {/* Web Component - hidden but handles the logic */}
+                <reverse-component
+                    data-on-reverse="$reversed = evt.detail.value"
+                    data-attr-name="$name"
+                ></reverse-component>
+            </div>
+        </section>
+    )
+}
+
diff --git a/examples/jsx-file-system-router/app/global.d.ts b/examples/jsx-file-system-router/app/global.d.ts
new file mode 100644
index 0000000..4d57d42
--- /dev/null
+++ b/examples/jsx-file-system-router/app/global.d.ts
@@ -0,0 +1,8 @@
+import type {} from 'hono'
+
+declare module 'hono' {
+  interface Env {
+    Variables: {}
+    Bindings: {}
+  }
+}
diff --git a/examples/jsx-file-system-router/app/routes/_404.tsx b/examples/jsx-file-system-router/app/routes/_404.tsx
new file mode 100644
index 0000000..332abb5
--- /dev/null
+++ b/examples/jsx-file-system-router/app/routes/_404.tsx
@@ -0,0 +1,9 @@
+import type { NotFoundHandler } from 'hono'
+
+const handler: NotFoundHandler = (c) => {
+  // Because the compression middleware is applied, we need to return a 200 status code
+  c.status(200)
+  return c.render('404 Not Found')
+}
+
+export default handler
diff --git a/examples/jsx-file-system-router/app/routes/_error.tsx b/examples/jsx-file-system-router/app/routes/_error.tsx
new file mode 100644
index 0000000..2c8e934
--- /dev/null
+++ b/examples/jsx-file-system-router/app/routes/_error.tsx
@@ -0,0 +1,12 @@
+import type { ErrorHandler } from 'hono'
+
+const handler: ErrorHandler = (e, c) => {
+  if ('getResponse' in e) {
+    return e.getResponse()
+  }
+  console.error(e.message)
+  c.status(500)
+  return c.render('Internal Server Error')
+}
+
+export default handler
diff --git a/examples/jsx-file-system-router/app/routes/_middleware.ts b/examples/jsx-file-system-router/app/routes/_middleware.ts
new file mode 100644
index 0000000..8b2a948
--- /dev/null
+++ b/examples/jsx-file-system-router/app/routes/_middleware.ts
@@ -0,0 +1,8 @@
+import { createRoute } from 'honox/factory'
+import { compress } from 'hono/compress'
+// import { compress } from '@hono/bun-compress' // for Bun you need install
+
+export default createRoute(
+    compress()
+)
+
diff --git a/examples/jsx-file-system-router/app/routes/_renderer.tsx b/examples/jsx-file-system-router/app/routes/_renderer.tsx
new file mode 100644
index 0000000..3ae9777
--- /dev/null
+++ b/examples/jsx-file-system-router/app/routes/_renderer.tsx
@@ -0,0 +1,23 @@
+import { jsxRenderer } from 'hono/jsx-renderer'
+import { Link, Script } from 'honox/server'
+
+export default jsxRenderer(({ children }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" href="/favicon.ico" />
+        <Link href="/app/style.css" rel="stylesheet" />
+
+        <script
+          type="module"
+          src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
+        ></script>
+
+        <Script src="/app/client.ts" async />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+})
diff --git a/examples/jsx-file-system-router/app/routes/api/typewriter.ts b/examples/jsx-file-system-router/app/routes/api/typewriter.ts
new file mode 100644
index 0000000..f5ceb77
--- /dev/null
+++ b/examples/jsx-file-system-router/app/routes/api/typewriter.ts
@@ -0,0 +1,25 @@
+import { createRoute } from 'honox/factory'
+import { ServerSentEventGenerator as SSE } from '@starfederation/datastar-sdk/web'
+
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+export const GET = createRoute(async (c) => {
+    const message = "HELLO WORLD!"
+
+    const reader = await SSE.readSignals(c.req.raw)
+    const interval = reader.success && reader.signals?.interval !== undefined
+        ? Number(reader.signals.interval)
+        : 400
+
+    return SSE.stream(async (stream) => {
+        if (interval <= 0) {
+            stream.patchSignals(JSON.stringify({ message }))
+        } else {
+            for (let i = 1; i <= message.length; i++) {
+                stream.patchSignals(JSON.stringify({ message: message.substring(0, i) }))
+                await sleep(interval)
+            }
+        }
+    })
+})
+
diff --git a/examples/jsx-file-system-router/app/routes/index.tsx b/examples/jsx-file-system-router/app/routes/index.tsx
new file mode 100644
index 0000000..12cc5bd
--- /dev/null
+++ b/examples/jsx-file-system-router/app/routes/index.tsx
@@ -0,0 +1,32 @@
+import TypewriterExample from '@/components/TypewriterExample'
+import WebComponentExample from '@/components/WebComponentExample'
+
+export default function Home() {
+  return (
+    <div class="p-8 max-w-4xl mx-auto">
+      <h1 class="text-4xl font-bold mb-8">Datastar + HonoX Example</h1>
+
+      {/* Web Component Example */}
+      <WebComponentExample />
+
+      {/* Typewriter Effect Example */}
+      <TypewriterExample />
+
+      {/* Documentation Links */}
+      <section class="p-6 border rounded-lg bg-gray-50">
+        <h2 class="text-2xl font-semibold mb-4">📚 Documentation</h2>
+        <div class="flex gap-4 flex-wrap">
+          <a href="https://data-star.dev/examples" target="_blank" class="text-blue-600 hover:underline">
+            Datastar Examples ↗
+          </a>
+          <a href="https://github.com/honojs/honox" target="_blank" class="text-blue-600 hover:underline">
+            HonoX GitHub ↗
+          </a>
+          <a href="https://hono.dev/" target="_blank" class="text-blue-600 hover:underline">
+            Hono Docs ↗
+          </a>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/examples/jsx-file-system-router/app/server.ts b/examples/jsx-file-system-router/app/server.ts
new file mode 100644
index 0000000..c0cbcb7
--- /dev/null
+++ b/examples/jsx-file-system-router/app/server.ts
@@ -0,0 +1,8 @@
+import { showRoutes } from 'hono/dev'
+import { createApp } from 'honox/server'
+
+const app = createApp()
+
+showRoutes(app)
+
+export default app
diff --git a/examples/jsx-file-system-router/app/style.css b/examples/jsx-file-system-router/app/style.css
new file mode 100644
index 0000000..3e6520d
--- /dev/null
+++ b/examples/jsx-file-system-router/app/style.css
@@ -0,0 +1 @@
+@import 'tailwindcss' source('../app');
\ No newline at end of file
diff --git a/examples/jsx-file-system-router/app/web-components/ReverseComponent.ts b/examples/jsx-file-system-router/app/web-components/ReverseComponent.ts
new file mode 100644
index 0000000..d688276
--- /dev/null
+++ b/examples/jsx-file-system-router/app/web-components/ReverseComponent.ts
@@ -0,0 +1,27 @@
+/**
+ * ReverseComponent - Web Component that reverses a string
+ * Based on: https://data-star.dev/examples/web_component
+ */
+class ReverseComponent extends HTMLElement {
+    static get observedAttributes() {
+        return ["name"];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+        if (newValue === null) return;
+
+        const len = newValue.length;
+        const codePoints = Array(len);
+        let i = len - 1;
+        for (const char of newValue) {
+            codePoints[i--] = char.codePointAt(0);
+        }
+        const value = String.fromCodePoint(...codePoints);
+        this.dispatchEvent(new CustomEvent("reverse", { detail: { value } }));
+    }
+}
+
+customElements.define("reverse-component", ReverseComponent);
+
+export default ReverseComponent;
+
diff --git a/examples/jsx-file-system-router/package.json b/examples/jsx-file-system-router/package.json
new file mode 100644
index 0000000..880d023
--- /dev/null
+++ b/examples/jsx-file-system-router/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "jsx-file-system-router",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --mode client && vite build",
+    "start": "cd dist && node index.js",
+    "prod": "npm run build && npm start"
+  },
+  "private": true,
+  "dependencies": {
+    "@starfederation/datastar-sdk": "latest",
+    "hono": "^4.10.1",
+    "honox": "^0.1.49"
+  },
+  "devDependencies": {
+    "@hono/vite-build": "^1.3.0",
+    "@hono/vite-dev-server": "^0.18.2",
+    "@tailwindcss/vite": "^4.0.9",
+    "tailwindcss": "^4.0.9",
+    "vite": "^6.3.5"
+  }
+}
\ No newline at end of file
diff --git a/examples/jsx-file-system-router/public/.assetsignore b/examples/jsx-file-system-router/public/.assetsignore
new file mode 100644
index 0000000..6874c9d
--- /dev/null
+++ b/examples/jsx-file-system-router/public/.assetsignore
@@ -0,0 +1,2 @@
+index.js
+.vite/
\ No newline at end of file
diff --git a/examples/jsx-file-system-router/public/favicon.ico b/examples/jsx-file-system-router/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..543164354afc72a8b8de19830b6b9c06af58c0ae
GIT binary patch
literal 15406
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

literal 0
HcmV?d00001

diff --git a/examples/jsx-file-system-router/tsconfig.json b/examples/jsx-file-system-router/tsconfig.json
new file mode 100644
index 0000000..3743845
--- /dev/null
+++ b/examples/jsx-file-system-router/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "types": [
+      "vite/client"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./app/*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}
\ No newline at end of file
diff --git a/examples/jsx-file-system-router/vite.config.ts b/examples/jsx-file-system-router/vite.config.ts
new file mode 100644
index 0000000..e3d5490
--- /dev/null
+++ b/examples/jsx-file-system-router/vite.config.ts
@@ -0,0 +1,22 @@
+import build from '@hono/vite-build/node'
+import adapter from '@hono/vite-dev-server/node'
+import tailwindcss from '@tailwindcss/vite'
+import honox from 'honox/vite'
+import { defineConfig } from 'vite'
+import path from 'path'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './app')
+    }
+  },
+  plugins: [
+    honox({
+      devServer: { adapter },
+      client: { input: ['/app/client.ts', '/app/style.css'] }
+    }),
+    tailwindcss(),
+    build()
+  ]
+})