com um clique
hono
Hono 4.x web framework patterns. Use when building APIs, middleware, routing, or server-side applications. Covers multi-runtime support (Node, Bun, Cloudflare Workers), validation, CORS, and error handling.
Menu
Hono 4.x web framework patterns. Use when building APIs, middleware, routing, or server-side applications. Covers multi-runtime support (Node, Bun, Cloudflare Workers), validation, CORS, and error handling.
Baseado na classificação ocupacional SOC
Biome 2.x linting and formatting patterns. Use when configuring code quality tools, setting up linting rules, formatting code, or integrating with CI/CD. Covers migration from ESLint/Prettier.
Radix UI primitive patterns. Use when building accessible, unstyled UI components like dialogs, dropdowns, tooltips, tabs, and selects. Covers Tailwind styling, keyboard navigation, animations, and portal management.
React development patterns. Use when building React components, managing state, creating custom hooks, or optimizing React applications. Covers React 19 features, TypeScript integration, and composition patterns.
Tailwind CSS 4.x utility-first styling patterns. Use when building UI components, creating responsive layouts, implementing design systems, or customizing themes. Covers CSS-first configuration, @theme directive, and component patterns.
Vite 7.x build tool patterns. Use when configuring build setup, development server, environment variables, asset handling, or optimizing production builds for React applications.
Plan infrastructure capacity for expected load. Use when sizing systems, planning for growth, or analyzing resource requirements. Covers load estimation and resource sizing.
| name | hono |
| description | Hono 4.x web framework patterns. Use when building APIs, middleware, routing, or server-side applications. Covers multi-runtime support (Node, Bun, Cloudflare Workers), validation, CORS, and error handling. |
Use Context7 MCP (
resolve-library-idthenquery-docs) for full API reference, all built-in middleware, and additional runtime setup examples.
Lightweight, fast web framework for APIs and server-side applications. Hono 4.x works across Node.js, Bun, Deno, Cloudflare Workers with a consistent API.
Install: pnpm add hono
Creating a basic API:
const app = new Hono()Adding validation:
pnpm add zod @hono/zod-validatorzValidator middleware to routesc.req.valid()// Node.js
import { Hono } from 'hono';
import { serve } from '@hono/node-server';
const app = new Hono();
serve({ fetch: app.fetch, port: 3000 });
// Bun
export default { port: 3000, fetch: app.fetch };
// Cloudflare Workers
export default app;
// HTTP methods
app.get('/users', (c) => c.json({ users: [] }));
app.post('/users', (c) => c.json({ created: true }, 201));
app.put('/users/:id', (c) => c.json({ updated: true }));
app.delete('/users/:id', (c) => c.json({ deleted: true }));
app.on(['GET', 'POST'], '/multi', (c) => c.text(c.req.method));
// Path parameters
app.get('/users/:id', (c) => {
const id = c.req.param('id');
return c.json({ userId: id });
});
// Multiple params
app.get('/posts/:postId/comments/:commentId', (c) => {
const { postId, commentId } = c.req.param();
return c.json({ postId, commentId });
});
// Wildcard
app.get('/files/*', (c) => c.text('File handler'));
// Regex constraint (only numeric IDs)
app.get('/posts/:id{[0-9]+}', (c) => c.json({ id: c.req.param('id') }));
const v1 = new Hono();
v1.get('/users', (c) => c.json({ version: 1, users: [] }));
const v2 = new Hono();
v2.get('/users', (c) => c.json({ version: 2, users: [] }));
app.route('/api/v1', v1);
app.route('/api/v2', v2);
// Query params
app.get('/search', (c) => {
const q = c.req.query('q');
const page = c.req.query('page') ?? '1';
return c.json({ q, page });
});
// JSON body
app.post('/users', async (c) => {
const body = await c.req.json();
return c.json({ received: body });
});
// Headers
app.get('/me', (c) => {
const auth = c.req.header('Authorization');
c.header('X-Custom-Header', 'value');
return c.json({ auth });
});
c.json({ data: 'value' }) // JSON (default 200)
c.json({ created: true }, 201) // JSON with status
c.text('OK') // Plain text
c.html('<h1>Hello</h1>') // HTML
c.redirect('/new') // 302 redirect
c.redirect('https://example.com', 301)
c.notFound() // 404
import { logger } from 'hono/logger';
import { cors } from 'hono/cors';
import { secureHeaders } from 'hono/secure-headers';
import { prettyJSON } from 'hono/pretty-json';
app.use('*', logger());
app.use('*', secureHeaders());
app.use('*', cors({
origin: ['http://localhost:3000', 'https://example.com'],
allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization'],
credentials: true,
}));
if (process.env.NODE_ENV === 'development') {
app.use('*', prettyJSON());
}
// Auth middleware — store data in context
const authMiddleware = async (c, next) => {
const token = c.req.header('Authorization');
if (!token) return c.json({ error: 'Unauthorized' }, 401);
c.set('user', { id: 1, name: 'Alice' }); // stored in context
await next();
};
app.use('/api/*', authMiddleware);
app.get('/api/profile', (c) => {
const user = c.get('user');
return c.json({ user });
});
import { z } from 'zod';
import { zValidator } from '@hono/zod-validator';
const userSchema = z.object({
name: z.string().min(1).max(100),
email: z.string().email(),
age: z.number().int().min(0).max(120).optional(),
});
// Validate body
app.post('/users', zValidator('json', userSchema), async (c) => {
const user = c.req.valid('json'); // fully typed
return c.json({ created: true, user }, 201);
});
// Validate path params
app.get('/users/:id', zValidator('param', z.object({ id: z.string().regex(/^\d+$/) })), (c) => {
const { id } = c.req.valid('param');
return c.json({ userId: id });
});
// Custom validation error response
app.post('/users', zValidator('json', userSchema, (result, c) => {
if (!result.success) {
return c.json({ error: 'Validation failed', details: result.error.flatten() }, 400);
}
}), handler);
import { HTTPException } from 'hono/http-exception';
// Global error handler
app.onError((err, c) => {
if (err instanceof HTTPException) {
return c.json({ error: err.message, status: err.status }, err.status);
}
return c.json({
error: 'Internal Server Error',
message: process.env.NODE_ENV === 'development' ? err.message : undefined,
}, 500);
});
// 404 handler
app.notFound((c) => c.json({ error: 'Not Found', path: c.req.path }, 404));
// Throw HTTP exceptions from route handlers
app.get('/protected', (c) => {
throw new HTTPException(403, { message: 'Forbidden' });
});
type Env = {
Variables: { user: { id: number; name: string } };
};
const app = new Hono<Env>();
app.use('/api/*', async (c, next) => {
c.set('user', { id: 1, name: 'Alice' }); // type-checked
await next();
});
app.get('/api/profile', (c) => {
const user = c.get('user'); // fully typed
return c.json({ user });
});
// server.ts — export the app type
const app = new Hono()
.get('/posts', (c) => c.json({ posts: [] }))
.post('/posts', async (c) => c.json({ created: true }, 201));
export type AppType = typeof app;
// client.ts — fully typed calls, no separate OpenAPI spec needed
import { hc } from 'hono/client';
import type { AppType } from './server';
const client = hc<AppType>('http://localhost:3000');
const res = await client.posts.$get();
const data = await res.json(); // { posts: [] }
import { describe, it, expect } from 'vitest';
describe('API', () => {
const app = new Hono();
app.get('/hello', (c) => c.json({ message: 'Hello' }));
it('returns hello', async () => {
const res = await app.request('/hello');
expect(res.status).toBe(200);
expect(await res.json()).toEqual({ message: 'Hello' });
});
it('handles POST', async () => {
app.post('/users', async (c) => {
const body = await c.req.json();
return c.json({ created: true, user: body }, 201);
});
const res = await app.request('/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Alice' }),
});
expect(res.status).toBe(201);
});
});
Hono<Env>) for variables set in middlewareapp.onError() for consistent error responsesHTTPException instead of manually constructing error responsesapp.request() — Hono's built-in test utility (no server needed)await next() in middleware (breaks middleware chain)cors() only on specific routes (preflight requests need global CORS)any type instead of proper Hono genericsTesting endpoints:
curl -X GET http://localhost:3000/api/users
curl -X POST http://localhost:3000/api/users \
-H "Content-Type: application/json" \
-d '{"name":"Alice","email":"alice@example.com"}'
Validation testing:
# Should return 400 with validation details
curl -X POST http://localhost:3000/api/users \
-H "Content-Type: application/json" \
-d '{"name":"","email":"invalid"}'
Performance testing:
pnpm add -D autocannon
npx autocannon -c 100 -d 10 http://localhost:3000/api/users
# Target: <10ms p99 latency for simple endpoints