Topbar not showing

[onokje]

Q&A (please complete the following information)

• OS: ubuntu 20
• Browser: chrome
• Version: 99.0
• Method of installation: npm (with webpack)
• Swagger-UI version: 4.6.1
• Swagger/OpenAPI version: n/a

Content & configuration

I cannot get mulitple swagger urls to work. I am getting "No API definition provided.". It works with a single url just fine, but I can't get the Topbar to show either way. I am using a very basic setup based on the getting started repo: https://github.com/swagger-api/swagger-ui/tree/master/docs/samples/webpack-getting-started

I have tried with or without the preset/plugins shown below.

My complete index.json (includes Swagger-UI configuration options):

import SwaggerUI from 'swagger-ui'
import 'swagger-ui/dist/swagger-ui.css';

SwaggerUI({
    dom_id: "#swagger-ui",
    urls: [
        {
            url: "http://petstore.swagger.io/v2/swagger.json",
            name: "test1",
        },
        {
            url: "http://petstore.swagger.io/v2/swagger.json",
            name: "test2",
        },
    ],
    queryConfigEnabled: true,
    presets: [
        SwaggerUI.presets.apis,
        SwaggerUI.SwaggerUIStandalonePreset
    ],
    plugins: [
        SwaggerUI.plugins.Topbar
    ]
});

Screenshots

How can we help?

Explain how i can get the topbar to show, so i can switch between multiple openapi json files.

[JonathanDeLeon]

@onokje Having the same issue, did you ever get it working?

[onokje]

Actually no, I just added my own topbar in html.

[fancywriter]

Seeing exactly the same issue. @onokje could you share how exactly you added topbar with HTML? it's not the same as from swagger-ui?

[KyriacosP]

+1 having the same issue

[andrii7ch]

+1 facing the same problem

[JonathanDeLeon]

A couple of things I found that were not noted in the docs.

Topbar requires using the SwaggerUIStandalonePreset which is only available in the swagger-ui-dist. There is an issue on that which shows an example config - https://github.com/swagger-api/swagger-ui/issues/7895 .

The next caveat is that you need to use a "layout" that includes the Topbar component. There is a layout included with swagger-ui-dist that includes it, it's called StandaloneLayout. You can also create a custom layout.

[achilehero]

And, continuing the answer above, so that you have the whole code that works, here it is:

import SwaggerUI from 'swagger-ui'; import SwaggerUIStandalonePreset from 'swagger-ui-dist/swagger-ui-standalone-preset';

SwaggerUI({ presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset], layout: 'StandaloneLayout', urls: [ { url: 'url1', name: 'Name 1' }, { url: 'url2', name: 'Name2' }, ], dom_id: '#swagger-ui' });

[ajlozier]

Forget the StandaloneLayout, presets and Topbar. Most likely this is what you're looking for:

https://stackoverflow.com/a/76186038/421726

Took me hours to figure this out. Hopefully this saves time for others!