swagger-ui

What is swagger-ui?

The swagger-ui npm package is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API. It allows developers to visualize and interact with the API’s resources without having any of the implementation logic in place.

What are swagger-ui's main functionalities?

Display API Documentation

This feature allows you to serve your API documentation using Swagger UI. The code sample demonstrates how to set up an Express server to serve the Swagger UI documentation at the '/api-docs' endpoint.

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
const express = require('express');
const app = express();

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

app.listen(3000, () => console.log('Swagger UI available at http://localhost:3000/api-docs'));

Customizing Swagger UI

This feature allows you to customize the appearance and behavior of Swagger UI. The code sample shows how to hide the top bar and set a custom site title.

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
const express = require('express');
const app = express();

const options = {
  customCss: '.swagger-ui .topbar { display: none }',
  customSiteTitle: 'My API Docs'
};

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, options));

app.listen(3000, () => console.log('Swagger UI available at http://localhost:3000/api-docs'));

Serving Multiple Swagger Documents

This feature allows you to serve multiple Swagger documents, each at a different endpoint. The code sample demonstrates how to set up two different Swagger UI instances for two different API versions.

const swaggerUi = require('swagger-ui-express');
const swaggerDocument1 = require('./swagger1.json');
const swaggerDocument2 = require('./swagger2.json');
const express = require('express');
const app = express();

app.use('/api-docs/v1', swaggerUi.serve, swaggerUi.setup(swaggerDocument1));
app.use('/api-docs/v2', swaggerUi.serve, swaggerUi.setup(swaggerDocument2));

app.listen(3000, () => console.log('Swagger UI available at http://localhost:3000/api-docs/v1 and /api-docs/v2'));

Other packages similar to swagger-ui

redoc

Redoc is an alternative to Swagger UI that focuses on providing a more modern and responsive design for API documentation. It supports OpenAPI 3.0 and offers features like interactive documentation, search functionality, and customizable themes. Compared to Swagger UI, Redoc is often praised for its clean and user-friendly interface.

swagger-jsdoc

Swagger-jsdoc is a library that allows you to integrate JSDoc comments in your codebase to generate Swagger (OpenAPI) documentation. It is particularly useful for projects where the API documentation needs to be generated from the code itself. Unlike Swagger UI, which focuses on displaying the documentation, swagger-jsdoc focuses on generating the documentation from code comments.

api-explorer

API Explorer is a tool for exploring and testing APIs. It provides a user interface for making API requests and viewing responses. While it does not generate documentation like Swagger UI, it is useful for developers who need to interact with and test APIs. It is often used in conjunction with other tools that provide API documentation.

README

Swagger UI

Swagger UI is part of 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.

What's Swagger?

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, Swager 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.

How to Use It

Download

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.

Build

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:

1. install handlebars
2. install java
3. npm install
4. npm run-script build
5. You should see the distribution under the dist folder. Open ./dist/index.html to launch Swagger UI in a browser

Use

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.

Customize

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.
• bin: Contains files used by swagger-ui for its build/test. These are not required by the distribution.
• lib: Contains javascript dependencies which swagger-ui depends on
• node_modules: Contains node modules which swagger-ui uses for its development.
• src - src/main/coffeescript: main code in CoffeeScript - src/main/templates: handlebars templates used to render swagger-ui - src/main/html: the html files, some images and css - src/main/javascript: some legacy javascript referenced by CoffeeScript code

SwaggerUi

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:

    window.swaggerUi = new SwaggerUi({
        url:"http://petstore.swagger.wordnik.com/api/api-docs",
        dom_id:"swagger-ui-container"
    });

    window.swaggerUi.load();

• url parameter should point to a resource listing url as per Swagger Spec
• dom_id parameter is the 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)
• sorter apply a sort to the API list. It can be 'alpha' (sort paths alphanumerically) or 'method' (sort operations by HTTP method). Default is the order returned by the server unchanged.
• onComplete is a callback function parameter which can be passed to be notified of when SwaggerUI has completed rendering successfully.
• onFailure 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
• All other parameters are explained in greater detail below

HTTP Methods and API Invocation

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.

Header Parameters

Header params are supported through a pluggable mechanism in swagger-js. You can see the index.html for a sample of how to dynamically set headers:

// add a new ApiKeyAuthorization when the api-key changes in the ui.
$('#input_apiKey').change(function() {
  var key = $('#input_apiKey')[0].value;
  if(key && key.trim() != "") {
    window.authorizations.add("key", new ApiKeyAuthorization("api_key", key, "header"));
  }
})

This will add header api_key with value key on every call to the server. You can substitute query to send the values as a query param.

Custom Header Parameters - (For Basic auth etc)

If you have some header parameters which you need to send with every request, use the headers as below:

window.authorizations.add("key", new ApiKeyAuthorization("Authorization", "XXXX", "header"));

Note! You can pass multiple header params on a single request, just use unique names for them (key is used in the above example).

How to Improve It

Create your own fork of wordnik/swagger-ui

To share your changes, submit a pull request.

Since the javascript files are compiled from coffeescript, please submit changes in the *.coffee files! We have to reject changes only in the .js files as they will be lost on each build of the ui.

License

Copyright 2011-2013 Wordnik, Inc.

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.