@openapi-ui/express-openapi-ui

Express-OpenAPI-UI Middleware

Install

npm install @openapi-ui/express-openapi-ui

pnpm install @openapi-ui/express-openapi-ui

Usage

Set up Express and pass an OpenAPI/Swagger spec to the openApiUIReference middleware:

The most popular way is use swagger-jsdoc to generate an OpenAPI/Swagger file.

import { openApiUIReference } from '@openapi-ui/express-openapi-ui';
import swaggerJsdoc from "swagger-jsdoc";

const openApiSpec = swaggerJsdoc({
  definition: {
    openapi: "3.0.0",
    info: {
      title: "Hello World",
      version: "1.0",
    },
  },
  apis: ["./src/*.ts"], // files containing annotations as above
});

app.get('/openapi.json', (req, res) => {
  res.json(openApiSpec);
});

app.use(
  '/openapi',
  openApiUIReference({
    specPath: '/openapi.json',
  }),
);

try example

Themes

import { openApiUIReference } from '@openapi-ui/express-openapi-ui';

app.use(
  "/openapi",
  openApiUIReference({
    specPath: "/openapi.json",
    theme: 'light', // light or dark
  }),
);

Custom CDN

You can use a custom CDN ，default is https://unpkg.com/openapi-ui-dist.

import { openApiUIReference } from '@openapi-ui/express-openapi-ui';

app.use(
  "/openapi",
  openApiUIReference({
    specPath: "/openapi.json",
    cdn: 'https://registry.npmmirror.com/openapi-ui-dist/latest/files',
  }),
);