fiberplaneHonoStarter

Example Hono app with a Fiberplane API explorer.

For an example with OpenApiHono, see: https://www.val.town/v/fiberplane/fiberplaneHonoOpenApiStarter

1. Import @fiberplane/hono

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

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

Create val
import { createFiberplane, createOpenAPISpec } from "https://esm.sh/@fiberplane/hono@0.4.3-valtown.1";
import { Hono } from "https://esm.sh/hono@4.7.0";

const app = new Hono();

// ... Define your api routes here!

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

export default app.fetch;

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

createFiberplane mounts a UI at the root route (/), 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!)