swagger-api / swagger-api/swagger-ui
Collapse Responses section
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
Is your feature request related to a problem?
I'm using swagger a lot. All day I'm working with multiple micro APIs and have several swagger tabs open.
And one thing that constantly happen is getting confused by the "Responses" section of the endpoint.
I think there is 3 issues:
- It looks too much like the "Server response" section, especially when there is a response sample.
- If the API has a lot of response types, it takes a lot of space, when most people using the Swagger UI only care about the actual response, not ALL the possible responses.
- Also, if the API has a lot of response types, it is not always easy to find where the actual response ends, and the list of possible responses start ("Responses" title is small, with no clear separator).
This is a UX issue, as several times I'm just confused by what is displayed and I need to look harder and take a few seconds to understand what is displayed (and complain mentally ^^).
Describe the solution you'd like
Possible solutions would be:
- to make the "Responses" section collapsible, and collapsed by default (most users don't care)
- make the "Responses" section more visually different from the actual response. Today, the main difference is that one has "Server response" instead of "Responses" as a title, and column headers are "Code / Details" instead of "Code / Description". I'm thinking : different background color, a border, a more visible separator between the "Server response" section and the "Responses" section...
Both would be very useful but a collapsible "Responses" section would help a lot and not disrupt too much the UI.
Additional context
Few examples of the issue :
The "default" display (before running) looks too much as if there was already a 200 response.
The first thing you see is "Responses" / "200" / "Successful operation", it is quite easy to be confused, and you may need a couple of seconds to process.

The actual response has mostly 2 differences : the title ("Server response" instead of "Responses"), and the curl/request url
But it is not enough to make it visually stand out.

Moreover, the difference between the actual response and the examples is not visible enough (I shrank the response bodies for the screenshot) :

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue does not name files or tests; start by locating the Swagger UI frontend implementation that renders the Responses section and inspect how it relates to the Server response section. Done means the Responses section is collapsible and collapsed by default, with a clearer visual distinction from the actual response.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100