Swagger UI 3.x has the plugin system that lets you add or modify UI elements. Some documentation on plugins can be found at:
Plugins
What's the intended way of customizing SwaggerUI 3.x?
There is no need to recompile Swagger UI to use plugins, you can actually define the plugins directly in the index.html page. To add or change UI elements, you need a plugin that uses wrapComponents and React.createElement to build the desired DOM structure. (See also React Without JSX.)
For the custom plugins to have effect, they must be added to the plugins list in the SwaggerUIBundle constructor.
Example
Here is a sample plugin that adds custom <h3> headers above and below the API title:
// index.html
<script>
window.onload = function() {
// Custom plugin that adds extra stuff
const MyCustomPlugin = function() {
return {
wrapComponents: {
// add text above InfoContainer - same effect as above title
InfoContainer: (Original, { React }) => (props) => {
return React.createElement("div", null,
React.createElement("h3", null, "I'm above the InfoContainer"),
React.createElement(Original, props)
)
},
// and/or add text above API description
InfoUrl: (Original, { React }) => (props) => {
return React.createElement("div", null,
React.createElement(Original, props),
React.createElement("h3", null, "I'm above the API description")
)
}
}
}
}
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
...
plugins: [
MyCustomPlugin, // <------ add your custom plugin here
SwaggerUIBundle.plugins.DownloadUrl
],
...
The result looks like this:
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
