CODEWITHSUNDEEP
node.jsswagger
Sami KACHAI
Sami KACHAI

Reputation: 75

Customizing Swagger UI Tab title and favicon for NodeJS

Is there a way to customize Swagger UI with NodeJS? , I've been messing around with the "swagger-ui.css" file contained inside the "node_modules/swagger-ui-dist" directory and I managed to change the tab bar background color and replaced the bar logo, but I couldn't pinpoint the index.html file to change the tab title and the favicon, please keep in mind that there is indeed an "index.html" file in the previously mentioned directory, but it seems swagger is dynamically generating a new index file each time the route is accessed.

Thank you.

Upvotes: 6

Views: 12352

Answers (1)

Aymen zaouali
Aymen zaouali

Reputation: 391

To customize the style of the swagger page, you can pass custom CSS as the 'customCss' and 'customfavIcon' for Favicon property of the options to the setup function.

const express = require('express');
const app = express();
const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');

var options = {
  customCss: '.swagger-ui .topbar { display: none }',
  customSiteTitle: "New Title",
  customfavIcon: "/assets/favicon.ico"
};

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, options));

Upvotes: 27

Related Questions