Swagger UI - Hide definition URL path

Question

Using Swagger - UI 3XX

I would like to simply know if this is possible and if so, how:

We currently have a need to hide the definition URL path that Swagger - UI displays.

I know it's not possible to remove this URL and I'm not looking to do that, all I'm wanting to do is to hide /mask the text box from the client viewing this page.

Looking at the new Swagger docs here, there are some awesome tricks and extras you can add, however - nothing I can see in relation to my query.

I'm pretty sure, I could interrogate the HTML, find the id of the element in question and manually change the display of it within the index.html, I would much rather prefer using a build in method, if one exists before getting to that possible solution.

i.e. Something like this is possible and works:

<style> .download-url-input { display: none !important; } </style> 

Is this even possible?

Answer 1

In Swagger UI 3.x, you can hide the top bar in one the following ways.

Option 1

Edit dist\index.html and find this code:

const ui = SwaggerUIBundle({
  url: "http://petstore.swagger.io/v2/swagger.json",
  dom_id: '#swagger-ui',
  deepLinking: true,
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  plugins: [
    SwaggerUIBundle.plugins.DownloadUrl
  ],
  layout: "StandaloneLayout"
})

Remove layout, SwaggerUIStandalonePreset and SwaggerUIBundle.plugins.DownloadUrl, so that the constructor looks like this:

const ui = SwaggerUIBundle({
  url: "http://petstore.swagger.io/v2/swagger.json",
  dom_id: '#swagger-ui',
  deepLinking: true,
  presets: [
    SwaggerUIBundle.presets.apis
  ]
})

(Source)

Option 2 - Recompile Code

You can also recompile Swagger UI without the top bar plugin as explained here and rebuilding it. You will need Node.js 6.x and npm 3.x.

1. Edit src/standalone/index.js and remove TopbarPlugin from presets:

   // import TopbarPlugin from "plugins/topbar"    // <----------
   import ConfigsPlugin from "plugins/configs"
   
   // the Standalone preset
   
   let preset = [
     // TopbarPlugin,      // <----------
     ConfigsPlugin,
     () => {
       return {
         components: { StandaloneLayout }
       }
     }
   ]
   

2. Rebuild Swagger UI – in the project's root directory run

   npm install
   

   then

   npm run build
   

Now your dist\index.html does not have a top bar.