Skip to content
An Ember addon for quickly and easily adding a swagger-ui to your Ember App.
JavaScript HTML CSS Shell
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon Ember 3.4 (#50) Mar 18, 2019
app remove ember-browserify Jul 26, 2018
blueprints/ember-swagger-ui Ember 3.4 (#50) Mar 18, 2019
config Ember 3.8 (#51) Oct 9, 2019
tests Ember 3.4 (#50) Mar 18, 2019
.bowerrc Initial Commit from Ember CLI v1.13.8 Nov 12, 2015
.coveralls.yml Coveralls with blanket (#30) Jul 29, 2016
.editorconfig update ember-cli (#28) Jul 26, 2016
.ember-cli Initial Commit from Ember CLI v1.13.8 Nov 12, 2015
.eslintignore Ember 3.8 (#51) Oct 9, 2019
.eslintrc.js Ember 3.8 (#51) Oct 9, 2019
.gitignore Ember 3.8 (#51) Oct 9, 2019
.npmignore Ember 3.8 (#51) Oct 9, 2019
.template-lintrc.js Ember 3.4 (#50) Mar 18, 2019
.travis.yml Ember 3.8 (#51) Oct 9, 2019
.watchmanconfig - upgrade to ember-cli@2.2.0-beta.3 Jan 11, 2016 Ember 3.8 (#51) Oct 9, 2019 Ember 3.8 (#51) Oct 9, 2019
ember-cli-build.js Ember 3.4 (#50) Mar 18, 2019
index.js Merge branch 'master' into public_sourcemaps Oct 31, 2018
package-lock.json bump version in package-lock.json Oct 9, 2019
package.json Ember 3.8 (#51) Oct 9, 2019 script to push to github pages Oct 21, 2016
screenshot.png Ember 3.4 (#50) Mar 18, 2019
testem.js Ember 3.4 (#50) Mar 18, 2019


Build Status npm version Ember Observer Score

An ember-cli addon for quickly and easily adding swagger-ui components to your ember application.



  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above


$ ember install ember-swagger-ui

ember-swagger-ui >= 1.0.0


As of version 1.0.0, the addon is based on swagger-ui 3.x. Some notable differences from previous versions include:

  • A simplified component API
  • No Bower dependencies


Configuring a component is done by passing a config object to the component's config attribute. The object takes any and all supported swagger-ui 3.x configuration

// controllers/application.js

import Controller from '@ember/controller';
import Swag from 'swagger-ui';

const {
} = Swag;

export default Controller.extend({
  swaggerConfig: {
    url: '',
    deepLinking: false,
    presets: [
    layout: "StandaloneLayout",
    docExpansion: 'none',
    tagsSorter: 'alpha',
    operationsSorter: 'alpha',
    defaultModelsExpandDepth: -1,
    defaultModelExpandDepth: 1,
    validatorUrl: ''


{{!-- application.hbs --}}
{{swagger-ui config=swaggerConfig}}


// ember-cli-build.js

let app = new EmberAddon(defaults, {
  'ember-swagger-ui': {
    // use public tree instead of vendor concat
    usePublic: true

ember-swagger-ui < 1.0.0 (Pre-releases)


Releases preceeding 1.0.0 are based on swagger-ui 2.x and are considered pre-releases.

Many of the swagger-ui configuration properties are available as attributes on the component. The currently supported options are documented below. For more details on each of these options, please refer to the swagger-ui docs:


The component's default url is "". The following would load the API docs of the default petstore example:


To load your API docs, simply supply the URL of your swagger.json as the "url" attribute value:

{{swagger-ui url=""}}


As noted in the swagger-ui docs, you could alternately supply a JSON object that is a valid Swagger definition:

{{swagger-ui spec=mySpec}}


{{swagger-ui docExpansion="list"}}


{{swagger-ui supportedSubmitMethods=anArrayOfHttpMethods}}


{{swagger-ui showRequestHeaders=true}}


Authorizations are configured in the same manner they would be if pulling in the entire swagger-ui distribution. See below for an example of query parameter apiKey configuration.

A Full Example

{{#swagger-ui showRequestHeaders=true docExpansion="list" supportedSubmitMethods=submitMethods authorizations=authz}}
    <div id='header'>
        <div class="swagger-ui-wrap">
            <a id="logo" href="">swagger</a>
            <form id='api_selector'>
                <div class='input'><input placeholder="" id="input_baseUrl" name="baseUrl" type="text"/></div>
                <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
                <div class='input'><a id="explore" href="#" data-sw-translate>Explore</a></div>
// my-route.js
// set up component attribute values on your controller
setupController(controller) {
  controller.set('submitMethods', ['get', 'post'] );
  controller.set('authz', { name: 'api_key', value: 'myQueryParamApiKey', type: 'query'} );

Block syntax

The component supports block syntax to aid in customizing any content necessary to interact with your API documentation. Following is a contrived example of adding basic auth via a form:

      <form {{action "submit" on="submit"}}>
          {{input value=user placeholder="Username"}}
          {{input value=pw placeholder="Password" type="password"}}
          {{input type="submit" value="Submit"}}

// my-route.js
// setup action to handle the form submission and addition of the swagger authorization
actions: {
  submit() {
    let { user, pw } = this.controllerFor('application').getProperties('user', 'pw');
    let creds = window.btoa(user + ':' + pw);
    let basicAuth = new window.SwaggerClient.ApiKeyAuthorization("Authorization", "Basic " + creds, "header");
    window.swaggerUi.api.clientAuthorizations.add("Authorization", basicAuth);


See the Contributing guide for details.


This project is licensed under the MIT License.

You can’t perform that action at this time.