Example Hono app with a Fiberplane API explorer.

For an example with OpenApiHono, see: https://www.val.town/x/fiberplane/fiberplaneHonoZodStarter

1. Import @fiberplane/hono

Create val
import {
  createFiberplane,
  createOpenAPISpec
} from "https://esm.sh/@fiberplane/hono@0.4.4";

2. Generate a simplified API spec (if you don't already have one)

Create val
app.get("/openapi.json", async (c) => {
  const spec = createOpenAPISpec(app, {
    info: { title: "My Hono API", version: "1.0.0" },
  });
  return c.json(spec);
});

3. Mount the api explorer

This will mount it at the root /*, but you can mount it to another route, like /fp/* if you are using / for your main app. We recommend / if your Hono app is an API without a frontend.

Create val
app.use(
  "/*",
  createFiberplane({
    openapi: { url: "/openapi.json" },
  }),
);

4. Visit your Val's root route to play with the API explorer!

createFiberplane mounts Fiberplane on your app at the specified path, which can be used to explore the api's routes and make requests. Think of it like an embedded, lightweigh postman.

If you don't have an API spec at the ready, then the createOpenAPISpec utility helps create a simple OpenAPI spec from all routes in the application. (Note that this simple spec does not include information on expected query parameters, headers, or payloads!)