GitHub Readme.md
This is the new version of swagger-ui, 3.x. Want to learn more? Check out our FAQ.
👉🏼 Want to score an easy open-source contribution? Check out our Good first contribution label.
As a brand new version, written from the ground up, there are some known issues and unimplemented features. Check out the Known Issues section for more details.
This repo publishes to two different NPM packages:
For the older version of swagger-ui, refer to the 2.x branch.
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.18 2017-07-07 2.0 tag v3.0.18 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.1You can pull a pre-built docker image of the swagger-ui directly from Dockerhub:
docker pull swaggerapi/swagger-ui
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
docker run -p 80:8080 -e "SWAGGER_JSON=/foo/swagger.json" -v /bar:/foo swaggerapi/swagger-ui
If you just want to see your specs, open dist/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
. A development server will open on 3200
.
If you'd like to rebuild the /dist
folder with your codebase changes, run npm run build
.
Swagger UI works in the latest versions of Chrome, Safari, Firefox, Edge and IE11.
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.To include the JS, CSS and image assets directly into a webpage, use the swagger-ui-dist package.
The root directory of this package contains the contents of the dist/ directory of this repo.
As a node module, swagger-ui-dist
also exports the swagger-ui-bundle
and swagger-ui-standalone-preset
objects.
To use swagger-ui's bundles, you should take a look at the source of swagger-ui html page and customize it. This basically requires you to instantiate a SwaggerUi object as below:
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
You can configure OAuth2 authorization by calling initOAuth
method with passed configs under the instance of SwaggerUIBundle
default client_id
and client_secret
, realm
, an application name appName
, scopeSeparator
, additionalQueryStringParams
.
authorizationUrl
and tokenUrl
. MUST be a string
appName
application name, displayed in authorization popup. MUST be a string
scopeSeparator
scope separator for passing scopes, encoded before calling, default value is a space (encoded value %20
). MUST be a string
additionalQueryStringParams
Additional query parameters added to authorizationUrl
and tokenUrl
. MUST be an object
const ui = SwaggerUIBundle({...})
// Method can be called in any place after calling constructor SwaggerUIBundle
ui.initOAuth({
clientId: "your-client-id",
clientSecret: "your-client-secret-if-required",
realm: "your-realms",
appName: "your-app-name",
scopeSeparator: " ",
additionalQueryStringParams: {test: "hello"}
})
If you'd like to use the bundle files via npm, check out the swagger-ui-dist
package.
Parameters with dots in their names are single strings used to organize subordinate parameters, and are not indicative of a nested structure.
Parameter Name Description url The url pointing to API definition (normallyswagger.json
or swagger.yaml
). Will be ignored if urls
or spec
is used.
urls
An array of API definition objects ({url: "<url>", name: "<name>"}
) used by Topbar plugin. When used and Topbar plugin is enabled, the url
parameter will not be parsed. Names and URLs must be unique among all items in this array, since they're used as identifiers.
urls.primaryName
When using urls
, you can use this subparameter. If the value matches the name of a spec provided in urls
, that spec will be displayed when Swagger-UI loads, instead of defaulting to the first spec in urls
.
spec
A JSON object describing the OpenAPI Specification. When used, the url
parameter will not be parsed. This is useful for testing manually-generated specifications without hosting them.
validatorUrl
By default, Swagger-UI attempts to validate specs against swagger.io's online validator. You can use this parameter to set a different validator URL, for example for locally deployed validators (Validator Badge). Setting it to null
will disable validation.
dom_id
The id of a dom element inside which SwaggerUi will put the user interface for swagger.
oauth2RedirectUrl
OAuth redirect URL
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.
configUrl
Configs URL
parameterMacro
MUST be a function. Function to set default value to parameters. Accepts two arguments parameterMacro(operation, parameter). Operation and parameter are objects passed for context, both remain immutable
modelPropertyMacro
MUST be a function. Function to set default values to each property in model. Accepts one argument modelPropertyMacro(property), property is immutable
docExpansion
Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing). The default is 'list'.
displayOperationId
Controls the display of operationId in operations list. The default is false
.
displayRequestDuration
Controls the display of the request duration (in milliseconds) for Try it out
requests. The default is false
.
Topbar plugin enables top bar with input for spec path and explore button or a dropdown if urls
is used. By default the plugin is enabled, and to disable it you need to remove Topbar plugin from presets in src/standalone/index.js
:
let preset = [
// TopbarPlugin,
ConfigsPlugin,
() => {
return {
components: { StandaloneLayout }
}
}
]
Configs plugin allows to fetch external configs instead of passing them to SwaggerUIBundle
. Fetched configs support two formats: JSON or yaml. The plugin is enabled by default.
There are three options of passing config:
config
with URL to a server where the configs are hosted. For ex. http://petstore.swagger.io/?config=http://localhost:3001/config.yaml
configUrl
with URL to SwaggerUIBundleswagger-config.yaml
Note: after changing, the project must be re-built
These options can be used altogether, the order of inheritance is following (from the lowest priority to the highest):
swagger-config.yaml
-> config passed to SwaggerUIBundle
-> config fetched from configUrl
passed to SwaggerUIBundle
-> config fetched from URL passed as a query parameter config
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:
Otherwise, CORS support needs to be enabled for:
swagger.json
/swagger.yaml
and any externally $ref
ed docs.Try it now
button to work, CORS needs to be enabled on your API endpoints as well.You can verify CORS support with one of three techniques:
$ 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
.
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.
Access-Control-Allow-Headers
is not available, which is still required for Swagger-UI to function properly.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.
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.
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.