Hono

If you want to generate a hono, define the client property to hono and a template of Hono will be generated in the target file and directory. You can check Hono.

Example of orval.config.js

1 module.exports = {
2   petstore: {
3     input: {
4       target: './petstore.yaml',
5     },
6     output: {
7       mode: 'split',
8       client: 'hono',
9       target: 'src/petstore.ts',
10       override: {
11         hono: {
12           handlers: 'src/handlers',
13         },
14       },
15     },
16   },
17 };

Currently, Please note that the hono client only works in split mode.

generate template

orval generates a file like the following:

1 src/
2 ├── handlers
3 │   ├── createPets.ts
4 │   ├── listPets.ts
5 │   ├── showPetById.ts
6 │   └── updatePets.ts
7 ├── index.ts
8 ├── petstore.context.ts
9 ├── petstore.schemas.ts
10 ├── petstore.ts
11 ├── petstore.validator.ts
12 └── petstore.zod.ts

• petstore.ts: Initializes hono and defines endpoints.
• handlers: Contains templates for each endpoint.
• petstore.schemas.ts: Defines request and response schemas.
• petstore.validator.ts: Implements hono validator.
• petstore.zod.ts: Defines schemas using zod for validation.
• petstore.context.ts: Defines context for endpoints.

implement endpoint proccess to handler

Orval generates a handler template for Hono. For example, check out listPets.ts. Validation is defined for request and response. Only the actual processing is not implemented.

1 import { createFactory } from 'hono/factory';
2 import { zValidator } from '../petstore.validator';
3 import { ListPetsContext } from '../petstore.context';
4 import { listPetsQueryParams, listPetsResponse } from '../petstore.zod';
5 
6 const factory = createFactory();
7 
8 export const listPetsHandlers = factory.createHandlers(
9   zValidator('query', listPetsQueryParams),
10   zValidator('response', listPetsResponse),
11   async (c: ListPetsContext) => {},
12 );

You can implement the API just by defining the response according to the response schema.

1 import { createFactory } from 'hono/factory';
2 import { zValidator } from '../petstore.validator';
3 import { ListPetsContext } from '../petstore.context';
4 import { listPetsQueryParams, listPetsResponse } from '../petstore.zod';
5 
6 const factory = createFactory();
7 
8 export const listPetsHandlers = factory.createHandlers(
9   zValidator('query', listPetsQueryParams),
10   zValidator('response', listPetsResponse),
11   async (c: ListPetsContext) => {
12 +    return c.json([
13 +      {
14 +        id: 1,
15 +        name: 'doggie',
16 +      },
17 +    ]);
18   },
19 );

run Hono dev server

you can run and check by wrangler dev commnad. The entrypoint is src/petstore.ts instead of src/index.ts.

1 yarn wrangler dev src/petstore.ts
2 curl http://localhost:8787/pets #=> [{"id":1,"name":"doggie"}]

Checkout here the full example. And if you want to develop both the frontend and backend with Typescript using Hono, fetch, and Next.js, please check here as well.

Using composite routes and handlers split by tags in OpenAPI

If you want to using tags or tags-split mode, which splits handlers by tags defined in OpenAPI, but want to generate a composite single hono route file, define file path like a src/routes.ts to the override.hono.compositeRoute property and the Hono template generates a composite root file in the target file and directory.

1 module.exports = {
2   petstore: {
3     input: {
4       target: './petstore.yaml',
5     },
6     output: {
7       mode: 'tags-split',
8       client: 'hono',
9       target: 'src/endpoints',
10       schemas: 'src/schemas',
11       override: {
12         hono: {
13           compositeRoute: 'src/routes.ts',
14         },
15       },
16     },
17   },
18 };

Then it will be generated as below:

1 src/
2 ├── endpoints
3 │   ├── pets
4 │   │   ├── pets.context.ts
5 │   │   ├── pets.handlers.ts
6 │   │   └── pets.zod.ts
7 │   └── validator.ts
8 ├── routes.ts
9 └── schemas
10     ├── pet.ts
11     └── pets.ts

routes.ts composites all routes as shown below:

1 import { Hono } from 'hono';
2 import {
3   listPetsHandlers,
4   createPetsHandlers,
5   updatePetsHandlers,
6   showPetByIdHandlers,
7 } from './endpoints/pets/pets.handlers';
8 
9 const app = new Hono();
10 
11 app.get('/pets', ...listPetsHandlers);
12 app.post('/pets', ...createPetsHandlers);
13 app.put('/pets', ...updatePetsHandlers);
14 app.get('/pets/:petId', ...showPetByIdHandlers);
15 
16 export default app;

You can prepare a hono server like app.ts and embed it like this:

1 import { Hono } from 'hono';
2 import routes from './routes';
3 
4 const app = new Hono();
5 
6 app.route('/', routes);
7 
8 export default app;

run Hono dev server as usual.

1 yarn wrangler dev src/app.ts
2 curl http://localhost:8787/pets #=> [{"id":1,"name":"doggie"}]

Checkout here the full example.