2

Why does my Swagger UI look different?

This is what I have:

enter image description here

This is what I would like to have:

enter image description here

In order to get Swagger-UI working, all i did was download the project(https://github.com/swagger-api/swagger-ui), take all the contents in the dist folder and put it in the webapp folder of my dynamic web project. After doing this, I updated the index.html to point to my swagger.json. After this was done, I was able to see the first picture shown. However, the large execute button is not all that appealing :( How do i get my swagger page to look like the second picture shown?

BigBug
  • 6,202
  • 23
  • 87
  • 138

2 Answers2

3

The first image is Swagger UI ver. 3.x or 4.x (the curent version). The second image is Swagger UI ver. 2 (old version, no longer developed).

If you want to use version 2 for some reason, you can download it from the 2.x branch of the Swagger UI repository:

https://github.com/swagger-api/swagger-ui/tree/2.x

Helen
  • 87,344
  • 17
  • 243
  • 314
0

This is just the new look and feel of Swagger-UI from version 3. Just check their FAQ:

Hey, what happened to the UI?! I liked it much better in Swagger-X!

We took the the best of the existing projects, freshened things up and voila! We’re likely to make more changes in the upcoming weeks, and definitely more when we support the next version of the spec.

But I want the old look’n’feel!

That’s the great thing about the new projects – if you want to modify the UI to suit your needs that’s a lot easier now.

StatelessDev
  • 294
  • 4
  • 15