How to remove the API definition URL under title in Swagger UI?

Question

I'm using Swagger UI and want to remove the API definition URL (link to the YAML file) displayed under the title section as highlighted on the picture. Can this be done by customizing the Swagger UI index.html page?

Answer 1

Option 1: Hide using CSS

<!-- index.html -->

<style>
...

.swagger-ui .info hgroup.main a {
  display: none
}
</style>

Option 2: Hide using JavaScript (v.3.13.0+)

Swagger UI 3.x uses the plugin system to control the rendering. You can define a custom plugin that disables the InfoUrl component - this will prevent the API definition link from being rendered. This approach works in Swagger UI 3.13.0 and later.

// index.html

window.onload = function() {

  // Custom plugin to hide the API definition URL
  const HideInfoUrlPartsPlugin = () => {
    return {
      wrapComponents: {
        InfoUrl: () => () => null
      }
    }
  }

  // Build a system
  const ui = SwaggerUIBundle({
    ...
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl,
      HideInfoUrlPartsPlugin    // <---- Apply the plugin
    ],
    ...
  })

Source