Hono Framework

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:

bun create hono my-app

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

Install Hono

bun add hono

Create a server

Hono integrates with Bun’s native HTTP server by exporting a fetch-compatible handler:

src/index.ts

import { Hono } from "hono";

const app = new Hono();

app.get("/", (c) => c.text("Hello Hono!"));

export default {
  port: 3000,
  fetch: app.fetch,
};

Run the server

bun run src/index.ts

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:

src/index.tsx

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:

tsconfig.json

{
  "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 };

See the Hono documentation for the complete guide to using Hono with Bun.

Deployment

Ecosystem

Migration

Hono Framework

Quick start

Manual setup

Routing

Middleware

JSX templating

Grouping routes

​Quick start

​Manual setup

​Routing

​Middleware

​JSX templating

​Grouping routes

Quick start

Manual setup

Routing

Middleware

JSX templating

Grouping routes