Introduction

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.

General

👉🏼 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:

• swagger-ui is a traditional npm module intended for use in single-page applications that are capable of resolving dependencies (via Webpack, Browserify, etc.).
• swagger-ui-dist is a dependency-free module that includes everything you need to serve Swagger UI in a server-side project, or a single-page application that can't resolve npm module dependencies.
• swagger-ui-react is Swagger UI packaged as a React component for use in React applications.

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.

Compatibility

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.19.0 | 2025-02-17 | 2.0, 3.0.0, 3.0.1, 3.0.2, 3.0.3, 3.0.4, 3.1.0, 3.1.1 | tag v5.19.0 | | 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 |

Anonymized analytics

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.

Documentation

Usage

• Installation
• Configuration
• CORS
• OAuth2
• Deep Linking
• Limitations
• Version detection

Customization

• Overview
• Plugin API
• Custom layout

Development

• Setting up
• Scripts

Contributing

• Contributing

Integration Tests

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!

React Component Usage

This package can be used directly as a React component without needing to create a wrapper.

Installation

npm install @upendra19/swagger-ui-custom

Note: This package requires react, react-dom, and prop-types as peer dependencies. Make sure they are installed in your project:

npm install react react-dom prop-types

Usage

import SwaggerUI from "@upendra19/swagger-ui-custom/react"
import "@upendra19/swagger-ui-custom/dist/swagger-ui.css"
import swaggerSpec from "./your-swagger-spec.json"

const App = () => (
  <SwaggerUI 
    spec={swaggerSpec}
    layout="StandaloneLayout"
    showAuthorization={false}
    showTryItOut={false}
    showInfoLinks={false}
    disableAccordion={true}
    showOperationUtilities={false}
    methodColors={{
      post: "#E20074",
      put: "limegreen",
      get: "rgb(255, 0, 0)",
    }}
  />
)

export default App

Note: The React component export (@upendra19/swagger-ui-custom/react) provides a ready-to-use React component, while the default export (@upendra19/swagger-ui-custom) provides the core JavaScript bundle function for vanilla JavaScript applications.

Configuration Options

You can control the UI display using the following configuration options. These can be passed to the main Swagger UI configuration or as props to the React component.

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | layout | String | "BaseLayout" | Layout to use. Use "StandaloneLayout" for the standalone layout. | | showAuthorization | Boolean | true | Toggle to show/hide Authorize button and lock icons. | | showTryItOut | Boolean | true | Toggle to show/hide the "Try it out" button. | | showInfoLinks | Boolean | true | Toggle to show/hide info section links (URL, contact, license, external docs). | | disableAccordion | Boolean | false | Toggle to keep operations always expanded (disable accordion behavior). | | showOperationUtilities | Boolean | true | Toggle to show/hide utility buttons (copy, jump-to) on operations. | | methodColors | Object | undefined | Set custom colors for HTTP methods. |

Usage with SwaggerUIBundle

const ui = SwaggerUIBundle({
  url: "https://petstore.swagger.io/v2/swagger.json",
  dom_id: "#swagger-ui",
  layout: "StandaloneLayout",
  
  // Toggle to show/hide Authorize button and lock icons
  showAuthorization: false,
  
  // Toggle to show/hide the "Try it out" button
  showTryItOut: false,
  
  // Toggle to show/hide info section links (URL, contact, license, external docs)
  showInfoLinks: false,
  
  // Toggle to keep operations always expanded (no accordion)
  disableAccordion: true,
  
  // Toggle to show/hide utility buttons (copy, jump-to) on operations
  showOperationUtilities: false,
  
  // Set custom method colors
  methodColors: {
    post: "#E20074",
    put: "limegreen",
    get: "rgb(255, 0, 0)",
  }
})

Usage with React Component

When using the swagger-ui-react package, these options can be passed directly as props to the component.

import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

const App = () => (
  <SwaggerUI 
    url="https://petstore.swagger.io/v2/swagger.json"
    layout="StandaloneLayout"
    showAuthorization={false}
    showTryItOut={false}
    showInfoLinks={false}
    disableAccordion={true}
    showOperationUtilities={false}
    methodColors={{
      post: "#E20074",
      put: "limegreen",
      get: "rgb(255, 0, 0)",
    }}
  />
)

Browser support

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

Known Issues

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.

• Only part of the parameters previously supported are available.
• The JSON Form Editor is not implemented.
• Support for collectionFormat is partial.
• l10n (translations) is not implemented.
• Relative path support for external files is not implemented.

Security contact

Please disclose any security-related issues or vulnerabilities by emailing [email protected], instead of using the public issue tracker.

License

SwaggerUI is licensed under Apache 2.0 license. SwaggerUI comes with an explicit NOTICE file containing additional legal notices and information.