Swagger UI - Hide definition URL path - swagger-ui

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.
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 }
}
}
]
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.

Answer 2

For the version 3.x add slice function to:
SwaggerUIStandalonePreset.slice(1)
In the version 4.x (inside swagger-initializer.js file) set layout to "BaseLayout"
window.ui = SwaggerUIBundle({
url: "./swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "BaseLayout" // <<< here
});