Skip to content

Commit

Permalink
Blog post tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
brettimus committed Dec 5, 2024
1 parent 9e5fe71 commit 43b8c38
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 14 deletions.
22 changes: 12 additions & 10 deletions www/src/content/blog/2024-12-05-openapi-support.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Announcing OpenAPI Support"
description: "Something"
description: "Studio now supports OpenAPI specs generated with Hono-Zod-OpenAPI"
slug: announcing-openapi-support
date: 2024-12-05
author: Fiberplane Team
Expand All @@ -17,29 +17,29 @@ Nowadays, building HTTP APIs for external usage without implementing the [OpenAP
OpenAPI serves as a guide to your API and is an open standard that can be interpreted by various tools to display information on how to interact with your application's API.
This makes it easy to generate documentation for your API.

Today, we are excited to announce that Fiberplane has added support for OpenAPI specs generate with [Hono Zod OpenAPI](https://hono.dev/examples/zod-openapi) middleware , providing you with an IKEA catalog for your APIs!
Today, we are excited to announce that Fiberplane has added support for OpenAPI specs generated with Hono's [Zod OpenAPI extension](https://hono.dev/examples/zod-openapi), providing you with an IKEA-quality catalog for your APIs!

## OpenAPI Support in Fiberplane

With Fiberplane's support for OpenAPI specs, integrating API documentation into Fiberplane Studio provides a central place to test and debug your Hono application APIs.
Fiberplane's initial support for OpenAPI specs integrates API documentation into Studio, providing a central place to test and debug your Hono application APIs.
On one hand, the OpenAPI spec helps design the correct payload.
On the other hand, it helps you verify if the schemas and routes are correctly defined with Zod and fine-tune your application's API spec.

The Fiberplane client library now supports the detection of OpenAPI specs generated with Zod, and Fiberplane Studio displays the corresponding information.
The [Fiberplane client library](/docs/components/client-library/) now detects OpenAPI specs generated by `OpenAPIHono` apps, and Fiberplane Studio displays the corresponding docs.

When an OpenAPI definition is detected, a new tab in Studio will show the OpenAPI details.
When an OpenAPI definition is detected, a new tab in Studio will show a given route's docs.

![Documentation tab in Fiberplane](@/assets/blog/2024-12-05-documentation-tab.png)

You can view the expected responses and easily see the required input parameters along with their types, making it simple to craft correct payloads for your application's API.
You can view the expected responses and reference the required input parameters along with their types, making it simple to craft correct payloads for your application's API.

## Leveraging Hono Zod

If you want to test it out, we have a code example [here](https://github.com/fiberplane/fpx/tree/main/examples/openapi-zod). It’s a simple user API that allows you to get information about stored users, delete a user, or add a new user to your database.
The application uses Zod to generate the OpenAPI spec.
If you want to test it out, we have a code example [here](https://github.com/fiberplane/fpx/tree/main/examples/openapi-zod). It’s a simple user management API that allows you to get information about stored users, delete a user, or add a new user to your database.
The application uses Zod to define schemas for the OpenAPI spec.

[Zod](https://zod.dev/?id=introduction) is a TypeScript-first library to define schema declarations . [Zod to OpenAPI](https://github.com/asteasolutions/zod-to-openapi) uses the zod schemas to generate OpenAPI documentation.
For Hono applications, [Zod OpenAPI](https://hono.dev/examples/zod-openapi) is a third-party middleware that extends the Hono class.
[Zod](https://zod.dev/?id=introduction) is a TypeScript-first library to define schema declarations. [Zod to OpenAPI](https://github.com/asteasolutions/zod-to-openapi) uses the zod schemas to generate OpenAPI documentation.
For Hono applications, [Zod OpenAPI](https://hono.dev/examples/zod-openapi) is an extension to Hono applications that provides utilities for generating OpenAPI specs directly from your code.

```typescript
import { OpenAPIHono } from "@hono/zod-openapi";
Expand Down Expand Up @@ -119,3 +119,5 @@ app.doc("/doc", {
}
});
```

And that's it! You've now added OpenAPI support to your Hono application, your docs will update whenever you change your code, and Studio will leverage your spec to provide a better development experience.
5 changes: 1 addition & 4 deletions www/src/content/docs/docs/features/openapi-integration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,7 @@ 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:

<Aside type="tip">
The documentation viewer updates in real-time as you modify your API definitions,
making it easy to iterate on your API design.
</Aside>
![Documentation tab in Fiberplane](@/assets/blog/2024-12-05-documentation-tab.png)

### Benefits

Expand Down

0 comments on commit 43b8c38

Please sign in to comment.