How to embed Swagger UI into a webpage?

The answer depends on whether you have a plain web page you edit directly, or use a framework like Node.js or React. For simplicity, I’ll assume the former.

Download (or clone) the Swagger UI repository. You’ll need the following files from the dist folder:

swagger-ui.css
swagger-ui-bundle.js
swagger-ui-standalone-preset.js

In the <head> section of your web page, add:

<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/46237255/swagger-ui.css">

Inside the <body>, add:

<div id="swagger-ui"></div>

<script src="https://stackoverflow.com/questions/46237255/swagger-ui-bundle.js"></script>
<script src="swagger-ui-standalone-preset.js"></script>

<script>
window.onload = function() {
  const ui = SwaggerUIBundle({
    url: "https://yourserver.com/path/to/swagger.json",
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ]
  })

  window.ui = ui
}
</script>

<div id="swagger-ui"></div> is the DOM node inside which Swagger UI will be rendered. The SwaggerUIBundle constructor initializes Swagger UI. This is where you specify your spec URL and other parameters.

More Related Contents:

Leave a Comment Cancel reply