Replace Swashbuckle UI completely

Question

Right now I'm developing an ASP.Net Web API and using Swashbuckle for its documentation. I know that Swashbuckle use Swagger-UI internally, I know that we can modify the layout by injecting our css or javascript file, even change the layout of index.html.

I found a good themes for Swagger-UI https://github.com/jensoleg/swagger-ui and trying to implement it but can't make it works. Especially when I want to inject bootstrap.js. Is there anyway I can completely change Swashbuckle Swagger UI implementation so I can use the solution from that repo?

Answer 1

Sure you can - in two steps.

1) Include file Index.html as Embedded resource in your assembly. For example let's say your web api project is named "Contosco.Api" and Index.html will be located under "/Content/Index.html" in this project.

2) Override swagger UI main html page with your own

[assembly: PreApplicationStartMethod(typeof(SwaggerConfig), "Register")]
public class SwaggerConfig 
{
  public static void Register()
  {
    var thisAssembly = typeof(SwaggerConfig).Assembly;
    GlobalConfiguration.Configuration.EnableSwagger(c => {
     // configure swagger
    })
    .EnableSwaggerUi(c => {
      // beware - the Contosco.Api.Content.Index.html has to match your project paths :)
      c.CustomAsset("index", thisAssembly, "Contosco.Api.Content.Index.html");
    });
  }
}

Answer 2

You just download .zip folder, extract and include to your project. In SwaggerConfigre.cs you don't need configure any more. Just put template into folder Swagger and when you access {domain}/swagger it will hit index.html. (Don't need change Build action to Embedded Resource, Content is fine)