Repository: yusukebe/hono-htmx
Branch: main
Commit: 9636122a4504
Files: 8
Total size: 3.9 KB
Directory structure:
gitextract_aewqrsr1/
├── .gitignore
├── README.md
├── package.json
├── src/
│ ├── components.tsx
│ └── index.tsx
├── todo.sql
├── tsconfig.json
└── wrangler.sample.toml
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.wrangler
node_modules
yarn-error.log
yarn.lock
wrangler.toml
================================================
FILE: README.md
================================================
# Todo Example
Stack:
* Hono
* JSX (Hono middleware)
* htmx
* Zod
* Cloudflare Workers
* Cloudflare D1
## Usage
Install:
```
npm install
```
Setup:
```
wrangler d1 create todo
wrangler d1 execute todo --local --file=todo.sql
```
Dev:
```
npm run dev
```
Deploy:
```
npm run deploy
```
## Author
Yusuke Wada
## License
MIT
================================================
FILE: package.json
================================================
{
"scripts": {
"dev": "wrangler dev --live-reload src/index.tsx",
"deploy": "wrangler deploy --minify src/index.tsx"
},
"dependencies": {
"@hono/zod-validator": "^0.1.9",
"hono": "^3.8.0-rc.2",
"zod": "^3.21.4"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20231002.0",
"wrangler": "^3.11.0"
}
}
================================================
FILE: src/components.tsx
================================================
import { html } from 'hono/html'
import { jsxRenderer } from 'hono/jsx-renderer'
export const renderer = jsxRenderer(({ children }) => {
return html`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.9"></script>
<script src="https://cdn.tailwindcss.com"></script>
<title>Hono + htmx</title>
</head>
<body>
<div class="p-4">
<h1 class="text-4xl font-bold mb-4"><a href="/">Todo</a></h1>
${children}
</div>
</body>
</html>
`
})
export const AddTodo = () => (
<form hx-post="/todo" hx-target="#todo" hx-swap="beforebegin" _="on htmx:afterRequest reset() me" class="mb-4">
<div class="mb-2">
<input name="title" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg p-2.5" />
</div>
<button class="text-white bg-blue-700 hover:bg-blue-800 rounded-lg px-5 py-2 text-center" type="submit">
Submit
</button>
</form>
)
export const Item = ({ title, id }: { title: string; id: string }) => (
<p
hx-delete={`/todo/${id}`}
hx-swap="outerHTML"
class="flex row items-center justify-between py-1 px-4 my-1 rounded-lg text-lg border bg-gray-100 text-gray-600 mb-2"
>
{title}
<button class="font-medium">Delete</button>
</p>
)
================================================
FILE: src/index.tsx
================================================
import { Hono } from 'hono'
import { z } from 'zod'
import { zValidator } from '@hono/zod-validator'
import { renderer, AddTodo, Item } from './components'
type Bindings = {
DB: D1Database
}
type Todo = {
title: string
id: string
}
const app = new Hono<{ Bindings: Bindings }>()
app.get('*', renderer)
app.get('/', async (c) => {
const { results } = await c.env.DB.prepare(`SELECT id, title FROM todo;`).all<Todo>()
const todos = results
return c.render(
<div>
<AddTodo />
{todos.map((todo) => {
return <Item title={todo.title} id={todo.id} />
})}
<div id="todo"></div>
</div>
)
})
app.post(
'/todo',
zValidator(
'form',
z.object({
title: z.string().min(1)
})
),
async (c) => {
const { title } = c.req.valid('form')
const id = crypto.randomUUID()
await c.env.DB.prepare(`INSERT INTO todo(id, title) VALUES(?, ?);`).bind(id, title).run()
return c.html(<Item title={title} id={id} />)
}
)
app.delete('/todo/:id', async (c) => {
const id = c.req.param('id')
await c.env.DB.prepare(`DELETE FROM todo WHERE id = ?;`).bind(id).run()
c.status(200)
return c.body(null)
})
export default app
================================================
FILE: todo.sql
================================================
CREATE TABLE todo (
id TEXT PRIMARY KEY,
title TEXT NOT NULL
);
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"esModuleInterop": true,
"strict": true,
"lib": [
"esnext"
],
"types": [
"@cloudflare/workers-types"
],
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
},
}
================================================
FILE: wrangler.sample.toml
================================================
name = "todo"
compatibility_date = "2023-01-01"
[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "todo"
database_id = ""
preview_database_id = "local-todo"
gitextract_aewqrsr1/ ├── .gitignore ├── README.md ├── package.json ├── src/ │ ├── components.tsx │ └── index.tsx ├── todo.sql ├── tsconfig.json └── wrangler.sample.toml
SYMBOL INDEX (3 symbols across 2 files)
FILE: src/index.tsx
type Bindings (line 7) | type Bindings = {
type Todo (line 11) | type Todo = {
FILE: todo.sql
type todo (line 1) | CREATE TABLE todo (
Condensed preview — 8 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (5K chars).
[
{
"path": ".gitignore",
"chars": 61,
"preview": ".wrangler\nnode_modules\nyarn-error.log\nyarn.lock\nwrangler.toml"
},
{
"path": "README.md",
"chars": 336,
"preview": "# Todo Example\n\nStack:\n\n* Hono\n* JSX (Hono middleware)\n* htmx\n* Zod\n* Cloudflare Workers\n* Cloudflare D1\n\n## Usage\n\nInst"
},
{
"path": "package.json",
"chars": 347,
"preview": "{\n \"scripts\": {\n \"dev\": \"wrangler dev --live-reload src/index.tsx\",\n \"deploy\": \"wrangler deploy --minify src/inde"
},
{
"path": "src/components.tsx",
"chars": 1474,
"preview": "import { html } from 'hono/html'\nimport { jsxRenderer } from 'hono/jsx-renderer'\n\nexport const renderer = jsxRenderer(({"
},
{
"path": "src/index.tsx",
"chars": 1198,
"preview": "import { Hono } from 'hono'\nimport { z } from 'zod'\nimport { zValidator } from '@hono/zod-validator'\n\nimport { renderer,"
},
{
"path": "todo.sql",
"chars": 67,
"preview": "CREATE TABLE todo (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL\n);"
},
{
"path": "tsconfig.json",
"chars": 309,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"module\": \"ESNext\",\n \"moduleResolution\": \"node\",\n \"esModuleIn"
},
{
"path": "wrangler.sample.toml",
"chars": 197,
"preview": "name = \"todo\"\ncompatibility_date = \"2023-01-01\"\n\n[[d1_databases]]\nbinding = \"DB\" # i.e. available in your Worker on env."
}
]
About this extraction
This page contains the full source code of the yusukebe/hono-htmx GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 8 files (3.9 KB), approximately 1.4k tokens, and a symbol index with 3 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.