Swagger-ui: How to generate UI from yaml/json on the fly?

[MartinMuzatko]

Hello!

I'm using the latest version of swagger-ui.

I want to generate the Swagger documentation HTML from a json or yaml file. Do I need to host a json or yaml file somewhere to use it as URL before I can use it to create a UI bundle?
Can't I pass a string to SwaggerUIBundle function?

I'm using webpack to generate the UI.

import SwaggerUIBundle from 'swagger-ui'

document.body.innerHTML = `<div id="swagger-ui"></div>`
const ui = SwaggerUIBundle({
  url: "http://petstore.swagger.io/v2/swagger.json",
  dom_id: '#swagger-ui',
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  plugins: [
    SwaggerUIBundle.plugins.DownloadUrl
  ],
  layout: "StandaloneLayout"
})

However this fails, because fs is a dependency. I want to generate the UI on the fly on the front-end like swagger editor does.

What am I missing?

[grosch]

Hear hear. It's so annoying to have to host the file via an HTTP request when it's sitting right on the webserver already where my swagger-ui is running from.

[webron]

So, bad news and good news. The bad news is that we're too far behind on the documentation. The good news, is that it's actually doable.

Option 1, while constructing - The spec parameter to the constructor allows you to pass a JSON object for rendering. That allows you only to pass a JSON, but if you have it embedded in your code, you're good to go.

Option 2, after you initialize the SwaggerUiBundle (say in ui as the example above), you can then call ui.specActions.updateSpec(string); to update the content of it. It can be a stringified YAML or JSON, either works.

[MartinMuzatko]

Hey @webron thank you a lot for the information :)
I'm trying that and then get back to you, to mark this issue as solved (if you haven't already until then)

Cheers

[shockey]

Closing due to inactivity - feel free to comment if there are any further thoughts or concerns, and we'll be happy to reopen this issue.