swagger-ui
Advanced tools
[](http://badge.fury.io/js/swagger-ui) [](https://jenkins.swagger.io/v
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.
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'));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 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 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.
Swagger UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without having any of the implementation logic in place. It’s automatically generated from your OpenAPI (formerly known as Swagger) Specification, with the visual documentation making it easy for back end implementation and client side consumption.
👉🏼 Want to score an easy open-source contribution? Check out our Good first issue label.
🕰️ Looking for the older version of Swagger UI? Refer to the 2.x branch.
This repository publishes three different NPM modules:
We strongly suggest that you use swagger-ui instead of swagger-ui-dist if you're building a single-page application, since swagger-ui-dist is significantly larger.
If you are looking for plain ol' HTML/JS/CSS, download the latest release and copy the contents of the /dist folder to your server.
The OpenAPI Specification has undergone 5 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 |
|---|---|---|---|
| 5.0.0 | 2023-06-12 | 2.0, 3.0.0, 3.0.1, 3.0.2, 3.0.3, 3.1.0 | tag v5.0.0 |
| 4.0.0 | 2021-11-03 | 2.0, 3.0.0, 3.0.1, 3.0.2, 3.0.3 | tag v4.0.0 |
| 3.18.3 | 2018-08-03 | 2.0, 3.0.0, 3.0.1, 3.0.2, 3.0.3 | tag v3.18.3 |
| 3.0.21 | 2017-07-26 | 2.0 | tag v3.0.21 |
| 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 |
SwaggerUI uses Scarf to collect anonymized installation analytics. These analytics help support the maintainers of this library and ONLY run during installation. To opt out, you can set the scarfSettings.enabled field to false in your project's package.json:
// package.json
{
// ...
"scarfSettings": {
"enabled": false
}
// ...
}
Alternatively, you can set the environment variable SCARF_ANALYTICS to false as part of the environment that installs your npm packages, e.g., SCARF_ANALYTICS=false npm install.
You will need JDK of version 7 or higher as instructed here https://nightwatchjs.org/guide/getting-started/installation.html#install-selenium-server
Integration tests can be run locally with npm run e2e - be sure you aren't running a dev server when testing!
Swagger UI works in the latest versions of Chrome, Safari, Firefox, and Edge.
To help with the migration, here are the currently known issues with 3.X. This list will update regularly, and will not include features that were not implemented in previous versions.
collectionFormat is partial.Please disclose any security-related issues or vulnerabilities by emailing security@swagger.io, instead of using the public issue tracker.
SwaggerUI is licensed under Apache 2.0 license. SwaggerUI comes with an explicit NOTICE file containing additional legal notices and information.
FAQs
[](http://badge.fury.io/js/swagger-ui) [](https://jenkins.swagger.io/v
The npm package swagger-ui receives a total of 67,589 weekly downloads. As such, swagger-ui popularity was classified as popular.
We found that swagger-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.