> ## 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 Framework
> Build a lightweight, fast HTTP server with Hono, a web framework that runs natively on Bun.
[Hono](https://hono.dev) 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:
```bash theme={null}
bun create hono my-app
```
When prompted for a template, select `bun`:
```text theme={null}
✔ 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:
```bash theme={null}
cd my-app
bun install
bun run dev
```
Open [http://localhost:3000](http://localhost:3000) to see your app.
## Manual setup
```bash theme={null}
bun add hono
```
Hono integrates with Bun's native HTTP server by exporting a `fetch`-compatible handler:
```typescript src/index.ts theme={null}
import { Hono } from "hono";
const app = new Hono();
app.get("/", (c) => c.text("Hello Hono!"));
export default {
port: 3000,
fetch: app.fetch,
};
```
```bash theme={null}
bun run src/index.ts
```
## Routing
Hono supports all standard HTTP methods and dynamic route parameters:
```typescript theme={null}
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:
```typescript theme={null}
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:
```tsx src/index.tsx theme={null}
import { Hono } from "hono";
const app = new Hono();
app.get("/", (c) => {
return c.html(
Hello from Hono + JSX
);
});
export default { port: 3000, fetch: app.fetch };
```
Add the following `tsconfig.json` settings to enable Hono's JSX factory:
```json tsconfig.json theme={null}
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
}
}
```
## Grouping routes
Use `app.route()` to group related routes into sub-applications:
```typescript theme={null}
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](https://hono.dev/getting-started/bun) for the complete guide to using Hono with Bun.