원클릭으로
hono-core
Hono ultrafast web framework fundamentals - routing, context, handlers, and response patterns for multi-runtime deployment
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Hono ultrafast web framework fundamentals - routing, context, handlers, and response patterns for multi-runtime deployment
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
ONNX Runtime in Rust via the `ort` crate (2.x): loading sessions, configuring CPU/CoreML/CUDA execution providers, tensor I/O with ndarray, async-safe spawn_blocking wrapping, global thread-pool init, and debugging provider/opset issues
Modern React 19 platform features and rendering architecture - the React Compiler (auto-memoization) and how it changes memoization guidance, concurrent rendering (useTransition/useDeferredValue/Suspense), the use() hook, Actions (useActionState/useOptimistic/useFormStatus), ref-as-prop and Context-as-provider changes, compound components, context selectors, error boundaries, portals, virtualization, code-splitting, and the RSC/'use client' boundary.
General React fundamentals - components and JSX, props and state, the core hooks (useState/useEffect/useRef/useMemo/useCallback/useContext), composition, conditional and list rendering, and controlled inputs. The canonical "depends on React" reference.
Advanced React hooks composition patterns - SWR integration, debounced search, memoized contexts, state machines, and performance optimization
Building reusable React state machine skills with XState v5 and the actor model
Vite lightning-fast build tool with instant HMR, ESM-first architecture, and zero-config setup for modern web development
| name | hono-core |
| description | Hono ultrafast web framework fundamentals - routing, context, handlers, and response patterns for multi-runtime deployment |
| user-invocable | false |
| disable-model-invocation | true |
| skill_version | 1.0.0 |
| updated_at | "2025-01-03T00:00:00.000Z" |
| tags | ["hono","web-framework","routing","typescript","cloudflare-workers","deno","bun","nodejs"] |
| progressive_disclosure | {"entry_point":{"summary":"Ultrafast web framework built on Web Standards for Cloudflare Workers, Deno, Bun, Node.js","when_to_use":"Building APIs/web apps that need multi-runtime deployment, edge computing, or lightweight performance","quick_start":"1. npm create hono@latest 2. Define routes with app.get/post 3. Return responses via context"},"references":[]} |
| context_limit | 800 |
Hono is a small, simple, and ultrafast web framework built on Web Standards. It runs on Cloudflare Workers, Deno, Bun, Node.js, and more with the same codebase. The name means "flame" in Japanese.
Key Features:
Installation:
# Create new project (recommended)
npm create hono@latest my-app
# Or install in existing project
npm install hono
# Runtime-specific adapters
npm install @hono/node-server # Node.js
Use Hono when:
Hono vs Other Frameworks:
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => c.text('Hello Hono!'))
export default app
With TypeScript Generics (for bindings/variables):
type Bindings = {
DATABASE_URL: string
API_KEY: string
}
type Variables = {
user: { id: string; name: string }
}
const app = new Hono<{ Bindings: Bindings; Variables: Variables }>()
The context c provides access to request data and response methods:
app.get('/users/:id', async (c) => {
// Request data
const id = c.req.param('id') // Path parameter
const query = c.req.query('sort') // Query parameter ?sort=asc
const queries = c.req.queries('tags') // Multiple: ?tags=a&tags=b
const header = c.req.header('Authorization')
const body = await c.req.json() // JSON body
const form = await c.req.formData() // Form data
// Environment (Cloudflare Workers bindings)
const db = c.env.DATABASE_URL
// Custom variables (set by middleware)
const user = c.get('user')
// Response methods
return c.text('Plain text')
return c.json({ id, name: 'User' })
return c.html('<h1>Hello</h1>')
return c.redirect('/login')
return c.notFound()
})
// Text response
c.text('Hello', 200)
// JSON response
c.json({ message: 'Success' }, 201)
c.json({ error: 'Not found' }, 404)
// HTML response
c.html('<h1>Hello</h1>')
// Redirect
c.redirect('/login') // 302 default
c.redirect('/login', 301) // Permanent redirect
// Headers
c.header('X-Custom', 'value')
c.header('Cache-Control', 'max-age=3600')
// Streaming
c.streamText(async (stream) => {
await stream.write('Hello ')
await stream.write('World!')
})
// Raw Response
return new Response('Raw', { status: 200 })
const app = new Hono()
// HTTP methods
app.get('/users', getUsers)
app.post('/users', createUser)
app.put('/users/:id', updateUser)
app.delete('/users/:id', deleteUser)
app.patch('/users/:id', patchUser)
// All methods
app.all('/webhook', handleWebhook)
// Custom methods
app.on('PURGE', '/cache', purgeCache)
app.on(['GET', 'POST'], '/form', handleForm)
// Single parameter
app.get('/users/:id', (c) => {
const id = c.req.param('id')
return c.json({ id })
})
// Multiple parameters
app.get('/posts/:postId/comments/:commentId', (c) => {
const { postId, commentId } = c.req.param()
return c.json({ postId, commentId })
})
// Optional parameter
app.get('/api/animal/:type?', (c) => {
const type = c.req.param('type') || 'all'
return c.json({ type })
})
// Regex validation
app.get('/posts/:id{[0-9]+}', (c) => {
const id = c.req.param('id') // Only numeric IDs
return c.json({ id })
})
// Wildcards
app.get('/files/*', (c) => {
const path = c.req.param('*') // Everything after /files/
return c.text(`File: ${path}`)
})
// Using app.route()
const api = new Hono()
api.get('/users', getUsers)
api.get('/posts', getPosts)
const app = new Hono()
app.route('/api/v1', api) // /api/v1/users, /api/v1/posts
// Using basePath()
const v2 = new Hono().basePath('/api/v2')
v2.get('/users', getUsers) // /api/v2/users
// Chaining
app
.get('/a', handlerA)
.post('/b', handlerB)
.delete('/c', handlerC)
// routes/users.ts
import { Hono } from 'hono'
const users = new Hono()
users.get('/', async (c) => {
return c.json({ users: [] })
})
users.post('/', async (c) => {
const body = await c.req.json()
return c.json({ created: body }, 201)
})
users.get('/:id', async (c) => {
const id = c.req.param('id')
return c.json({ id })
})
export default users
// app.ts
import { Hono } from 'hono'
import users from './routes/users'
import posts from './routes/posts'
const app = new Hono()
app.route('/users', users)
app.route('/posts', posts)
export default app
// Simple handler
app.get('/hello', (c) => c.text('Hello!'))
// Async handler
app.get('/users', async (c) => {
const users = await fetchUsers()
return c.json({ users })
})
// Multiple handlers (middleware chain)
app.get('/admin', authenticate, authorize, (c) => {
return c.json({ admin: true })
})
import { createFactory } from 'hono/factory'
const factory = createFactory<{ Bindings: Bindings }>()
// Create typed handler
const getUser = factory.createHandlers(async (c) => {
const id = c.req.param('id')
const db = c.env.DATABASE_URL // Typed!
return c.json({ id })
})
app.get('/users/:id', ...getUser)
import { HTTPException } from 'hono/http-exception'
app.get('/users/:id', async (c) => {
const user = await findUser(c.req.param('id'))
if (!user) {
throw new HTTPException(404, { message: 'User not found' })
}
return c.json(user)
})
// Global error handler
app.onError((err, c) => {
console.error(`${err}`)
if (err instanceof HTTPException) {
return err.getResponse()
}
return c.json({ error: 'Internal Server Error' }, 500)
})
// Not found handler
app.notFound((c) => {
return c.json({ error: 'Route not found' }, 404)
})
class ValidationError extends HTTPException {
constructor(errors: string[]) {
super(400, {
message: 'Validation failed',
cause: errors
})
}
}
class AuthenticationError extends HTTPException {
constructor() {
super(401, { message: 'Authentication required' })
}
}
// src/index.ts
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => c.text('Hello Cloudflare!'))
export default app
// src/index.ts
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => c.text('Hello Node!'))
serve({
fetch: app.fetch,
port: 3000
})
// src/index.ts
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => c.text('Hello Bun!'))
export default {
port: 3000,
fetch: app.fetch
}
// main.ts
import { Hono } from 'npm:hono'
const app = new Hono()
app.get('/', (c) => c.text('Hello Deno!'))
Deno.serve(app.fetch)
// CORRECT: Inline handlers with proper type inference
app.get('/users/:id', async (c) => {
const id = c.req.param('id') // Type: string
return c.json({ id })
})
// AVOID: Controller-style (loses type inference)
class UserController {
getUser(c: Context) {
const id = c.req.param('id') // Type: string | undefined
return c.json({ id })
}
}
// CORRECT: Split routes by domain
// routes/users.ts
export const users = new Hono()
.get('/', listUsers)
.post('/', createUser)
.get('/:id', getUser)
// app.ts
app.route('/users', users)
// Define your environment bindings
type Bindings = {
DATABASE_URL: string
JWT_SECRET: string
MY_KV: KVNamespace
}
// Pass to Hono
const app = new Hono<{ Bindings: Bindings }>()
// Now c.env is fully typed
app.get('/', (c) => {
const url = c.env.DATABASE_URL // string
const kv = c.env.MY_KV // KVNamespace
})
| Method | Description | Example |
|---|---|---|
c.req.param(name) | Get path parameter | c.req.param('id') |
c.req.query(name) | Get query parameter | c.req.query('page') |
c.req.header(name) | Get request header | c.req.header('Authorization') |
c.req.json() | Parse JSON body | await c.req.json() |
c.req.formData() | Parse form data | await c.req.formData() |
c.text(str, status) | Text response | c.text('OK', 200) |
c.json(obj, status) | JSON response | c.json({}, 201) |
c.html(str) | HTML response | c.html('<h1>Hi</h1>') |
c.redirect(url) | Redirect | c.redirect('/login') |
c.header(k, v) | Set response header | c.header('X-Custom', 'val') |
c.set(key, val) | Set context variable | c.set('user', user) |
c.get(key) | Get context variable | c.get('user') |
c.env | Environment bindings | c.env.API_KEY |
app.get(path, ...handlers)
app.post(path, ...handlers)
app.put(path, ...handlers)
app.delete(path, ...handlers)
app.patch(path, ...handlers)
app.options(path, ...handlers)
app.head(path, ...handlers)
app.all(path, ...handlers)
app.on(method, path, ...handlers)
Version: Hono 4.x Last Updated: January 2025 License: MIT