Swagger UI Installation

Distribution channels

NPM Registry

We publish three modules to npm: swagger-ui, swagger-ui-dist and swagger-ui-react.

swagger-ui is meant for consumption by JavaScript web projects that include module bundlers, such as Webpack, Browserify, and Rollup. Its main file exports Swagger UI’s main function, and the module also includes a namespaced stylesheet at swagger-ui/dist/swagger-ui.css. Here’s an example:

1
import SwaggerUI from 'swagger-ui'
2
// or use require if you prefer
3
const SwaggerUI = require('swagger-ui')
4

5
SwaggerUI({
6
  dom_id: '#myDomId'
7
})

See the Webpack Getting Started sample for details.

In contrast, swagger-ui-dist is meant for server-side projects that need assets to serve to clients. The module, when imported, includes an absolutePath helper function that returns the absolute filesystem path to where the swagger-ui-dist module is installed.

Note: we suggest using swagger-ui when your tooling makes it possible, as swagger-ui-dist will result in more code going across the wire.

The module’s contents mirror the dist folder you see in the Git repository. The most useful file is swagger-ui-bundle.js, which is a build of Swagger UI that includes all the code it needs to run in one file. The folder also has an index.html asset, to make it easy to serve Swagger UI like so:

1
const express = require('express')
2
const pathToSwaggerUi = require('swagger-ui-dist').absolutePath()
3

4
const app = express()
5

6
app.use(express.static(pathToSwaggerUi))
7

8
app.listen(3000)

The module also exports SwaggerUIBundle and SwaggerUIStandalonePreset, so if you’re in a JavaScript project that can’t handle a traditional npm module, you could do something like this:

1
var SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle
2

3
const ui = SwaggerUIBundle({
4
    url: "https://petstore.swagger.io/v2/swagger.json",
5
    dom_id: '#swagger-ui',
6
    presets: [
7
      SwaggerUIBundle.presets.apis,
8
      SwaggerUIBundle.SwaggerUIStandalonePreset
9
    ],
10
    layout: "StandaloneLayout"
11
  })

SwaggerUIBundle is equivalent to SwaggerUI.

Docker

You can pull a pre-built docker image of the swagger-ui directly from Docker Hub:

1
docker pull swaggerapi/swagger-ui
2
docker run -p 80:8080 swaggerapi/swagger-ui

Will start nginx with Swagger UI on port 80.

Or you can provide your own swagger.json on your host

1
docker run -p 80:8080 -e SWAGGER_JSON=/foo/swagger.json -v /bar:/foo swaggerapi/swagger-ui

You can also provide a URL to a swagger.json on an external host:

1
docker run -p 80:8080 -e SWAGGER_JSON_URL=https://petstore3.swagger.io/api/v3/openapi.json swaggerapi/swagger-ui

The base URL of the web application can be changed by specifying the BASE_URL environment variable:

1
docker run -p 80:8080 -e BASE_URL=/swagger -e SWAGGER_JSON=/foo/swagger.json -v /bar:/foo swaggerapi/swagger-ui

This will serve Swagger UI at /swagger instead of /.

You can specify a different port via PORT variable for accessing the application, default is 8080.

1
docker run -p 80:80 -e PORT=80 swaggerapi/swagger-ui

You can specify an IPv6 port via PORT_IPV6 variable. By default, IPv6 port is not set.

1
docker run -p 80:80 -e PORT_IPV6=8080 swaggerapi/swagger-ui

You can allow/disallow embedding via EMBEDDING variable. By default, embedding is disabled.

1
docker run -p 80:80 -e EMBEDDING=true swaggerapi/swagger-ui

For more information on controlling Swagger UI through the Docker image, see the Docker section of the Configuration documentation.

unpkg

You can embed Swagger UI’s code directly in your HTML by using unpkg’s interface:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <meta name="description" content="SwaggerUI" />
7
  <title>SwaggerUI</title>
8
  <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui.css" />
9
</head>
10
<body>
11
<div id="swagger-ui"></div>
12
<script src="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js" crossorigin></script>
13
<script>
14
  window.onload = () => {
15
    window.ui = SwaggerUIBundle({
16
      url: 'https://petstore3.swagger.io/api/v3/openapi.json',
17
      dom_id: '#swagger-ui',
18
    });
19
  };
20
</script>
21
</body>
22
</html>

Using StandalonePreset will render TopBar and ValidatorBadge as well.

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1" />
6
    <meta name="description" content="SwaggerUI" />
7
    <title>SwaggerUI</title>
8
    <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui.css" />
9
  </head>
10
  <body>
11
  <div id="swagger-ui"></div>
12
  <script src="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js" crossorigin></script>
13
  <script src="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-standalone-preset.js" crossorigin></script>
14
  <script>
15
    window.onload = () => {
16
      window.ui = SwaggerUIBundle({
17
        url: 'https://petstore3.swagger.io/api/v3/openapi.json',
18
        dom_id: '#swagger-ui',
19
        presets: [
20
          SwaggerUIBundle.presets.apis,
21
          SwaggerUIStandalonePreset
22
        ],
23
        layout: "StandaloneLayout",
24
      });
25
    };
26
  </script>
27
  </body>
28
</html>

See unpkg’s main page for more information on how to use unpkg.

Static files without HTTP or HTML

Once swagger-ui has successfully generated the /dist directory, you can copy this to your own file system and host from there.

Plain old HTML/CSS/JS (Standalone)

The folder /dist includes all the HTML, CSS and JS files needed to run SwaggerUI on a static website or CMS, without requiring NPM.

Download the latest release.
Copy the contents of the /dist folder to your server.
Open swagger-initializer.js in your text editor and replace “https://petstore.swagger.io/v2/swagger.json” with the URL for your OpenAPI 3.0 spec.