Skip to main content
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

1

Install Hono

bun add hono
2

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,
};
3

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.

Build docs developers (and LLMs) love

Get started for freeTalk to us