Override or extend Swashbuckle Swagger UI

by Mykhailo Konovalov

There are several use cases for swagger ui to be overriden:

  • Add custom HTML to swagger
  • Add custom header to swagger requests
  • Update or extend authorization

In Swashbuckle there is a way to inject custom javascript and css into the body:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
	app.UseSwaggerUI(c =>
    {
        c.InjectJavascript("extend-swagger.js");
        c.InjectStylesheet("extend-swagger.css");
    });
}
Startup.cs

JS and CSS files can exist under wwwroot folder with UseStaticFiles middleware.

Then you can implement new swagger configuration in "extend-swagger.js" file:

const ui = SwaggerUIBundle({
        url: "/swagger/v1/swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        requestInterceptor: function(request) {
        	// request interceptor
            // add custom headers here
            return request;
        },
        onComplete: function() {
            // on complete callback
        }, 
        presets: [
            SwaggerUIBundle.presets.apis,
            SwaggerUIStandalonePreset
        ],
        plugins: [
            SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
    });

// this is a full override of Swagger UI
window.ui = ui;
wwwroot/extend-swagger.js

Full configuration of SwaggerUIBundle can be found at swagger-ui docs