Created
February 25, 2026 18:24
-
-
Save nk4dev/fc9da93f9cd92c7ae2f94299dc27bcd6 to your computer and use it in GitHub Desktop.
hono and htmx samle code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Hono } from 'hono' | |
| import type { FC } from 'hono/jsx' | |
| /** | |
| by @nk4dev | |
| libs: hono js / HTMX (CDN) / Tailwind(CDN) | |
| */ | |
| const app = new Hono() | |
| app.post('/clicked', async (c) => { | |
| return c.json({ msg: 'Button Clicked!' }) | |
| }); | |
| const jsloader = ({ title }: { title: string }) => ( | |
| <head> | |
| <title>{title}</title> | |
| <script src="https://unpkg.com/htmx.org@2.0.8"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| </head> | |
| ); | |
| app.get('/', (c) => { | |
| const Frontend: FC = () => ( | |
| <html> | |
| {jsloader({ title: 'Hono and HTMX' })} | |
| <body> | |
| <h1>Hono and HTMX</h1> | |
| <button hx-post="/clicked" hx-swap="outerHTML"> | |
| Click Me | |
| </button> | |
| <a data-hx-post="/clicked" data-hx-swap="outerHTML">Click Me!</a> | |
| </body> | |
| </html> | |
| ) | |
| return c.html(<Frontend />) | |
| }) | |
| app.notFound((c) => c.html(jsloader({ title: '404 Not Found' }) + '<h1>404 Not Found</h1><a href="/">Go Back</a>')) | |
| export default app |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment