CODEWITHSUNDEEP
htmlswagger
Peter Krauss
Peter Krauss

Reputation: 13920

Where the Swagger pretty HTML code?

There are only ugly HTML pages as download (HTML, HTML2 and dynamic all ugly), but the site, eg. edited https://app.swaggerhub.com/apis/{user}/{project}/{version} (and many others!) offers pretty HTML interface... How to download this pretty HTML?

Complete and autonomous HTML code (file or zip of files).

I have a good and valid swagger.yaml or swagger.json file of my API, so another solution is to run a open sourse (plug and play!) tool with my API-description file.

The pretty:

enter image description here

The ugly:

enter image description here

Upvotes: 5

Views: 5962

Answers (2)

Peter Krauss
Peter Krauss

Reputation: 13920

Modern Swagger-UI at https://github.com/swagger-api say on Readme

If you are looking for plain ol' HTML/JS/CSS, download the latest release and copy the contents of the /dist folder to your server.

To install your OpenAPI JSON there, change the URL of this line of swagger-initializer.js,

    url: "MY_URL", //"https://petstore.swagger.io/v2/swagger.json",

Old answer

Thanks to @tleyden at swagger-ui/issues for good clues!

Use the index and assets folder of this project, https://github.com/okfn-brasil/swagger-ui-html

Upvotes: 0

Helen
Helen

Reputation: 97560

The "pretty interface" on your screenshot is Swagger UI. It's free and open-source. There's a demo at http://petstore.swagger.io, where you can load your own YAML/JSON files from an URL and see how they would be rendered.

To use Swagger UI locally:

  1. Go to https://github.com/swagger-api/swagger-ui and download the repository as ZIP:

    Download Swagger UI

  2. Edit the dist\index.html file and change the line

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

    to the URL of your Swagger .json or .yaml file, e.g.

    url: "http://api.mysite.com/swagger.json",

  3. (Optional) Add/change other configuration parameters in the SwaggerUIBundle initialization code in dist\index.html.

  4. Open the dist\index.html file in your browser to preview your API docs.

    Note: If the spec does not load or "try it out" does not work, you probably need to enable CORS on the your server. See https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/cors.md and https://enable-cors.org.

  5. Upload the files from the dist folder somewhere to your server - and now you have pretty API docs too!


Alternatively, SwaggerHub (which you mentioned) provides cloud hosting for Swagger specs among other things, and has Swagger UI integrated. You can import your Swagger .json/.yaml files there and have your API docs hosted on SwaggerHub. A free plan is available.

Upvotes: 6

Related Questions