Much of the css is not being used and can be safely removed

var nano = require('gulp-cssnano');
/**
 * Processes less files into CSS files
 */
gulp.task('less', ['clean'], function() {

  return gulp
    .src([
      './src/main/less/screen.less',
      './src/main/less/print.less',
      './src/main/less/reset.less'
    ])
    .pipe(less())
    .pipe(concat('min.css'))
    .pipe(nano())
    .on('error', log)
    .pipe(gulp.dest('./src/main/html/css/'))
    .pipe(connect.reload());
});

and use min.css in the project

I've been trying to figure out how to get OAuth2 to work. I tried setting it up which it looks like this repo is missing some recent changes from Swagger UI that have enabled it out of the box by default by checking the definition and enabling it automatically.

You can enable it by adding the script file and uncommenting it.
swagger-api@ec86ee2

If you need an an example setup you could use the OAuth client ID and settings from mine:
http://api.monscierge.com/swagger/ui/index

I'm really hoping to fully switch to this. I could help any way I can though I'm unsure of the codebase right now. It looks to try to put the oauth toggler inline with the operations, but a better UI/UX might be to put it in the top-left sidenav next to api key maybe as a global? The scopes and stuff could be neat like Auth0 does maybe even.

It seems to be an issue with the CSS because the background of sidebar and resources are not till the end of the page if you scroll down. It is like the html and body is not the same height probably due to overflow. I could replicate that in firefox but not in chrome.

After long debugging It seems solved if we set "overflow-y: hidden;" at
".swagger-section ul#resources, .swagger-section ul.endpoints" entry of the CSS.

These ul li ul li ul li structure can be safely turned into divs and much of the styling associated with lists can be removed

I noticed there is some spacing automatically in the textarea inputs. Also the demo url in the readme seems to be moved/gone?

This is what it looks like:

If I remove the text:

I tested this with the default swagger pet API and it does the same thing. I think this changed recently if that helps. I'm still trying to figure out how to fix it.

Hello all,

I am trying to add 'Access-Control-Allow-Origin' in header. to do so i added this line...
window.swaggerUi.api.clientAuthorizations.add("developer_key", apiKeyAuth);
window.swaggerUi.api.clientAuthorizations.add("headerKey", new SwaggerClient.ApiKeyAuthorization('Allow-Access-Control-Origin', '*', "header"));

and then i run the appliation then i got an error::
XMLHttpRequest cannot load http://my_api_query. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and i m getting this when i explore the request header :::>

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, developer_key, access-control-allow-origin
Access-Control-Request-Method:GET
Connection:keep-alive

there is no extra custom header added in the request header. it is adding my access-control-allow-origin as a value into Access-Control-Request-Headers.

i want to add this access-control-allow-origin as a new custom header like .:::>

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, developer_key
Access-Control-Allow-Origin: *
Access-Control-Request-Method:GET
Connection:keep-alive

