How to embed Swagger UI into a webpage?

How to embed Swagger UI into a webpage? Basically I want an API endpoint test environment to embed into my webpage.

Solution 1:

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="swagger-ui.css">

Inside the <body>, add:

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

<script src="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.

How to embed Swagger UI into a webpage?

Solution 1:

Related

Recent Posts