Sort API methods in Swagger-UI

Question

I cannot find any working example, how to achieve the following: I want my API methods in the Swagger-UI sorted either by methods (GET-POST-PUT-DELETE) OR/AND alphabetically

Answer 1

Update for Swagger UI 2.1.0+: The sorter parameter has been split into two parameters, as noted in Fix 1040, Fix 1280:

apisSorter

Apply a sort to the API/tags list. It can be 'alpha' (sort by name) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.

operationsSorter

Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.

So you'll want to update sorter to apisSorter to sort the API list alphabetically, and/or operationsSorter to sort the operations list of each API. The pet shop demo has updated to apisSorter, as shown below:

Example: (working demo, sorted alphabetically)

window.swaggerUi = new SwaggerUi({

...

apisSorter : "alpha"
});

For Swagger UI versions older than 2.1.0:

The sorter parameter is still relevant for older versions of Swagger UI:

You can use the sorter parameter when instantiating SwaggerUi. This happens in the javascript on the Swagger-Ui index.html. From the documentation:

sorter apply a sort to the API list. It can be 'alpha' (sort paths alphanumerically) or 'method' (sort operations by HTTP method). Default is the order returned by the server unchanged.

Example:

window.swaggerUi = new SwaggerUi({

...

sorter : "alpha"
});

Answer 2

For .net Core users with SwaggerUI3:

 app.UseSwaggerUi3(j=>j.TagsSorter = "alpha");

Answer 3

Update for Swagger 3.18.3

 window.ui = SwaggerUIBundle({
           ...
            operationsSorter: function (a, b) {
                var order = {'get': '0', 'post': '1', 'put': '2', 'delete': '3'};
                return order[a.get("method")].localeCompare(order[b.get("method")]);
            },
           ...
 });

Answer 4

The accepted answer is a bit outdated. In newer versions it is done by:

window.swaggerUi = new SwaggerUi({

...

apisSorter: "alpha", // can also be a function
operationsSorter : "method", // can also be 'alpha' or a function
});

Answer 5

// I had the same issue and i fixed like this 
window.swaggerUi = new SwaggerUi({
    apisSorter: "alpha", 
    operationsSorter: function (a, b) { 
    var order = { 'get': '0', 'post': '1', 'put': '2', 'delete': '3' }; 
    return order[a.method].localeCompare(order[b.method]);    
  },
});