Skip to content
Fiberplane

OpenAPI Integration

When using Hono with the Zod OpenAPI extension, Studio automatically detects your OpenAPI documentation and provides an integrated documentation viewer right in your development environment.

This makes it easy to inspect and test your API documentation as you build it. On top of that, Studio will use your OpenAPI definitions to generate example requests with AI Request Autofill.

Integrated Live Documentation

Studio automatically detects when you’re using @hono/zod-openapi in your project. So, maybe your API looks like this:

src/index.ts
import { instrument } from "@fiberplane/hono-otel";
import { OpenAPIHono } from "@hono/zod-openapi";
import { z } from "@hono/zod-openapi";


const app = new OpenAPIHono();


// Define your schemas
const UserSchema = z
  .object({
    id: z.string().openapi({
      example: "123"
    }),
    name: z.string().openapi({
      example: "Yusuke Isthebest"
    })
  })
  .openapi("User");


// Create routes with OpenAPI definitions
const route = createRoute({
  method: "get",
  path: "/users/{id}",
  responses: {
    200: {
      content: {
        "application/json": {
          schema: UserSchema
        }
      },
      description: "Retrieve the user"
    }
  }
});


app.openapi(route, (c) => {
  // Your handler implementation
});


// ...


export default instrument(app);

In that case, Studio adds a “Docs” tab to the request panel for the /users/:id route where you can view that route’s OpenAPI documentation:

Documentation tab in Fiberplane

Your documentation will update in realtime, as you develop your API, so you get a snapshot of what your api’s end users will see.

Learn More

For more details on using Hono with Zod OpenAPI, check out the official documentation:

Hono Zod OpenAPI Documentation Learn more about defining OpenAPI schemas with Hono and Zod