Swagger UI is part of the Swagger project. The Swagger project allows you to produce, visualize and consume your OWN RESTful services. No proxy or 3rd party services required. Do it your own way.
Swagger UI is a dependency-free collection of HTML, Javascript, and CSS assets that dynamically generate beautiful documentation and sandbox from a Swagger-compliant API. Because Swagger UI has no dependencies, you can host it in any server environment, or on your local machine.
The goal of Swagger™ is to define a standard, language-agnostic interface to REST APIs which allows both humans and computers to discover and understand the capabilities of the service without access to source code, documentation, or through network traffic inspection. When properly defined via Swagger, a consumer can understand and interact with the remote service with a minimal amount of implementation logic. Similar to what interfaces have done for lower-level programming, Swagger removes the guesswork in calling the service.
Check out Swagger-Spec for additional information about the Swagger project, including additional libraries with support for other languages and more.
The Swagger Specification has undergone 4 revisions since initial creation in 2010. Compatibility between swagger-ui and the Swagger specification is as follows:
| Swagger UI Version | Release Date | Swagger Spec compatibility | Notes | Status |
|---|---|---|---|---|
| 2.1.1-M2 | 2015-04-16 | 1.1, 1.2, 2.0 | master | |
| 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 |
You can use the swagger-ui code AS-IS! No need to build or recompile--just clone this repo and use the pre-built files in the dist folder. If you like swagger-ui as-is, stop here.
Swagger UI works in all evergreen desktop browsers (Chrome, Safari, Firefox). Internet Explorer support is version 8 (IE8) and above.
You can rebuild swagger-ui on your own to tweak it or just so you can say you did. To do so, follow these steps:
npm installgulp- You should see the distribution under the dist folder. Open
./dist/index.htmlto launch Swagger UI in a browser
Use gulp watch to make a new build and watch for changes in files.
To build swagger-ui using a docker container:
docker build -t swagger-ui-builder .
docker run -p 127.0.0.1:8080:8080 swagger-ui-builder
This will start Swagger UI at http://localhost:8080.
Once you open the Swagger UI, it will load the Swagger Petstore service and show its APIs. You can enter your own server url and click explore to view the API.
You may choose to customize Swagger UI for your organization. Here is an overview of whats in its various directories:
- dist: Contains a distribution which you can deploy on a server or load from your local machine.
- dist/lang: The swagger localization
- lib: Contains javascript dependencies which swagger-ui depends on
- node_modules: Contains node modules which swagger-ui uses for its development.
- src
- src/main/templates: handlebars templates used to render swagger-ui
- src/main/html: the html files, some images and css
- src/main/javascript: main code
To use swagger-ui 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 and call load() on it as below:
var swaggerUi = new SwaggerUi({
url:"http://petstore.swagger.io/v2/swagger.json",
dom_id:"swagger-ui-container"
});
swaggerUi.load();| Parameter Name | Description |
|---|---|
| url | The url pointing to swagger.json (Swagger 2.0) or the resource listing (earlier versions) as per Swagger Spec. |
| spec | A JSON object describing the Swagger specification. When used, the url parameter will not be parsed. This is useful for testing manually-generated specifications without hosting them. Works for Swagger 2.0 specs only. |
| 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. This parameter is relevant for Swagger 2.0 specs only. |
| dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger. |
| booleanValues | SwaggerUI renders boolean data types as a dropdown. By default it provides a 'true' and 'false' string as the possible choices. You can use this parameter to change the values in dropdown to be something else, for example 0 and 1 by setting booleanValues to new Array(0, 1). |
| docExpansion | Controls how the API listing is displayed. It can be set to 'none' (default), 'list' (shows operations for each resource), or 'full' (fully expanded: shows operations and their details). |
| apisSorter | Apply a sort to the API/tags list. It can be 'alpha' (sort by name) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged. |
| 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. |
| onComplete | This is a callback function parameter which can be passed to be notified of when SwaggerUI has completed rendering successfully. |
| onFailure | This is a callback function parameter which can be passed to be notified of when SwaggerUI encountered a failure was unable to render. |
| highlightSizeThreshold | Any size response below this threshold will be highlighted syntactically, attempting to highlight large responses can lead to browser hangs, not including a threshold will default to highlight all returned responses. |
| supportedSubmitMethods | An array of of the HTTP operations that will have the 'Try it out!` option. An empty array disables all operations. This does not filter the operations from the display. |
| oauth2RedirectUrl | OAuth redirect URL |