This library, `@hono/swagger-ui`, provides a middleware and a component for integrating Swagger UI with Hono applications. Swagger UI is an interactive documentation interface for APIs compliant with the OpenAPI Specification, making it easier to understand and test API endpoints.
## Installation
```bash
npm install @hono/swagger-ui
# or
yarn add @hono/swagger-ui
```
## Usage
### Middleware Usage
You can use the `swaggerUI` middleware to serve Swagger UI on a specific route in your Hono application. Here's how you can do it:
```ts
import { Hono } from 'hono'
import { swaggerUI } from '@hono/swagger-ui'
const app = new Hono()
// Use the middleware to serve Swagger UI at /ui
app.get('/ui', swaggerUI({ url: '/doc' }))
export default app
```
### Component Usage
If you are using `hono/html`, you can use the `SwaggerUI` component to render Swagger UI within your custom HTML structure. Here's an example:
In this example, the `SwaggerUI` component is used to render Swagger UI within a custom HTML structure, allowing for additional customization such as adding custom scripts and styles.
### With `OpenAPIHono` Usage
Hono's middleware has OpenAPI integration `@hono/zod-openapi`, so you can use it to create an OpenAPI document and serve it easily with Swagger UI.
```ts
import { OpenAPIHono, createRoute, z } from '@hono/zod-openapi'
Both the middleware and the component accept an options object for customization.
The following options are available:
-`version` (string, optional): The version of Swagger UI to use, defaults to `latest`.
-`manuallySwaggerUIHtml` (string, optional): If you want to use your own custom HTML, you can specify it here. If this option is specified, the all options except `version` will be ignored.