Documentation Index
Fetch the complete documentation index at: https://mintlify.com/oven-sh/bun/llms.txt
Use this file to discover all available pages before exploring further.
Hono is a lightweight, ultrafast web framework designed for the edge and compatible with multiple runtimes, including Bun, Cloudflare Workers, Deno, and Node.js.
Quick start
Scaffold a new Hono project with the official template:
When prompted for a template, select bun:
✔ Which template do you want to use? › bun
cloned honojs/starter#main to /path/to/my-app
✔ Copied project files
Then install dependencies and start the dev server:
cd my-app
bun install
bun run dev
Open http://localhost:3000 to see your app.
Manual setup
Create a server
Hono integrates with Bun’s native HTTP server by exporting a fetch-compatible handler:import { Hono } from "hono";
const app = new Hono();
app.get("/", (c) => c.text("Hello Hono!"));
export default {
port: 3000,
fetch: app.fetch,
};
Routing
Hono supports all standard HTTP methods and dynamic route parameters:
import { Hono } from "hono";
const app = new Hono();
app.get("/", (c) => c.text("Hello!"));
app.get("/users/:id", (c) => c.text(`User: ${c.req.param("id")}`));
app.post("/users", async (c) => {
const body = await c.req.json();
return c.json({ created: body });
});
app.delete("/users/:id", (c) => c.text(`Deleted ${c.req.param("id")}`));
export default { port: 3000, fetch: app.fetch };
Middleware
Hono provides built-in middleware and supports custom middleware functions:
import { Hono } from "hono";
import { logger } from "hono/logger";
import { cors } from "hono/cors";
import { bearerAuth } from "hono/bearer-auth";
const app = new Hono();
// Built-in middleware
app.use("*", logger());
app.use("/api/*", cors());
app.use("/admin/*", bearerAuth({ token: Bun.env.ADMIN_TOKEN! }));
app.get("/api/hello", (c) => c.json({ message: "Hello!" }));
app.get("/admin/stats", (c) => c.json({ users: 42 }));
export default { port: 3000, fetch: app.fetch };
JSX templating
Hono supports JSX for server-side HTML rendering without React:
import { Hono } from "hono";
const app = new Hono();
app.get("/", (c) => {
return c.html(
<html>
<body>
<h1>Hello from Hono + JSX</h1>
</body>
</html>
);
});
export default { port: 3000, fetch: app.fetch };
Add the following tsconfig.json settings to enable Hono’s JSX factory:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
}
}
Grouping routes
Use app.route() to group related routes into sub-applications:
import { Hono } from "hono";
const users = new Hono()
.get("/", (c) => c.json([{ id: 1, name: "Alice" }]))
.post("/", async (c) => c.json(await c.req.json(), 201));
const app = new Hono();
app.route("/users", users);
export default { port: 3000, fetch: app.fetch };