Why there are no themes for swagger-ui?

2020-05-18 05:01发布

问题:

I like swagger for documenting Restful APIs very much, especially "Try it out!" button, but swagger-ui interface doesn't look very cool.

And I cannot believe there are no templates for such amazing open source tool (or I can't find any)?

I don't want it for free.. Like http://getbootstrap.com/ has many sites to buy themes (like https://wrapbootstrap.com/), why I cannot find any site for swagger themes?

回答1:

A late answer, albeit a good one. This is pretty awesome! A slick implementation, and he has customized many things that are easy to tweak yet again for your needs: https://github.com/jensoleg/swagger-ui.

Credits go to this google group: https://groups.google.com/forum/#!topic/swagger-swaggersocket/oeMyayrvKRI. Strange that this has not been posted here yet.

For an action demo, please check out this link: http://senodio.com/site/swagger/#!/pet/addPet

--

EDIT: Recently found that the DEMO is down, so I forked the Repo (https://github.com/MartinSahlen/swagger-ui) and created a simple node/express server that runs on heroku. Please note that this a free heroku dyno, so it might take a while to load (~20 sec) if there is low activity on it for some time.

You're welcome: http://sleepy-harbor-80783.herokuapp.com/#!/pet/addPet

EDIT 2: Just came across another one that looks promising: https://github.com/legendecas/material-swagger-ui . It also seems that the swagger ui I am hosting now is resurrected at http://swaggerui.herokuapp.com/. Keeping mine as well in case it is taken down again.



回答2:

This is a collection of stylesheet themes that can be applied to Swagger UI. Link below to my repo on how to use.

Hope this helps.

https://github.com/ostranme/swagger-ui-themes



回答3:

Another options is ReDoc.

You just need to bring your swagger.json file with an index.html. Easy setup.

<head>
    <title>ReDoc</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <redoc spec-url='your.swagger.json'></redoc>
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
  </body>


回答4:

Swagger-UI, while not being a new tool, is very specific for its task. I'm unaware of any website the provides themes for it (free or paid). Many of its users have customized the UI to fit their local theme. Some have made subtle changes, some a complete overhaul.

I'd recommend looking around at the available implementations and see if something suits your needs. Then perhaps ask permission to reuse their theme/template for your own needs.



回答5:

I recently forked refactored the swagger-ui theme shared above using bootstrap v4 for anyone who is interested. See it here https://github.com/afgarcia86/bootstrap-swagger-ui