swagger-ui

What is swagger-ui?

The swagger-ui npm package is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API. It allows developers to visualize and interact with the API’s resources without having any of the implementation logic in place.

What are swagger-ui's main functionalities?

Display API Documentation

This feature allows you to serve your API documentation using Swagger UI. The code sample demonstrates how to set up an Express server to serve the Swagger UI documentation at the '/api-docs' endpoint.

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
const express = require('express');
const app = express();

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

app.listen(3000, () => console.log('Swagger UI available at http://localhost:3000/api-docs'));

Customizing Swagger UI

This feature allows you to customize the appearance and behavior of Swagger UI. The code sample shows how to hide the top bar and set a custom site title.

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
const express = require('express');
const app = express();

const options = {
  customCss: '.swagger-ui .topbar { display: none }',
  customSiteTitle: 'My API Docs'
};

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, options));

app.listen(3000, () => console.log('Swagger UI available at http://localhost:3000/api-docs'));

Serving Multiple Swagger Documents

This feature allows you to serve multiple Swagger documents, each at a different endpoint. The code sample demonstrates how to set up two different Swagger UI instances for two different API versions.

const swaggerUi = require('swagger-ui-express');
const swaggerDocument1 = require('./swagger1.json');
const swaggerDocument2 = require('./swagger2.json');
const express = require('express');
const app = express();

app.use('/api-docs/v1', swaggerUi.serve, swaggerUi.setup(swaggerDocument1));
app.use('/api-docs/v2', swaggerUi.serve, swaggerUi.setup(swaggerDocument2));

app.listen(3000, () => console.log('Swagger UI available at http://localhost:3000/api-docs/v1 and /api-docs/v2'));

Other packages similar to swagger-ui

redoc

Redoc is an alternative to Swagger UI that focuses on providing a more modern and responsive design for API documentation. It supports OpenAPI 3.0 and offers features like interactive documentation, search functionality, and customizable themes. Compared to Swagger UI, Redoc is often praised for its clean and user-friendly interface.

swagger-jsdoc

Swagger-jsdoc is a library that allows you to integrate JSDoc comments in your codebase to generate Swagger (OpenAPI) documentation. It is particularly useful for projects where the API documentation needs to be generated from the code itself. Unlike Swagger UI, which focuses on displaying the documentation, swagger-jsdoc focuses on generating the documentation from code comments.

api-explorer

API Explorer is a tool for exploring and testing APIs. It provides a user interface for making API requests and viewing responses. While it does not generate documentation like Swagger UI, it is useful for developers who need to interact with and test APIs. It is often used in conjunction with other tools that provide API documentation.

README

Swagger UI

New!

This is the new version of swagger-ui, 3.x.

For the older version of swagger-ui, refer to the 2.x branch.

Compatibility

The OpenAPI Specification has undergone 4 revisions since initial creation in 2010. Compatibility between swagger-ui and the OpenAPI Specification is as follows:

Swagger UI Version	Release Date	OpenAPI Spec compatibility	Notes	Status
3.0.0	2017-03-17	2.0	tag v3.0.0
2.2.10	2017-01-04	1.1, 1.2, 2.0	tag v2.2.10
2.1.5	2016-07-20	1.1, 1.2, 2.0	tag v2.1.5
2.0.24	2014-09-12	1.1, 1.2	tag v2.0.24
1.0.13	2013-03-08	1.1, 1.2	tag v1.0.13
1.0.1	2011-10-11	1.0, 1.1	tag v1.0.1

How to run

Prerequisites

• Node 6.x
• NPM 3.x

If you just want to see your specs, open public/index.html in your browser directly from your filesystem.

If you'd like to make modifications to the codebase, run the dev server with: npm run dev.

Browser support

Swagger UI works in the latest versions of Chrome, Safari, Firefox, Edge and IE11.

CORS Support

CORS is a technique to prevent websites from doing bad things with your personal data. Most browsers + JavaScript toolkits not only support CORS but enforce it, which has implications for your API server which supports Swagger.

You can read about CORS here: http://www.w3.org/TR/cors.

There are two cases where no action is needed for CORS support:

1. swagger-ui is hosted on the same server as the application itself (same host and port).
2. The application is located behind a proxy that enables the required CORS headers. This may already be covered within your organization.

Otherwise, CORS support needs to be enabled for:

1. Your Swagger docs. For Swagger 2.0 it's the swagger.json/swagger.yaml and any externally $refed docs.
2. For the Try it now button to work, CORS needs to be enabled on your API endpoints as well.

Testing CORS Support

You can verify CORS support with one of three techniques:

• Curl your API and inspect the headers. For instance:

$ curl -I "http://petstore.swagger.io/v2/swagger.json"
HTTP/1.1 200 OK
Date: Sat, 31 Jan 2015 23:05:44 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS
Access-Control-Allow-Headers: Content-Type, api_key, Authorization
Content-Type: application/json
Content-Length: 0

This tells us that the petstore resource listing supports OPTIONS, and the following headers: Content-Type, api_key, Authorization.

• Try swagger-ui from your file system and look at the debug console. If CORS is not enabled, you'll see something like this:

XMLHttpRequest cannot load http://sad.server.com/v2/api-docs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Swagger-UI cannot easily show this error state.

• Using the http://www.test-cors.org website. Keep in mind this will show a successful result even if Access-Control-Allow-Headers is not available, which is still required for Swagger-UI to function properly.

Enabling CORS

The method of enabling CORS depends on the server and/or framework you use to host your application. http://enable-cors.org provides information on how to enable CORS in some common web servers.

Other servers/frameworks may provide you information on how to enable it specifically in their use case.

CORS and Header Parameters

Swagger lets you easily send headers as parameters to requests. The name of these headers MUST be supported in your CORS configuration as well. From our example above:

Access-Control-Allow-Headers: Content-Type, api_key, Authorization

Only headers with these names will be allowed to be sent by Swagger-UI.

License

Copyright 2017 SmartBear Software

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.