This middleware provides an easy way to render a beautiful API reference based on an OpenAPI/Swagger document with Hono.
npm install @scalar/hono-api-reference
Set up Zod OpenAPI Hono and pass the configured URL to the Scalar
middleware:
import { Hono } from 'hono'
import { Scalar } from '@scalar/hono-api-reference'
const app = new Hono()
// Use the middleware to serve the Scalar API Reference at /scalar
app.get('/scalar', Scalar({ url: '/doc' }))
export default app
The Hono middleware takes our universal configuration object, read more about configuration in the core package README.
The middleware comes with a custom theme for Hono. You can use one of the other predefined themes (alternate
, default
, moon
, purple
, solarized
) or overwrite it with none
. All themes come with a light and dark color scheme.
import { Scalar } from '@scalar/hono-api-reference'
// Switch the theme (or pass other options)
app.get('/scalar', Scalar({
url: '/doc',
theme: 'purple',
}))
There’s one additional option to set the page title:
import { Scalar } from '@scalar/hono-api-reference'
// Set a page title
app.get('/scalar', Scalar({
url: '/doc',
pageTitle: 'Awesome API',
}))
You can use a custom CDN ,default is https://cdn.jsdelivr.net/npm/@scalar/api-reference
.
You can also pin the CDN to a specific version by specifying it in the CDN string like https://cdn.jsdelivr.net/npm/@scalar/api-reference@1.25.28
You can find all available CDN versions here
import { Scalar } from '@scalar/hono-api-reference'
app.get('/scalar', Scalar({ url: '/doc', pageTitle: 'Awesome API' }))
app.get('/scalar', Scalar({
url: '/doc',
cdn: 'https://cdn.jsdelivr.net/npm/@scalar/api-reference@latest',
}))
We are API nerds. You too? Let’s chat on Discord: https://discord.gg/scalar
The source code in this repository is licensed under MIT.