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

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.

Offical documentation: https://swagger.io/docs/open-source-tools/swagger-ui/usage/installation/#:~:text=You%20can%20embed%20Swagger%20UI's,html%20lang%3D%22en%22%3E