Edge Stack
Ultra-fast edge-native web development: Hono + htmx + UnoCSS + D1
Stack Overview
| Layer |
Tool |
Why |
| Framework |
Hono |
Ultra-fast, TypeScript, JSX support |
| Interactivity |
htmx |
Server-rendered, 14kb, no build step |
| Styling |
UnoCSS |
Tailwind-compatible, instant builds |
| Database |
Cloudflare D1 |
SQLite on edge, free tier |
| Deploy |
CF Workers/Pages |
Global edge, zero cold start |
Quick Start
# Create project
pnpm create hono@latest my-app
# Select: cloudflare-workers
cd my-app
pnpm add htmx.org
wrangler.toml
name = "my-app"
compatibility_date = "2024-01-01"
main = "src/index.ts"
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
Basic App
import { Hono } from 'hono'
import { html } from 'hono/html'
type Bindings = { DB: D1Database }
const app = new Hono<{ Bindings: Bindings }>()
// Layout with htmx
const Layout = ({ children }: { children: any }) => html`
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
</head>
<body class="bg-gray-100 p-4">
${children}
</body>
</html>
`
// Page with htmx interactivity
app.get('/', (c) => {
return c.html(
<Layout>
<h1 class="text-2xl font-bold mb-4">My App</h1>
<button
hx-get="/api/items"
hx-target="#items"
class="px-4 py-2 bg-blue-500 text-white rounded"
>
Load Items
</button>
<div id="items"></div>
</Layout>
)
})
// API returns HTML fragment
app.get('/api/items', async (c) => {
const { results } = await c.env.DB
.prepare('SELECT * FROM items')
.all()
return c.html(
<ul class="mt-4 space-y-2">
{results.map((item: any) => (
<li class="p-2 bg-white rounded">{item.name}</li>
))}
</ul>
)
})
export default app
Commands
# Development
pnpm dev
# Create D1 database
wrangler d1 create my-db
# Run migration
wrangler d1 execute my-db --file=./schema.sql
# Deploy
wrangler deploy
When to Use
Good for:
- Landing pages, marketing sites
- CRUD apps, admin panels
- Marketplaces, directories
- Forms, surveys
- Rapid prototyping
Not ideal for:
- Heavy client-side interactivity (use SPA)
- Real-time collaborative editing
- Complex state management
References
- hono.md — Routing, middleware, JSX, bindings
- htmx-patterns.md — htmx with Hono patterns
- unocss.md — UnoCSS setup, custom utilities
- d1-database.md — D1 schema, queries, migrations
- deployment.md — wrangler.toml, CI/CD, domains
Source: timequity/vibe-coder — distributed by TomeVault.
1---2name: timequity-vibe-coder-edge-stack3description: Edge Stack4---56# Edge Stack78Ultra-fast edge-native web development: **Hono + htmx + UnoCSS + D1**910## Stack Overview1112| Layer | Tool | Why |13|-------|------|-----|14| Framework | Hono | Ultra-fast, TypeScript, JSX support |15| Interactivity | htmx | Server-rendered, 14kb, no build step |16| Styling | UnoCSS | Tailwind-compatible, instant builds |17| Database | Cloudflare D1 | SQLite on edge, free tier |18| Deploy | CF Workers/Pages | Global edge, zero cold start |1920## Quick Start2122```bash23# Create project24pnpm create hono@latest my-app25# Select: cloudflare-workers2627cd my-app28pnpm add htmx.org29```3031### wrangler.toml3233```toml34name = "my-app"35compatibility_date = "2024-01-01"36main = "src/index.ts"3738[[d1_databases]]39binding = "DB"40database_name = "my-db"41database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"42```4344### Basic App4546```typescript47import { Hono } from 'hono'48import { html } from 'hono/html'4950type Bindings = { DB: D1Database }5152const app = new Hono<{ Bindings: Bindings }>()5354// Layout with htmx55const Layout = ({ children }: { children: any }) => html`56<!DOCTYPE html>57<html>58<head>59 <script src="https://unpkg.com/htmx.org@2.0.4"></script>60 <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>61</head>62<body class="bg-gray-100 p-4">63 ${children}64</body>65</html>66`6768// Page with htmx interactivity69app.get('/', (c) => {70 return c.html(71 <Layout>72 <h1 class="text-2xl font-bold mb-4">My App</h1>73 <button74 hx-get="/api/items"75 hx-target="#items"76 class="px-4 py-2 bg-blue-500 text-white rounded"77 >78 Load Items79 </button>80 <div id="items"></div>81 </Layout>82 )83})8485// API returns HTML fragment86app.get('/api/items', async (c) => {87 const { results } = await c.env.DB88 .prepare('SELECT * FROM items')89 .all()9091 return c.html(92 <ul class="mt-4 space-y-2">93 {results.map((item: any) => (94 <li class="p-2 bg-white rounded">{item.name}</li>95 ))}96 </ul>97 )98})99100export default app101```102103## Commands104105```bash106# Development107pnpm dev108109# Create D1 database110wrangler d1 create my-db111112# Run migration113wrangler d1 execute my-db --file=./schema.sql114115# Deploy116wrangler deploy117```118119## When to Use120121**Good for:**122- Landing pages, marketing sites123- CRUD apps, admin panels124- Marketplaces, directories125- Forms, surveys126- Rapid prototyping127128**Not ideal for:**129- Heavy client-side interactivity (use SPA)130- Real-time collaborative editing131- Complex state management132133## References134135- **[hono.md](references/hono.md)** — Routing, middleware, JSX, bindings136- **[htmx-patterns.md](references/htmx-patterns.md)** — htmx with Hono patterns137- **[unocss.md](references/unocss.md)** — UnoCSS setup, custom utilities138- **[d1-database.md](references/d1-database.md)** — D1 schema, queries, migrations139- **[deployment.md](references/deployment.md)** — wrangler.toml, CI/CD, domains140141---142> Source: [timequity/vibe-coder](https://github.com/timequity/vibe-coder) — distributed by [TomeVault](https://tomevault.io).143<!-- tomevault:4.0:skill_md:2026-05-23 -->
tomevault-io