65

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?

Wil Moore III
  • 6,968
  • 3
  • 36
  • 49
Arūnas Smaliukas
  • 3,231
  • 6
  • 27
  • 46

6 Answers6

83

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.

martin.code
  • 1,291
  • 9
  • 12
17

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

ostranme
  • 279
  • 3
  • 10
13

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>
user1917528
  • 301
  • 3
  • 9
  • 2
    Indeed a great find. Maybe this even deserves to be the accepted answer (I am the author of the current accepted answer). – martin.code Jun 21 '18 at 21:41
  • 4
    probably with redoc is that it doesn't have try it out button. User beware. – mslugx Mar 05 '20 at 23:56
  • 1
    https://github.com/mrin9/RapiDoc has the try button. try it. It referred by @programmer – Dev Feb 10 '22 at 06:21
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.

Ron
  • 14,160
  • 3
  • 52
  • 39
  • 1
    You can find a (very) partial list here - https://github.com/swagger-api/swagger-spec/wiki/Sites-and-Services. – Ron Jan 20 '15 at 09:40
3

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

Andres F Garcia
  • 6,795
  • 1
  • 14
  • 9
2

I'm also on the search for a better looking theme and found https://github.com/mrin9/RapiDoc

It web component based and says it works with any framework.

programmer
  • 1,096
  • 1
  • 13
  • 31