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.
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 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|
|2.1.5||2016-07-20||1.1, 1.2, 2.0||tag v.2.1.5|
|2.1.4||2016-01-06||1.1, 1.2, 2.0||tag v.2.1.4|
|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 run build
./dist/index.htmlto launch Swagger UI in a browser
npm run serve to make a new build, watch for changes, and serve the result at http://localhost:8080/.
To build swagger-ui using a docker container:
docker build -t swagger-ui-builder .docker run -p 80:8080 swagger-ui-builder
This will start Swagger UI at
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 what's in its various directories:
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 =url:""dom_id:"swagger-ui-container";swaggerUi;
|url||The url pointing to
|authorizations||An authorization object to be passed to swagger-js. Setting it here will trigger inclusion of any authorization or custom signing logic when fetching the swagger description file. Note the object structure should be
|spec||A JSON object describing the OpenAPI Specification. When used, the
|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
|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.|
|defaultModelRendering||Controls how models are shown when the API is first rendered. (The user can always switch the rendering for a given model by clicking the 'Model' and 'Model Schema' links.) It can be set to 'model' or 'schema', and the default is 'schema'.|
|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|
|showRequestHeaders||Whether or not to show the headers that were sent when making a request via the 'Try it out!' option. Defaults to
|jsonEditor||Enables a graphical view for editing complex bodies. Defaults to
swagger-ui supports invocation of all HTTP methods APIs including GET, PUT, POST, DELETE, PATCH, OPTIONS. These are handled in the swagger-js project, please see there for specifics on their usage.
// add a new SwaggerClient.ApiKeyAuthorization when the api-key changes in the ui.
This will add the header
api_key with value
key on calls that have the
auth_name security scheme as part of their swaggerDefinitions. You can substitute
query to send the values as a query param.
If you have some header parameters which you need to send with every request, use the headers as below:
Note! You can pass multiple header params on a single request, just use unique names for them (
key is used in the above example).
The localization files are in the lang directory. Note that language files and translator is not included in SwaggerUI by default. You need to add them manually.
To enable translation you should append next two lines in your Swagger's index.html (or another entry point you use)
The first line script is a translator and the second one is your language lexemes.
If you wish to append support for new language you just need to create lang/your_lang.js and fill it like it's done in existing files.
To append new lexemex for translation you should do two things:
At this moment only inner html, title-attribute and value-attribute are going to be translated.
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.jsonand any externally
$refed docs, and for prior version it's the
Try it nowbutton 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/1.1 200 OKDate: Sat, 31 Jan 2015 23:05:44 GMTAccess-Control-Allow-Origin: *Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONSAccess-Control-Allow-Headers: Content-Type, api_key, AuthorizationContent-Type: application/jsonContent-Length: 0
This tells us that the petstore resource listing supports OPTIONS, and the following headers:
XMLHttpRequest cannot load . 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-Headersis 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.
Create your own fork of swagger-api/swagger-ui
To share your changes, submit a pull request.
Please see releases for change log.
Copyright 2016 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.