Skip to Content
getting-startedFirst Application

Last Updated: 3/11/2026

First Application

Let’s build your first Hono application. You’ll learn the basics of routing, handling requests, and returning responses.

Hello World

Create a file src/index.ts with the following code:

import { Hono } from 'hono'
 
const app = new Hono()
 
app.get('/', (c) => {
  return c.text('Hello Hono!')
})
 
export default app

Start your development server:

npm run dev

Visit http://localhost:8787 in your browser. You should see “Hello Hono!”.

Returning JSON

Returning JSON is straightforward. Use c.json() to send an application/json response:

app.get('/api/hello', (c) => {
  return c.json({
    ok: true,
    message: 'Hello Hono!',
  })
})

Handling Different HTTP Methods

Hono supports all standard HTTP methods:

app.post('/posts', (c) => c.text('Created!', 201))
app.put('/posts/:id', (c) => c.text('Updated!'))
app.delete('/posts/:id', (c) => c.text(`${c.req.param('id')} deleted!`))

Path Parameters

Capture dynamic values from the URL path:

app.get('/posts/:id', (c) => {
  const id = c.req.param('id')
  return c.text(`You requested post ${id}`)
})

Query Parameters

Access URL query parameters:

app.get('/search', (c) => {
  const query = c.req.query('q')
  const page = c.req.query('page') || '1'
  return c.json({ query, page })
})

Setting Headers

Add custom headers to your response:

app.get('/api/data', (c) => {
  c.header('X-Custom-Header', 'Hello')
  c.header('X-Response-Time', '42ms')
  return c.json({ data: 'example' })
})

Returning HTML

You can return HTML using the html helper:

import { Hono } from 'hono'
import { html } from 'hono/html'
 
const app = new Hono()
 
app.get('/page', (c) => {
  const content = html`
    <!DOCTYPE html>
    <html>
      <body>
        <h1>Hello Hono!</h1>
        <p>This is an HTML response.</p>
      </body>
    </html>
  `
  return c.html(content)
})

Using Middleware

Middleware can handle cross-cutting concerns. Here’s how to add Basic Authentication:

import { Hono } from 'hono'
import { basicAuth } from 'hono/basic-auth'
 
const app = new Hono()
 
app.use(
  '/admin/*',
  basicAuth({
    username: 'admin',
    password: 'secret',
  })
)
 
app.get('/admin', (c) => {
  return c.text('You are authorized!')
})

Hono includes many built-in middleware for authentication, CORS, logging, and more.

Raw Response

You can also return a raw Web Standard Response :

app.get('/raw', () => {
  return new Response('Good morning!')
})

Next Steps

Now that you understand the basics, explore platform-specific setup:

Or dive deeper into Routing.

OverviewDeno