Hono Cheat Sheet
Quick reference for Hono — the ultrafast, edge-native web framework. Routes, middleware, validators, JSX, and multi-runtime deployment patterns.
Getting Started
Routing
Context (c) Object
Middleware
Validation (Zod / Valibot)
JSX & HTML
Multi-Runtime Deploy
Getting Started
| npm create hono@latest | Create new Hono project |
| import { Hono } from "hono" | Import Hono |
| const app = new Hono() | Create application instance |
| export default app | Export for Cloudflare Workers / Bun / Deno |
| app.fire() | Start server (Service Worker mode) |
| serve(app, { port: 3000 }) | Start with Node.js adapter (@hono/node-server) |
Routing
| app.get("/", (c) => c.text("Hello")) | GET route returning text |
| app.post("/api/users", handler) | POST route |
| app.put("/api/users/:id", handler) | PUT route with param |
| app.delete("/api/users/:id", handler) | DELETE route |
| app.all("/api/*", handler) | All methods, wildcard path |
| app.on(["GET", "POST"], "/api", handler) | Multiple methods on one route |
| app.route("/api/v1", apiRoutes) | Mount sub-router at prefix |
| app.get("/users/:id", (c) => c.req.param("id")) | Access route parameter |
| app.get("/search", (c) => c.req.query("q")) | Access query parameter |
| app.get("/files/*", (c) => c.req.param("*")) | Wildcard parameter |
Context (c) Object
| c.text("Hello") | Return plain text response |
| c.json({ ok: true }) | Return JSON response |
c.html("Hello") |
Return HTML response |
| c.redirect("/login") | Redirect response (302) |
| c.redirect("/login", 301) | Permanent redirect (301) |
| c.notFound() | Return 404 response |
| c.body(stream) | Return streaming response |
| c.header("X-Custom", "value") | Set response header |
| c.status(201) | Set response status code |
| c.req.header("Authorization") | Get request header |
| await c.req.json() | Parse JSON request body |
| await c.req.formData() | Parse form data body |
| c.set("user", userData) | Set context variable |
| c.get("user") | Get context variable |
| c.env.DB | Access environment bindings (CF Workers) |
Middleware
| app.use("*", logger()) | Apply logging middleware globally |
| app.use("/api/*", cors()) | CORS middleware for API routes |
| app.use("*", secureHeaders()) | Security headers middleware |
| app.use("/admin/*", basicAuth({ ... })) | Basic auth middleware |
| app.use("*", compress()) | Response compression |
| app.use("*", etag()) | ETag caching middleware |
| app.use(async (c, next) => { await next() }) | Custom middleware pattern |
| import { jwt } from "hono/jwt" | JWT authentication middleware |
| import { prettyJSON } from "hono/pretty-json" | Pretty print JSON responses |
| import { cache } from "hono/cache" | Cache middleware (CF Workers) |
Validation (Zod / Valibot)
| import { zValidator } from "@hono/zod-validator" | Import Zod validator |
| app.post("/", zValidator("json", schema), handler) | Validate JSON body |
| app.get("/", zValidator("query", schema), handler) | Validate query params |
| app.post("/", zValidator("form", schema), handler) | Validate form data |
| zValidator("param", z.object({ id: z.string() })) | Validate route params |
| const data = c.req.valid("json") | Access validated data (typed) |
JSX & HTML
| /** @jsxImportSource hono/jsx */ | Enable Hono JSX (tsconfig or pragma) |
const View = (props: { name: string }) => {props.name} |
JSX component |
| c.html( |
Return JSX as HTML response |
app.get("/", (c) => c.html(Hello)) |
Inline JSX in route |
| import { raw } from "hono/html" | Raw HTML helper (skip escaping) |
| import { css, Style } from "hono/css" | CSS-in-JS support |
Multi-Runtime Deploy
| wrangler dev / wrangler deploy | Cloudflare Workers |
| deno serve main.ts | Deno / Deno Deploy |
| bun run src/index.ts | Bun runtime |
| npx @hono/node-server | Node.js (via adapter) |
| import { handle } from "hono/vercel" | Vercel Edge/Serverless |
| import { handle } from "hono/aws-lambda" | AWS Lambda |
| import { handle } from "@hono/nextjs" | Next.js API routes (adapter) |
Try It Live
Test these patterns with our free API Tester. No signup needed.
Open API Tester →
Step-by-Step Guide
Read Guide →