Get Started

Fiberplane Studio is a local debugging companion designed to help you to build, test, and develop Hono APIs.

1. Set up a Hono project

   You can set up a basic Hono project via your terminal:

   npm

   npm create hono@latest -- my-app

   pnpm

   pnpm create hono@latest my-app

   yarn

   yarn create hono@latest my-app

   If you want a project that includes an ORM, a database, and is ready to deploy, we recommend using HONC 🪿:

   npm

   npm create honc-app@latest

   pnpm

   pnpm create honc-app@latest

   yarn

   yarn create honc-app@latest

2. Add the Fiberplane Studio client

   Install the Studio client library in your Hono project. The client library will report traces to the local Fiberplane Studio and give you rich application context while you’re developing.

   npm

   npm i @fiberplane/hono-otel

   pnpm

   pnpm add @fiberplane/hono-otel

   yarn

   yarn add @fiberplane/hono-otel

   bun

   bun add @fiberplane/hono-otel

   Add the client library to index.ts

   Cloudflare

   index.ts

   import { instrument } from "@fiberplane/hono-otel";
   import { Hono } from "hono";
   
   const app = new Hono<{ Bindings: Bindings }>();
   
   app.get("/", (c) => {
     return c.text("Hello Hono!");
   });
   
   export default instrument(app);

   Node.js

   index.ts

   import { instrument } from "@fiberplane/hono-otel";
   import { serve } from "@hono/node-server";
   import { config } from "dotenv";
   import { Hono } from "hono";
   
   // Load environment variables from .env file
   // You need this to load the `FPX_ENDPOINT` variable!
   config();
   
   const app = new Hono();
   
   app.get("/", (c) => c.text("Hello Hono!"));
   
   serve({
     // This is the important line!
     // Wrap `app` with `instrument` before serving
     fetch: instrument(app).fetch,
     port: 3000,
   });

   Caution

   Fiberplane Studio and the client library only support Hono on Cloudflare Workers and Node.js. You can upvote support for Bun and Deno on their respective issues here to help us prioritize development.

3. Launch Fiberplane Studio

   In a new terminal window start Fiberplane Studio from your project directory:

   npm

   npx @fiberplane/studio

   pnpm

   pnpm @fiberplane/studio

   yarn

   yarn @fiberplane/studio

   bun

   bunx @fiberplane/studio

   Finally, start (or restart) your application, and you’re ready to go!

Next steps

Learn about the client library Read more about the client library and how to configure it

Make HTTP requests from Studio Use the Studio as your API client in your local development

Inspect request traces Visualize the entire request-response lifecycle of your API

Generate requests with AI Use language models to generate request data to test your API

Test webhooks Inspect incoming webhooks and forward them to your API using the Studio