Search code examples
documentationswaggerswagger-uiswagger-codegen

Swagger single interactive html

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?

Solution

  • 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.