Swagger single interactive html

Question

I'm trying to make a single html with the try out button. The swagger-code gen nor the swagger-ui gives me that result. Do you have any suggestion?

Answer 1

You can try changing Swagger UI into "one big messy HTML file" as follows:

1. Download Swagger UI (link to the latest master).

2. Go to the dist folder.

3. Edit index.html as follows:

   • Delete <link rel="stylesheet" type="text/css" href="./swagger-ui.css" > and paste the contents of the swagger-ui.css file into the <style> element.

   • Replace

     <script src="./swagger-ui-bundle.js"> </script>
     <script src="./swagger-ui-standalone-preset.js"> </script>
     

     with a <script>...</script> element containing the code from swagger-ui-bundle.js and swagger-ui-standalone-preset.js.

   • Replace

     url: "http://petstore.swagger.io/v2/swagger.json",
     

     with the spec parameter containing your API spec in the JSON format, like so:

     spec: {
       "swagger": "2.0",
       "info": ...,
       "paths": ...
     },
     

     If your spec is YAML, convert it to JSON first, e.g. using https://www.json2yaml.com.

   • Remove the favicons: <link rel="icon" type="image/png" href="./favicon-...

Now index.html can be used as a standalone file.