Appearance

Hono ​

You should build your application by exporting a Hono instance from src/app.ts and registering routes on it. The seed exposes a single GET / route that returns "Hello, World!" — extend it by adding more routes, middleware, and route groups.

Entry file ​

The solution files are organized under src/:

  • src/main.ts — the bootstrap script that imports the app and starts the Node server on port 3000 using @hono/node-server (preloaded, hidden, read-only).
  • src/app.ts — the file where you create the Hono instance and register routes (editable solution file).

Splitting the app definition from the server bootstrap lets you reuse the same app in tests via app.request() without binding to a real port.

Server configuration for API Tester ​

The server is started by src/main.ts (serve({ fetch: app.fetch, port: 3000, hostname: '0.0.0.0' })) so it is running when you use the API Tester tab. The API Tester sends real HTTP requests against your Hono app and renders the response.

typescript
import { serve } from '@hono/node-server';
import { app } from './app';

serve({ fetch: app.fetch, port: 3000, hostname: '0.0.0.0' });

Version ​

Running on Node.js v22.0.0 with Hono 4.

Supported languages ​

TypeScript

Testing framework ​

Vitest

Special reminders and implementation details ​

  • Hono is built on the Web Standards Fetch API: handlers receive a Context and must return a Response (or a Promise<Response>). A handler that calls c.json(...) without returning it sends an empty response.
  • Use the right Context helper for the body type: c.text(...) for plain text, c.json(...) for JSON (sets Content-Type for you), c.html(...) for HTML.
  • Tests use Hono's built-in app.request() helper, which dispatches a request through the app without starting a server — perfect for fast, isolated unit tests.

Example with Vitest + app.request(): ​

typescript
import { describe, it, expect } from 'vitest';
import { app } from './src/app';

describe('GET /', () => {
  it("returns 'Hello, World!' with status 200", async () => {
    const response = await app.request('/');
    expect(response.status).toBe(200);
    expect(await response.text()).toBe('Hello, World!');
  });
});

Included libraries ​

How to debug ​

Hono is a backend framework built on the Web Standards Fetch API — your handlers receive a Context and return a Response. Three main ways to inspect runtime behavior:

1. Logs from inside route handlers ​

Use console.log directly. Output appears in the dev server terminal:

typescript
app.get('/items', (c) => {
  console.log('GET /items called');
  return c.json([]);
});

2. API Tester ​

Use the API Tester tab in the right panel to send real HTTP requests (GET / POST / PUT / PATCH / DELETE) to your running Hono server. Pick a method, type a path, add headers/params/body, and hit Send.

3. Steps to Debug Using Console Logs ​

  1. Identify the Problem Area: Decide whether the issue is in a route handler, middleware, or the app wiring.

  2. Insert console.log() Statements: Add log calls before and after suspicious code. All Hono logs go to the server terminal.

  3. Check the Results Output of your tests

  4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the terminal output.

  5. Analyze the Output: Compare logs against the API Tester responses to spot missing routes, wrong status codes, or unhandled errors.

Common pitfalls ​

  • Forgetting to return the c.json(...) / c.text(...) call — handlers must return a Response (or a Promise of one). A handler that calls c.json(...) without returning it sends an empty response.
  • Using c.body() for JSON — that's the raw-body helper. Use c.json() for objects so the Content-Type header gets set correctly.
  • Importing from hono/node — for Node.js, install @hono/node-server and import { serve } from '@hono/node-server'. The seed already does this.