Hono.js: The Web Framework You're Probably Not Using Yet — But Should Be

# For Node.js
npm create hono@latest my-app
# Select: nodejs

# For Cloudflare Workers
npm create cloudflare@latest my-app -- --template=hono

# For Bun
bun create hono my-app

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Hono!'))
app.get('/json', (c) => c.json({ message: 'hello' }))
app.post('/echo', async (c) => {
  const body = await c.req.json()
  return c.json(body)
})

export default app

import { Hono } from 'hono'

const app = new Hono()

// Route parameters
app.get('/posts/:id', (c) => {
  const id = c.req.param('id')
  return c.json({ id })
})

// Query strings
app.get('/search', (c) => {
  const q = c.req.query('q')
  const page = c.req.query('page') ?? '1'
  return c.json({ q, page })
})

// Grouping with basePath
const api = new Hono().basePath('/api')

// Sub-routers per resource
const users = new Hono()
users.get('/', (c) => c.json([]))
users.post('/', async (c) => {
  const body = await c.req.json()
  return c.json(body, 201)
})
users.get('/:id', (c) => c.json({ id: c.req.param('id') }))

// Mount on the main app
api.route('/users', users)

export default api

import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { logger } from 'hono/logger'
import { bearerAuth } from 'hono/bearer-auth'
import { cache } from 'hono/cache'

const app = new Hono()

// Global middleware
app.use('*', logger())
app.use('*', cors({
  origin: ['https://mysite.com', 'http://localhost:3000'],
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
}))

// Route-level middleware
const token = 'my-secret-token'
app.use('/admin/*', bearerAuth({ token }))

// Cache on Cloudflare Workers
app.use('/static/*', cache({
  cacheName: 'static-assets',
  cacheControl: 'max-age=3600',
}))

// Custom middleware
app.use('*', async (c, next) => {
  const start = Date.now()
  await next()
  const ms = Date.now() - start
  c.header('X-Response-Time', `${ms}ms`)
})

app.get('/', (c) => c.text('OK'))
export default app

import { Hono } from 'hono'
import { z } from 'zod'
import { zValidator } from '@hono/zod-validator'

const app = new Hono()

// User creation schema
const createUserSchema = z.object({
  name: z.string().min(2).max(100),
  email: z.string().email(),
  age: z.number().int().min(18).optional(),
})

// Query params schema
const paginationSchema = z.object({
  page: z.coerce.number().int().positive().default(1),
  limit: z.coerce.number().int().min(1).max(100).default(20),
})

app.post(
  '/users',
  zValidator('json', createUserSchema),
  (c) => {
    const { name, email, age } = c.req.valid('json')
    // name, email, age are fully typed here
    // TypeScript knows exactly what they are
    return c.json({ id: 1, name, email, age }, 201)
  }
)

app.get(
  '/users',
  zValidator('query', paginationSchema),
  (c) => {
    const { page, limit } = c.req.valid('query')
    // page and limit are already numbers, not strings
    return c.json({ page, limit, total: 0, data: [] })
  }
)

export default app

// server.ts — export the route types
import { Hono } from 'hono'
import { z } from 'zod'
import { zValidator } from '@hono/zod-validator'

const app = new Hono()

const route = app
  .get('/api/posts', (c) => c.json([{ id: 1, title: 'Hello' }]))
  .post(
    '/api/posts',
    zValidator('json', z.object({ title: z.string() })),
    async (c) => {
      const { title } = c.req.valid('json')
      return c.json({ id: 2, title }, 201)
    }
  )

export type AppType = typeof route
export default app

// client.ts — frontend with full type safety
import { hc } from 'hono/client'
import type { AppType } from './server'

const client = hc<AppType>('http://localhost:8787')

// TypeScript knows the return type of each route
const posts = await client.api.posts.$get()
const data = await posts.json()
// data is typed as { id: number; title: string }[]

// Compile error if the payload is wrong
const newPost = await client.api.posts.$post({
  json: { title: 'New Post' }, // TypeScript validates here
})

// app.tsx
import { Hono } from 'hono'
import type { FC } from 'hono/jsx'

const app = new Hono()

const Layout: FC = ({ children }) => (
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>My Site</title>
    </head>
    <body>{children}</body>
  </html>
)

const PostCard: FC<{ title: string; summary: string }> = ({ title, summary }) => (
  <article>
    <h2>{title}</h2>
    <p>{summary}</p>
  </article>
)

app.get('/posts', (c) => {
  const posts = [
    { title: 'Post 1', summary: 'Summary 1' },
    { title: 'Post 2', summary: 'Summary 2' },
  ]

  return c.html(
    <Layout>
      <h1>Blog</h1>
      {posts.map((p) => <PostCard {...p} />)}
    </Layout>
  )
})

export default app