CODEWITHSUNDEEP
yamlswaggerswagger-uiswagger-2.0swagger-editor
ItayB
ItayB

Reputation: 11357

Swagger UI / Editor like page - add to my web site

I've created YAML file (and JSON file respectively) manually via swagger editor.

Now I want to embed the cool auto generated page from the swagger-editor tool into my website, so users could read and test it (via 'Try this operation' button) my API live.

I don't want swagger to generate any code for me and I don't need it to update the documentation (YAML or whatever) automatically. I will update my static YAML/JSON file whenever I'll need - manually. Does swagger support this kind of feature? Is it something related to the 'Generate Client' in the swagger editor toolbar? I'm looking for some html/js/css files that could load static YAML file and generate something similar to the right page of swagger-editor. BTW, I'm using Apache web server (not that important).

Thanks!

EDIT: I'm looking for client side only - some js/css/html that could add the above requirements, I don't mind to generate it again from time to time (whenever I'll change my YAML file / my REST API)

Upvotes: 6

Views: 11631

Answers (2)

ItayB
ItayB

Reputation: 11357

Well, I found the tool I was looking for, it's the swagger-ui. It's not looking exactly as the swagger-editor right side UI but it satisfy my requirements - it parse my JSON file (which I wrote manually as YAML) in client side online with only static files (no server side work, only serve the pages).

Thanks anyway!

EDIT: I found that more people are interested in the editor view solution in the following link

EDIT2: I've add a short dirty workaround for previewing only the relevant section of the swagger-editor. You can see the changes here. You can try it:

  1. clone my forked repo: git clone http://github.com/itayB/swagger-editor.git
  2. cd swagger-editor
  3. npm install
  4. npm start

EDIT3: (2022)

  1. clone swagger-editor repo.
  2. In index.html (root folder) add: 
       .topbar, .Resizer, .Pane1 {
     display: none;
   }
  3. In index.html (root folder) modify: 
       .Pane2 {
     width: 100% !important;
     overflow-y: scroll;
   }
  4. In index.html (root folder) modify SwaggerEditorBundle to include: 
        SwaggerEditorBundle({
      ...
      url: 'doc/swagger.json',
      ...
    })

where doc/swagger.json is the path to your spec file.

Please note: This preview shows the output of the file spec-files/default.yaml. I've only made some view changes, all the editor logic is still running behind.

Cheers

Upvotes: 6

ZioByte
ZioByte

Reputation: 3034

I think You're looking for swagger-server (https://github.com/BigstickCarpet/swagger-server).

Upvotes: 1

Related Questions