DOCSEARCHbyAlgolia
Submit Docs

Hono

website·Indexed 41 days ago

https://hono.dev/

A small, simple, and ultrafast web framework built on Web Standards that works on any JavaScript runtime. It features a comprehensive suite of built-in middleware for authentication (JWT, JWK, Basic, Bearer), security (CSRF, Secure Headers, IP Restriction), and utility (CORS, Cache, Compression, Logger), along with helpers for HTML, CSS, and cookies.

Tokens
51.8K
Snippets
354
Records
398
Agent score
73%

What's inside Hono

  1. Overview of Hono Helpers

    Helpers in Hono provide utility functions to assist in application development. Unlike middleware, helpers do not act as request handlers; instead, they provide specific functionality (such as cookie management, HTML rendering, or JWT handling) that can be called within your route handlers.

  2. Overview of Google Cloud Run for Hono

    Google Cloud Run is a serverless platform that runs containerized services. It automatically manages compute resources and can trigger code in response to events. By default, it uses the Node.js buildpack if no Dockerfile is provided, but any runtime (such as Deno or Bun) can be used by providing a custom Dockerfile.

  3. Overview of Hono's design philosophy and compatibility

    Hono is a fast web framework designed to work across multiple environments by utilizing Web Standard APIs. It is compatible with Cloudflare Workers, Deno, Bun, and Node.js (via an adapter). Its core goal is to serve as a 'Standard for Web Standards,' providing a high-performance routing system and a broad ecosystem of middleware (including GraphQL, Firebase authentication, Sentry, and Basic authentication).

  4. Overview of Hono web framework

    Hono is a small, simple, and ultrafast web framework built on Web Standards. It is designed to be lightweight (under 14kB with the hono/tiny preset) and has zero dependencies. It is compatible with various JavaScript runtimes including Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js (via an adapter).

  5. Choose the appropriate Hono Router for your environment

    Hono provides five different router implementations depending on the performance and size requirements of your application:

    • RegExpRouter: The fastest for request matching. It compiles route patterns into one large regular expression to avoid linear loops. However, it does not support all routing patterns and has a slower registration phase.
    • TrieRouter: Uses a Trie-tree algorithm. It is slower than RegExpRouter but faster than Express and supports all routing patterns.
    • SmartRouter: The default router. It manages multiple routers (typically RegExpRouter and TrieRouter) and automatically selects the fastest one based on the registered routes.
    • LinearRouter: Optimized for 'one shot' environments where the application initializes on every request. It has the fastest route registration phase because it avoids string compilation.
    • PatternRouter: The most lightweight implementation. Use this for resource-constrained environments to keep the application size minimal (under 15KB).

  6. Understand Hono's Web Standards compatibility

    Hono is built exclusively using Web Standards (such as the Fetch API), meaning it relies on standard objects like Request, Response, URL, URLSearchParams, and Headers to handle HTTP traffic. Because of this architecture, Hono code is portable and can run on any runtime that supports these standards without modification.

  7. Use Hono Context to manage request and response

    The Context object (usually denoted as c in handlers) is instantiated for every request and persists until the response is returned. It provides a unified interface to access the request (c.req), the response object (c.res), and helper methods to set status codes, headers, and response bodies.

  8. Create type-safe controllers using hono/factory

    If your architecture requires external controller-like functions, use factory.createHandlers() from the hono/factory package. This utility allows you to define handlers and middleware externally while maintaining correct type inference when they are eventually applied to a route.
    import { createFactory } from 'hono/factory'
import { logger } from 'hono/logger'

const factory = createFactory()

const middleware = factory.createMiddleware(async (c, next) => {
  c.set('foo', 'bar')
  await next()
})

const handlers = factory.createHandlers(logger(), middleware, (c) => {
  return c.json(c.var.foo)
})

app.get('/api', ...handlers)

  9. Configure language detection sources and priority

    You can control the order in which the middleware checks for language preferences using the order option. By default, it checks querystring, then cookie, then header. To enable path-based detection (e.g., /en/about), add 'path' to the order and specify the segment index using lookupFromPathIndex.
    app.use(
  languageDetector({
    order: ['path', 'cookie', 'querystring', 'header'],
    lookupFromPathIndex: 0, // /en/profile → index 0 = 'en'
    supportedLanguages: ['en', 'ar'],
    fallbackLanguage: 'en',
  })
)

  10. Understand Hono Middleware fundamentals

    Middleware in Hono allows you to execute code before and after an endpoint handler.

    • Handler: Must return a Response object. Only one handler is called per request.
    • Middleware: Should await next() to call the next middleware in the chain, or return a Response to early-exit (stop further processing).

    Middleware can be registered globally, for specific paths, or for specific HTTP methods using app.use() or method-specific helpers (e.g., app.post()).

    // Match any method, all routes
app.use(logger())

// Specify path
app.use('/posts/*', cors())

// Specify method and path
app.post('/posts/*', basicAuth())

  11. Create interactive UIs with hono/jsx Client Components

    hono/jsx supports client-side rendering via hono/jsx/dom, allowing the creation of interactive UIs that run in the browser. It is designed to be lightweight and fast, providing a small bundle size compared to frameworks like React.