Last Updated: 3/11/2026

Helpers

Hono provides helper functions to simplify common tasks like handling cookies, HTML rendering, streaming, and more.

Manage cookies easily:


import { getCookie, setCookie, deleteCookie } from 'hono/cookie'
 
app.get('/cookie', (c) => {
  const value = getCookie(c, 'session')
  return c.json({ session: value })
})
 
app.post('/cookie', (c) => {
  setCookie(c, 'session', 'abc123', {
    path: '/',
    httpOnly: true,
    secure: true,
    maxAge: 3600,
  })
  return c.text('Cookie set')
})
 
app.delete('/cookie', (c) => {
  deleteCookie(c, 'session')
  return c.text('Cookie deleted')
})

HTML Helper

Render HTML with the html tagged template:


import { html } from 'hono/html'
 
app.get('/', (c) => {
  const content = html`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My Page</title>
      </head>
      <body>
        <h1>Hello Hono!</h1>
        <p>This is rendered with the html helper.</p>
      </body>
    </html>
  `
  return c.html(content)
})

Raw HTML

Insert raw HTML without escaping:


import { html, raw } from 'hono/html'
 
app.get('/', (c) => {
  const userContent = '<script>alert("XSS")</script>'
  const safeContent = '<strong>Bold</strong>'
  
  return c.html(html`
    <div>
      ${userContent}  <!-- Escaped by default -->
      ${raw(safeContent)}  <!-- Not escaped -->
    </div>
  `)
})

Streaming Helper

Stream responses for large data or real-time updates:


import { stream } from 'hono/streaming'
 
app.get('/stream', (c) => {
  return stream(c, async (stream) => {
    for (let i = 0; i < 10; i++) {
      await stream.write(`Chunk ${i}\n`)
      await stream.sleep(1000)
    }
  })
})

Server-Sent Events (SSE)


import { streamSSE } from 'hono/streaming'
 
app.get('/sse', (c) => {
  return streamSSE(c, async (stream) => {
    let id = 0
    while (true) {
      await stream.writeSSE({
        data: JSON.stringify({ time: new Date().toISOString() }),
        event: 'time-update',
        id: String(id++),
      })
      await stream.sleep(1000)
    }
  })
})

Factory Helper

Create reusable handlers with type safety:


import { createFactory } from 'hono/factory'
 
type Env = {
  Variables: {
    userId: string
  }
}
 
const factory = createFactory<Env>()
 
const middleware = factory.createMiddleware(async (c, next) => {
  c.set('userId', 'user-123')
  await next()
})
 
const handlers = factory.createHandlers((c) => {
  const userId = c.get('userId')
  return c.json({ userId })
})
 
app.get('/user', ...handlers)

Adapter Helper

Access platform-specific features:


import { env } from 'hono/adapter'
 
app.get('/env', (c) => {
  // Works across all platforms
  const { API_KEY } = env<{ API_KEY: string }>(c)
  return c.json({ apiKey: API_KEY })
})

SSG Helper

Generate static sites:


import { toSSG } from 'hono/ssg'
 
const app = new Hono()
 
app.get('/', (c) => c.html('<h1>Home</h1>'))
app.get('/about', (c) => c.html('<h1>About</h1>'))
 
toSSG(app, { dir: './dist' })

WebSocket Helper

Handle WebSocket connections (platform-specific):


import { upgradeWebSocket } from 'hono/cloudflare-workers'
 
app.get(
  '/ws',
  upgradeWebSocket((c) => {
    return {
      onMessage(event, ws) {
        console.log(`Message from client: ${event.data}`)
        ws.send('Hello from server!')
      },
      onClose: () => {
        console.log('Connection closed')
      },
    }
  })
)

Testing Helper

Type-safe testing client:


import { testClient } from 'hono/testing'
import { Hono } from 'hono'
 
const app = new Hono().get('/posts', (c) => c.json({ posts: [] }))
 
const client = testClient(app)
 
const res = await client.posts.$get()
expect(res.status).toBe(200)
const data = await res.json()
expect(data.posts).toEqual([])

Dev Helper

Development utilities:


import { showRoutes } from 'hono/dev'
 
const app = new Hono()
app.get('/', (c) => c.text('Home'))
app.post('/posts', (c) => c.text('Create post'))
 
showRoutes(app)
// Output:
// GET   /
// POST  /posts

Connection Info Helper

Get connection information:


import { getConnInfo } from 'hono/cloudflare-workers'
 
app.get('/info', (c) => {
  const info = getConnInfo(c)
  return c.json({
    remote: {
      address: info.remote.address,
      port: info.remote.port,
    },
  })
})

Next Steps

Explore Built-in Middleware for authentication, CORS, logging, and more.