it also throws an error[::> Refused to set unsafe header "Origin"] when i directly add a line of code to swagger-ui.js [under //set header fields[Line: 22076 (may differ.)]]

xhr.setRequestHeader('Origin','http://somesitename.domain_ext');

can any one suggest me, what am i doing wrong, or what should i do extra to do this .....

I need to pass basic auth header to my api. Just like Basic swagger UI do we have option to add username / password to create basic auth header?

I have downloaded the files but I am not able to get all working. I don't see any information to install the code.
I have a swagger-ui running well and I have tried to take the code from your dist folder to replace the standard swagger-ui, but I get a not found error on javascript (http://localhost/swagger.json 404 (Not Found)), that is normal because all is located in a subdirectory.
Is there some place to configure the paths? Is there another way to install?
Many thanks for your help and for this important project.

I want to customize to put the method name instead of summary in the sidebar and the heading. Summary could instead be written just above description. How can I can do it?

How can I use this theme in my Swashbuckle project? Thanks.

Specifically this code of block

<div class="token-generator hide">
  <span data-close="" class="icon-budicon-471"></span>
  <label for="input-api-token">Url</label>
  <input autocorrect="off" class="form-control" id="input_baseUrl" placeholder="http://example.com/api" type="text">

  <div class="scope-selector">
                    <label for="scopes">Token</label>

                    <div class="area controls">
                        <input autocorrect="off" class="form-control" id="input_apiKey" placeholder="Enter api key or token" type="text">
                    </div>

                    <div class="area cta">
                        <div data-add-scope="" id="explore" class="btn"><span class="icon-budicon-519"></span>
                        </div>
                    </div>
   </div>
</div>

I tried putting this jscript code, didn't work

$('div.token-generator.hide').hide();

Getting this error when I run a http--server.
GET http://localhost:8081//swagger.json 404 (Not Found)
spec-converter.js:60 Uncaught Can't read swagger JSON from http://localhost:8081//swagger.json

Looks like password fields are in plain text at the moment. If they could be masked to match the behavior of the original swagger ui, that would be great.

Support was added in swagger-ui v2.1.3-M2

swagger-api#911

I've actually been able to fix this though. I changed the swagger-js target in package.json from your fork to the latest version in the official branch. When I rebuilt this fork of swagger-ui, global parameters started working automatically and there were no issues with using the master branch of swagger-js instead of your fork. I would recommend updating the package.json and rebuilding dist so that other users can have this feature as well.

In the right-most column, the auth0 API docs show samples of the response and schema. How do you define these samples? So, if I have a swagger definition:

swagger_api :index do
  summary 'List Discussions'
  param :path, :workroom_id, :integer, :required, "ID of workroom to filter discussions"
end

how and where can you define example responses and schemas?

Hi,

Great work - this looks amazing and so much better than the base Swagger UI.

I'd love to add a fixed header to my swagger documentation. The one challenge is to offset by the header height when scrolling, but it's a bit hard to see what's going on in your scroll handler, since it's a minified javascript block in the index.html file.

Is there source code anywhere?

Thanks,
Terry

It would be really cool if we integrated this https://www.npmjs.com/package/gulp-sourcemaps

Can you use this with SpringFox?

Hi

i try to set the token on header for all the calls,but nothing.

please check
thanks

Federico

Hey, I really like your approach and find the design way better than swagger-ui default. Thanks a lot!
I only wonder where you see the project heading at... is the aim to merge this back into swagger-ui (e.g. as a theme) or will this continue in parallel to swagger-ui? How do you add updates/bugfixes in swagger-ui, e.g. updating to version 2.1.3??

I noticed Auth0 has a model-signature class on the <code> tags which makes them gray and you can still use the code tag in descriptions for emphasis.

Do you like that? I tried to get a PR with it, but it got messed up on body parameters.

The schema is in the block for sample.

There is a problem with the XML Body Sample. The JSON snippet works well but when I choose the XML type format this doesn't change. It stays in the JSON format. Could you fix that please ?

It might be neat to allow dropdowns to send a null value rather than sending the default as the server will already have the default. I noticed Auth0 has their dropdowns as blank (null) at first and then you choose one. Not sure if this is a good idea or not just thought I'd mention and see what you thought.

https://auth0.com/docs/api/v2#!/Clients/get_clients

Hi,

API testing is not working when I started using this UI. Earlier with the default swagger theme, the API's are wroking but when I used the same json into this theme, its not working.
The problem that I found is, the developer_key is not adding into the headers of API(which adds up in default drop down swagger theme).
Can some one suggest how can I add the developer_key into the header of the api using this UI?

Attached the screenshot of the UI using our json.

Default swagger UI:

Hi,

This is not an issue as much as it is a question about where this tool is headed.

I have recently tried it out on a new swagger file and I love it! I have not configured some things, such as using Basic Auth (not OAuth2) and possibly allowing a 'default' api key to let people play, but I plan to do this soon.

My question is: If I incorporate this into my website, I would like to include content that is generally not included in a swagger file. eg. A general introduction to the API, things to look out for, examples of how to use the api, etc. Typically, this is catered for (in other tools, say) by allowing for markup.

In other words, I want the best of both worlds - swagger based plus markup based content.

Is there anything in the pipeline that may address this need in one tool?

Any comments?

Regards

Colin Goldberg

The response header are not visible on the UI on the right side, please advise?

      responses:
        '201':
          description: Created
          headers:
            Correlation-Id:
              description: xxx
              type: string
              format: uuid
            Location:
             description: Location of the resource created
             type: string

Would it be useful? I've been trying to get it to use the same highlight code after sending a request, but haven't gotten it to work.

Hey @jensoleg have you tried setting a title property on a schema? I've found that the current regular swagger UI is not picking it up and using it.

https://github.com/swagger-api/swagger-spec/blob/master/versions/2.0.md#schema-object

swagger-api/swagger-js#342 (comment)

This file did change, maybe updating https://github.com/jensoleg/swagger-js might help?
https://github.com/swagger-api/swagger-js/blob/master/lib/types/model.js#L42

Most of the java community is turning towards pulling in their UI resources using http://www.webjars.org/.

Right now, I'm embedding swagger-ui into my API war, and am considering switching to this 3 pane version.

Another post looking for some kind of installation guide, even very basic.

Thanks :)

Hi Jens-Ole,

Do you have any plans on updating Swagger-JS and other Swagger-UI related dependencies?

According to the specification for description field:

A brief description of the parameter. This could contain examples of use. GFM syntax can be used for rich text representation.

However, when GFM is used in parameter description, it is rendered as plain text.

Using the official swagger-ui repository, the parameter description is rendered as expected.

What plans, if any, do you have to update to support latest release of swagger?

Hi! First up, this is a stunning project. Thank you!

I'm having trouble getting apiKey authentication to work and while I'm sifting through the entire swagger-ui.js file trying to find a solution, thought I should post here in case you know of any limitations/requirements.

All of my calls require an api key and using the stock Swagger UI, the header api_key field works beautifully. Adding my key in this fork (and clicking the arrow) doesn't add the key to any requests. The modal shows the correct Request URL without the api key appended.

Have you seen this before?

Would be nice to see the error if imported swagger file is not valid.

For any parameter field It shows the whether it is string or int,But does not show whether it is a quary parameter or header part or body part.Default Swagger UI shows that.The json also has the type part and working fine with the default swagger UI .But this theme looks better but does not shows the type of the parameter,So It becomes difficult for the viewer to understand the parameter type.

hello

Can I put multiple SwaggerUi objects in a single HTML page?

tks

This is a proposal to integrate JSON editor for body requests in the UI, this feature is already implemented in the original project of swagger-ui, and for the related commit on swagger-ui click here, this code uses a library called : JSON Schema Based Editor
This is a snapshot of the example of the native JSONEditor in swagger UI

The file index.html should be configurable as (jsonEditor: true).
Thanks,

First of all, this is so awesome! We are loving the bootstrap theme.

We did notice that some long parameter names will run into the form field.

Wonderful project. However, I am unable to get this official Swagger definition to work. Methods are missing.

https://raw.githubusercontent.com/swagger-api/swagger-spec/master/examples/v2.0/json/petstore-expanded.json

Randomly picking Swagger definitions at http://theapistack.com/companies.html shows many are not working either.

I would like to use a 3 or 4 level nested structure in the left navigation panel. I can do one level nesting with tags, but how can I go about doing further nesting of api call summaries under headers?

If you're exploring an API and try to reload, the page fails to load due to a JSON error:

Uncaught SyntaxError: Unexpected token < in JSON at position 0

This is because the code added in #52 blindly appends on /swagger.json to the current URL, which might be something like http://localhost:8000/#!/pet/updatePet; giving http://localhost:8000/#!/pet/updatePet/swagger.json.

A server seeing this URL will actually just return the index.html page which is not valid JSON.

Hey,
first of all, great theme!

We have a fairly complex JSON file so we've created lots of smaller $ref reusable bits but they don't seem to load properly. The sample data is empty and parameters aren't loaded neither. Do you know how we can fix this?

Note that the final .json file is completely self-contained. The _$ref_s only refer to other parts of the .json file, not outside documents

My Service uses the Basic Auth., not the OAuth 2.
How shall I configure this custom UI in order to send Basic Auth data in a request header?

It looks like both the standard swagger ui and this one both are missing passing the authorization header for file uploads. I'm hoping to fix it in this fork soon if I can track it down.

I was just wondering if this have support for the field properties like:

• Pattern (regex)
• Min and maxlength

This is supported in the swagger spec but when I try you UI I can't see that it's used.