How to embed Swagger UI into a webpage?

Question

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

Answer 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 section of your web page, add:

Inside the , add:

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.